Простой пример использования ES6 уже сегодня

Всех поздравляю с майскими праздниками. Сегодня хочу поделиться опытом использования ECMAScript 6(ES6). Мотивацией для написания статьи было отсутствие полного поэтапного руководства по использованию ES6, а точнее системы модулей с помощью транспилятора Babel. Кому интересно — добро пожаловать!

Существует много примеров использования 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)?
Ads
AdBlock has stolen the banner, but banners are not teeth — they will be back

More

Comments 42

    +6
      –1
      Большая просьба ко всем минусующим: обосновывайте своё решение.
        +3
        Я не минусовал, но написанное не тянет на статью. Есть уже много примеров использования es6 в продакшене. На сайте бейбела есть куча документации, есть в конце концов systemjs, умеющий все это собирать и также с кучей документации. У вас же пост в стиле «ребят смотрите, я в первый раз собрал es6».
          –2
          А это и не статья, а просто специфический туториал, там около заголовка написано. И так как люди добавляют его в избранное, то польза от него есть, а это самое главное.
            0
            Вы предлагаете людям не ставить минус (то есть не считать бесполезным), только исходя из того, что кто-то добавил пост в избранное? Тут нет какой то логики. У любого заминусованного поста есть добавления, и что? Раз те, кто добавили в избранное, не поставили плюс, значит у них для этого нет кармы, то есть их мнение менее ценно, чем мнение тех, кто имеет карму (подразумевается, что он ее заслужил ценным вкладом). В данном случае какие-то опытные люди вас заминусовали. Ну, бывает, не расстраивайтесь.

            А это и не статья, а просто специфический туториал.

            Я повторяю, что это не тянет на пост (статья, туториал, не важно), т.к. гуглится за 10 секунд.
              –3
              Я и не расстраиваюсь.
              Нагуглите мне подобный туториал за 10 секунд.
              Жду ссылку.
                0
                advantcomp.com/blog/ES6Modules — ~15 секунд на поиск и пролистывание.
                  –5
                  Значит не гуглится за 10 секунд и тем более в нём используют task-manager, а я показываю пример использования CLI. Да и вообще там на буржуйском написано.
                    0
                    а я показываю пример использования CLI

                    И зачем? А потом через CLI еще прикручивать sass/less/postcss+autoprefixer. Лучше сразу через таск менеджеры.
                      0
                      В конечном итоге всё зависит от необходимости прикручивания тех или иных присосок.
                  0
                  Использую с SailsJS. А на пост действительно не тянет, скорее введение, до P.S. думал что вот сейчас будет интересно. На 2ality много интересного по ES6 есть, включая Babel. А буржуйский нужно знать разработчику.
          –1
          > P.S. А какой способ используете Вы?

          А мы ставим nodejs версии >= 0.12 и просто используем ES6.
            –1
            Это вы наверное про back-end говорите? Я забыл добавить, что имел ввиду front-end.
              0
              А, теперь ясно.
              К слову, в браузерах, насколько я вижу, более-менее большая часть фич тоже поддерживается уже.
                –1
                Если честно вот такие фразу меня, как разработчика и как юзера жутко раздражает:
                Мобильные браузеры (планшеты, коих уже в купе с «глупо»фонами поболее десктопов будет) вообще в рассчёт не берёте?)
                  0
                  А что не так с мобильными браузерами (я немного не в теме разработки под мобильные браузеры)?
                  В андроиде есть chrome/FF, которые вроде бы обновляются регулярно, а в iOS есть еще Сафари.
                    0
                    Множество людей сидит на устаревших версиях ОС, для которых новые версии браузеров просто не выходят.
              +2
              В nodejs версии 0.12 ES6 поддерживается на 23%. Тогда как babel дает аж 76.
                0
                Ну я в курсе, но фичи, которые мне нужны, вполне уже есть. И остальное будет достаточно скоро.
                  –1
                  Стойте, а вы уверены, что та табличка не устарела? Там пишут, что nodejs не поддерживает, например, генераторы.
                    0
                    Генераторы спрятаны под флагом --harmony. В свою очередь, io.js (https://iojs.org/) поддерживает их нативно.
                      +1
                      Краем уха читал про io.js, но не вглядывался особо. Вы им пользуетесь? Как оно?
                        +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.md
                          0
                          > Попробуйте, ES6 очень сильно ускоряет и упрощает разработку. :)

                          Это я уже заметил :)
                          Спасибо, попробую io.js как чуть времени свободного будет.
                            –3
                            to dannyzubarev: Я не использовал node-webkit и поэтому вопрос: зачем оно надо, если есть CEF?
                              +1
                              Что есть CEF? Гугление дает странные результаты, вроде «Child Evangelism Fellowship».
                                  0
                                  Я сходу не уловил, какое отношение оно имеет к server-side JS?
                                    –3
                                    Может я не правильно понимаю, но какое отношение имеет node-webkit к server-side, если это вроде как тулза для десктопных приложений?
                                      0
                                      Ну мы же в этой ветке вроде про node/io в контексте server-side говорили?
                                      А так — «NW.js is an app runtime based on Chromium and node.js»
                0
                А мы используем grunt-*. Потому что кроме скриптов надо еще тесты прогонять, jade/stylus компилять…
                  +1
                  А мы gulp.
                    –4
                    Возьмите с полки пирожок.
                  +3
                  Webpack.
                  Простейший пример работы с es6-модулями (экспорт/импорт) под front-end со сборкой на webpack + babel-loader:
                  github.com/rauschma/webpack-es6-demo
                    0
                    А у нас совсем другой подход. Используются в системе `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
                      +2
                      Зря вы глобально всё ставите. А что, если у вас будет два проекта, один на babel@x.x.x, а другой на babel@y.y.y? Все пакеты необходимо устанавливать локально, в папку проекта, и уже оттуда запускать. Для многих пакетов есть специальные CLI (command line interface) пакеты, которые уже можно ставить глобально, и они будут работать интерфейсом к локально установленным пакетам.
                      Но ещё лучше использовать NPM scripts, скрипты, описанные в них, ищут исполняемые файлы локально в проекте. И наверняка приятнее написать
                      npm start
                      чем
                      watchify src/main.js -t babelify -o build/main.js
                        0
                        Может быть с NPM scripts и лучше — это уже на усмотрение каждого. Я в статье не об удобствах пишу.
                        –1
                        я делаю так. Для инкремент билдов просто прогоняю все через babel с транспайлом системы модулей в формат system.js и использую полифил. Для продакшена же я обычно использую es6-module-transpiler с форматтером bundle, что бы не париться со всякими богомерзскими browserify которые там нафиг не сдались. Оно берет все модули, заворачивает все в замыкания и формирует бандл без всяких зависимостей и футпринтов от использования сборщиков аля r.js или browserify. Ну и да, все через gulp.

                        Но в целом да, все это есть в документации к тому же babel, кроме момента с bundle.
                          0
                          Может быть подробнее опишите?

                          При таком подхоже есть возможность разбивать на несколько бандлов (или более двух)? То есть собственные модули апликухи в отдельный бандл, языковые ресурсы отдельно, и библиотечные отдельно (с browserify это делается с помощью опции/метода external).

                          Чем browserify богомерзский кроме небольшого избыточного кода обертки модуля?
                            0
                            Ну в свете нативных ES6-модулей browserify действительно не так уж хорош.
                              0
                              Нативные модули это хорошо конечно, но можно ли там реализовать описанную выше схему (деление на бандлы). Предполагаю что такой опции нет из коробки, те все равно нужен будет некий обработчик/препроцессор.
                                0
                                Если честно у меня просто небыло такой необходимости, вечерком посмотрю отпишусь.

                        Only users with full accounts can post comments. Log in, please.