Frontender Magazine

Введение в browserify

Весь этот чудесный код для 'npm', менеджера пакетов node.js … вот бы можно было использовать этот код в браузере?

Так мы можем! Используя browserify.

С помощью browserify можно использовать некоторые из модулей ядра node и множество модулей npm на стороне клиента.

Кроме того мы сможем использовать 'require' на стороне клиента.

Установим browserify:

npm install -g browserify

Используя опцию -g что бы установить browserify глобально, что позволит его использовать из командной строки.

Простой пример:

// запрашиваем модуль событий ядра node
var EventEmitter = require('events').EventEmitter;

// создаем новый эмиттер событий
var emitter = new EventEmitter;

// создать слушатель для события
emitter.on('пицца', function(message){
  console.log(message);
});

// emit an event
emitter.emit('пицца', 'пицца это невероятно вкусно');

Сохраните код, который видите выше в файл index.js.

Теперь, что бы возможно было запустить его в браузере введите в терминале команду:

browserify index.js > bundle.js

bundle.js теперь содержит эмиттер событий и все его зависимости и шимы, которые позволят работать им в браузере.

bundle.js можно подключить в html как любой другой скрипт.

Пример:

<!DOCTYPE html>
<html>
<head>
  <title>node / пример browserify</title>
</head>
<body>

<script src="./bundle.js"></script>
</body>
</html>

Вот и все! Теперь вы можете использовать модули node и 'require' в браузере!

Быстрая перезагрузка в процессе разработки

Если вы пишите код, то необходимость запускать browserify в терминале что бы генерировать bundle.js и обновлять после этого страницу потребует массы времени и будет невероятно бесить.

Используйте beefy!

beefy это утилита для командной строки, которая автоматически генерирует и обновляет пакеты browserify в процессе разработки. Каждый раз, когда вы сохраняете скрипт 'beefy' повторно генерирует bundle.js и автоматически обновит страницу в браузере.

Установите beefy:

npm install -g beefy

Теперь запустите:

beefy index.js:bundle.js --live

Опция --live включает в beefy функционал автоперезагрузки.

index.html будет доступен по адресу http://localhost:9966. Откройте этот url в Chrome, затем откройте консоль javascript используя хоткей command+option+j.

Там вы увидите 'пицца это невероятно вкусно'.

Эта статья — черновик главы книги Learn.js: руководство для создания javascript проектов, которая уже доступна для предзаказов


Автор статьи, Сет Винсент (Seth Vincent) — независимый разработчик, писатель и дизайнер. Сейчас работает над http://flatsheet.io, дружелюбными к пользователю редактором и API для работы с табличными данными. А еще он обожает писать статьи о JavaScript в своем блоге http://learnjs.io.

Если вы заметили ошибку, вы всегда можете отредактировать статью, создать issue или просто написать об этом Антону Немцеву в skype ravencry.

Seth Vincent
Автор:
Seth Vincent
Сaйт:
http://sethvincent.com/
Twitter:
@sethdvincent
GitHub:
sethvincent
Антон Немцев
Переводчик:
Антон Немцев
Сaйт:
http://frontender.info/
Twitter:
@silentimp
GitHub:
SilentImp
Skype:
ravencry

Комментарии (3 комментария, если быть точным)

Автар пользователя
SilentImp

Интересно, использовали вы это на практике?

Автар пользователя
iamstarkov

Ещё не пробовали, но кажется скоро начнём

Автар пользователя
A

Мы тоже сейчас экспериментируем с Browserify :D