Существует много примеров использования 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. А какой способ используете Вы (больше интересует front-end)?
Комментарии (42)
Voronar Автор
02.05.2015 21:51-1Большая просьба ко всем минусующим: обосновывайте своё решение.
f0rmat1k
03.05.2015 14:43+3Я не минусовал, но написанное не тянет на статью. Есть уже много примеров использования es6 в продакшене. На сайте бейбела есть куча документации, есть в конце концов systemjs, умеющий все это собирать и также с кучей документации. У вас же пост в стиле «ребят смотрите, я в первый раз собрал es6».
Voronar Автор
03.05.2015 19:51-2А это и не статья, а просто специфический туториал, там около заголовка написано. И так как люди добавляют его в избранное, то польза от него есть, а это самое главное.
f0rmat1k
03.05.2015 19:59Вы предлагаете людям не ставить минус (то есть не считать бесполезным), только исходя из того, что кто-то добавил пост в избранное? Тут нет какой то логики. У любого заминусованного поста есть добавления, и что? Раз те, кто добавили в избранное, не поставили плюс, значит у них для этого нет кармы, то есть их мнение менее ценно, чем мнение тех, кто имеет карму (подразумевается, что он ее заслужил ценным вкладом). В данном случае какие-то опытные люди вас заминусовали. Ну, бывает, не расстраивайтесь.
А это и не статья, а просто специфический туториал.
Я повторяю, что это не тянет на пост (статья, туториал, не важно), т.к. гуглится за 10 секунд.Voronar Автор
03.05.2015 23:02-3Я и не расстраиваюсь.
Нагуглите мне подобный туториал за 10 секунд.
Жду ссылку.
Fesor
04.05.2015 01:57advantcomp.com/blog/ES6Modules — ~15 секунд на поиск и пролистывание.
Voronar Автор
04.05.2015 09:49-5Значит не гуглится за 10 секунд и тем более в нём используют task-manager, а я показываю пример использования CLI. Да и вообще там на буржуйском написано.
whunter
08.05.2015 10:45Использую с SailsJS. А на пост действительно не тянет, скорее введение, до P.S. думал что вот сейчас будет интересно. На 2ality много интересного по ES6 есть, включая Babel. А буржуйский нужно знать разработчику.
isden
02.05.2015 22:07-1> P.S. А какой способ используете Вы?
А мы ставим nodejs версии >= 0.12 и просто используем ES6.Voronar Автор
02.05.2015 22:44-1Это вы наверное про back-end говорите? Я забыл добавить, что имел ввиду front-end.
isden
02.05.2015 22:57А, теперь ясно.
К слову, в браузерах, насколько я вижу, более-менее большая часть фич тоже поддерживается уже.
Louter
03.05.2015 14:10-1Если честно вот такие фразу меня, как разработчика и как юзера жутко раздражает:
Мобильные браузеры (планшеты, коих уже в купе с «глупо»фонами поболее десктопов будет) вообще в рассчёт не берёте?)isden
03.05.2015 14:20А что не так с мобильными браузерами (я немного не в теме разработки под мобильные браузеры)?
В андроиде есть chrome/FF, которые вроде бы обновляются регулярно, а в iOS есть еще Сафари.
rodweb
03.05.2015 15:23Множество людей сидит на устаревших версиях ОС, для которых новые версии браузеров просто не выходят.
k12th
02.05.2015 23:06+2В nodejs версии 0.12 ES6 поддерживается на 23%. Тогда как babel дает аж 76.
isden
02.05.2015 23:11Ну я в курсе, но фичи, которые мне нужны, вполне уже есть. И остальное будет достаточно скоро.
isden
02.05.2015 23:15-1Стойте, а вы уверены, что та табличка не устарела? Там пишут, что nodejs не поддерживает, например, генераторы.
dannyzubarev
02.05.2015 23:40Генераторы спрятаны под флагом --harmony. В свою очередь, io.js (https://iojs.org/) поддерживает их нативно.
isden
02.05.2015 23:44+1Краем уха читал про io.js, но не вглядывался особо. Вы им пользуетесь? Как оно?
dannyzubarev
02.05.2015 23:56+2Если честно, сразу перешел на него из-за как раз ES6 «из коробки». Темп развития и вклад сообщества колоссальные, что не может не радовать. Некоторые считают, что так не должно быть, если это используется в enterprise, но тут мнения очень сильно расходятся.
Хорошим аргументом в пользу io.js для меня было решение команды node-webkit перейти на io.js.
Лично мне нынче по душе io.js. Все проекты в данный момент работают на версиях >=1.7.0.
Попробуйте, ES6 очень сильно ускоряет и упрощает разработку. :)
Сейчас, кстати, активно идет обсуждение обратного объединения Node.js и io.js, но с учетом нынешней политики разработки последнего, дабы изменить принцип разработки и релизов Node.js. Подробнее можете почитать здесь – github.com/jasnell/dev-policy/blob/master/convergence.mdisden
02.05.2015 23:59> Попробуйте, ES6 очень сильно ускоряет и упрощает разработку. :)
Это я уже заметил :)
Спасибо, попробую io.js как чуть времени свободного будет.Voronar Автор
03.05.2015 00:25-3to dannyzubarev: Я не использовал node-webkit и поэтому вопрос: зачем оно надо, если есть CEF?
isden
03.05.2015 00:27+1Что есть CEF? Гугление дает странные результаты, вроде «Child Evangelism Fellowship».
Voronar Автор
03.05.2015 00:51-2isden
03.05.2015 00:54Я сходу не уловил, какое отношение оно имеет к server-side JS?
Voronar Автор
03.05.2015 09:32-3Может я не правильно понимаю, но какое отношение имеет node-webkit к server-side, если это вроде как тулза для десктопных приложений?
isden
03.05.2015 13:40Ну мы же в этой ветке вроде про node/io в контексте server-side говорили?
А так — «NW.js is an app runtime based on Chromium and node.js»
stas404
03.05.2015 03:11+3Webpack.
Простейший пример работы с es6-модулями (экспорт/импорт) под front-end со сборкой на webpack + babel-loader:
github.com/rauschma/webpack-es6-demo
tenbits
03.05.2015 12:05А у нас совсем другой подход. Используются в системе `file accessor middlewares`: У статического сервера (если разрабатывается лишь front-end вэб приложение) или у обычного бэкэнда (разрабатываем на nodejs) есть плагины (или прослойки на чтение файлов). Например все `*.es6` на лету компилируются в ecmascript 5. За файловым расширением может быть зарегистрировано несколько прослоек: трансформировать все `if conditional comments`, a потом трансформировать в ecmascript 5.
Плюсы:
— Трансформации принимаются по шаблону имени файла, например только с расширением `es6`
— Приложение и система сборки не зависит от содержимого самого файла,
— «Совместное существование и легкий переход». Мы просто переименовываем `*.js` в `*.es6` и всё работает как обычно, учитывая что ес6 обратно совместим, но мы можем и переименовать в `*.coffee` и подправить содержимое.
— Система кеширование файлов и file watchers позволяют только один раз трансформировать файл, а при изменение просто файл «перечитать».
— Такой же подход используется одинаково для*.less,*.ymlфайлов — достаточно лишь установить плагин.
Пример `babel` плагина: Loader.Babel
Houston
03.05.2015 13:40+2Зря вы глобально всё ставите. А что, если у вас будет два проекта, один на babel@x.x.x, а другой на babel@y.y.y? Все пакеты необходимо устанавливать локально, в папку проекта, и уже оттуда запускать. Для многих пакетов есть специальные CLI (command line interface) пакеты, которые уже можно ставить глобально, и они будут работать интерфейсом к локально установленным пакетам.
Но ещё лучше использовать NPM scripts, скрипты, описанные в них, ищут исполняемые файлы локально в проекте. И наверняка приятнее написать
чемnpm startwatchify src/main.js -t babelify -o build/main.jsVoronar Автор
03.05.2015 19:42Может быть с NPM scripts и лучше — это уже на усмотрение каждого. Я в статье не об удобствах пишу.
Fesor
03.05.2015 21:23-1я делаю так. Для инкремент билдов просто прогоняю все через babel с транспайлом системы модулей в формат system.js и использую полифил. Для продакшена же я обычно использую es6-module-transpiler с форматтером bundle, что бы не париться со всякими богомерзскими browserify которые там нафиг не сдались. Оно берет все модули, заворачивает все в замыкания и формирует бандл без всяких зависимостей и футпринтов от использования сборщиков аля r.js или browserify. Ну и да, все через gulp.
Но в целом да, все это есть в документации к тому же babel, кроме момента с bundle.serf
03.05.2015 22:15Может быть подробнее опишите?
При таком подхоже есть возможность разбивать на несколько бандлов (или более двух)? То есть собственные модули апликухи в отдельный бандл, языковые ресурсы отдельно, и библиотечные отдельно (с browserify это делается с помощью опции/метода external).
Чем browserify богомерзский кроме небольшого избыточного кода обертки модуля?k12th
04.05.2015 07:14Ну в свете нативных ES6-модулей browserify действительно не так уж хорош.
serf
04.05.2015 08:43Нативные модули это хорошо конечно, но можно ли там реализовать описанную выше схему (деление на бандлы). Предполагаю что такой опции нет из коробки, те все равно нужен будет некий обработчик/препроцессор.
Fesor
04.05.2015 09:25Если честно у меня просто небыло такой необходимости, вечерком посмотрю отпишусь.
xGromMx
Webpack github.com/xgrommx/angular-vk-app/tree/babel