Существует много примеров использования Babel, однако, когда дело доходит до использования ES6 модулей, тут приходится дополнительно погуглить. Я в итоге так и не нагуглил готового руководства, даже на английском, поэтому написал своё руководство. Буду крайне краток и информативен.
Что необходимо установить на ваш любимый linux-дистрибутив:
sudo aptitude install nodejs # для работы npm sudo npm install -g babel # для компиляции ES6 в ES5 sudo npm install -g browserify # для использования модулей sudo npm install -g watchify # для удобства использования Browserify cd path_to_sources npm install --save-dev babelify # для взаимодействия Babel и Browserify Напишем ES6 код для теста(полный проект тут):
// src/lib.js class ES6Today { use() { console.log("Hello from a JS class!"); } } export { ES6Today }; // src/main.js import { ES6Today } from "./lib"; var es6 = new ES6Today(); es6.use(); // output: Hello from a JS class! Приведённый исходный код не претендует на самый полезный пример использования ES6, так как основная цель руководства — показать одну из технологий компиляции ES6 в ES5.
Переходим непосредственно к компиляции:
watchify src/main.js -t babelify -o build/main.js Разберём принцип работы последней команды. Watchify-демон запускает сборщик Browserify и следит за изменениями в исходном коде файла main.js и модулях, используемых файлом main.js. При сохранении изменений в исходном коде Watchify-демон в очередной раз запускает сборщик Browserify и так до остановки демона Watchify.
Флаг -t со значением babelify говорит о том, что мы используем сгенерированный Babel транспилятором код с форматом модулей по умолчанию(CommonJS) для сборщика Browserify. Флаг -o указывает на выходной одиночный файл, который мы подключаем к HTML-странице.
В итоге мы имеем удобный способ использования ES6 уже сегодня.
P.S. А какой способ используете Вы?
ссылка на оригинал статьи http://habrahabr.ru/post/257153/
Добавить комментарий