В моем предыдущем обзоре gulp основное внимание уделялось настройке системы быстрой сборки с некоторыми полезными gulp-плагинами. Несмотря на то, что это было довольно просто, я думаю, что это было бы чрезвычайно полезно для тех, кто только начинает работать с gulp. В этом посте я настрою такую ​​же систему сборки с синтаксисом ES2015/ES6. Если вы не знаете, что означает ES2015/ES6, это последняя версия ECMAscript, которая является спецификацией для языков сценариев. что также означает, что это последняя версия JavaScript.

В ES2015 было введено много новых изменений синтаксиса, таких как функции стрелок, строки шаблонов, встроенная поддержка модулей (с ключевыми словами импорта и экспорта), функциональные возможности области действия с новыми ключевыми словами, такими как const, let. Если вы хотите узнать больше о ES2015, вот несколько полезных ресурсов.

  1. Репозиторий es6features — https://github.com/lukehoban/es6features
  2. Инструменты es6 — https://github.com/addyosmani/es6-tools
  3. обучение es6 — https://github.com/ericdouglas/ES6-Learning

Для настройки системы сборки я буду использовать Стрелочные функции и модульный функционал. Стрелочная функция — это более короткий синтаксис для объявления функций. Использование функций со стрелками,

Использование ключевого слова import,

Для начала пройдем процесс настройки. Мы собираемся использовать Babel в качестве нашего транспилятора для компиляции кода es6 в es5. Нам нужен npm (менеджер пакетов узлов), чтобы установить babel в качестве зависимости для нашего проекта. Давайте сначала установим пакет babel es2015 через командную строку/терминал,

$ npm install babel-preset-es2015

Если вы используете Ubuntu, вам нужно будет использовать

$ sudo npm install babel-preset-es2015

Затем нам нужно настроить babel, используя файл с именем .babelrc. Создайте этот файл в корне проекта и добавьте следующую конфигурацию, которая представляет собой простой объект JavaScript:

{
  "presets": ["es2015"]
}

Это все, что вам нужно для компиляции es6 в es5. Теперь давайте создадим gulpfile для настройки gulp. Ранее файл gulp назывался gulpfile.js, но с Babel это должен быть gulpfile.babel.js.

Здесь я использовал ключевые слова импорта и функции стрелок в качестве нового синтаксиса.

Выводы

JavaScript как язык значительно повзрослел благодаря новым функциям ES6.
Новые функции синтаксиса дают нам отличные способы писать код быстрее с меньшим количеством кода.
Если вам нравится ES6, ознакомьтесь с некоторыми интересными функциями ES7 ( следующая версия JavScript)