Простой пример использования 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)?