Введение в 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.
