В моем предыдущем обзоре gulp основное внимание уделялось настройке системы быстрой сборки с некоторыми полезными gulp-плагинами. Несмотря на то, что это было довольно просто, я думаю, что это было бы чрезвычайно полезно для тех, кто только начинает работать с gulp. В этом посте я настрою такую же систему сборки с синтаксисом ES2015/ES6. Если вы не знаете, что означает ES2015/ES6, это последняя версия ECMAscript, которая является спецификацией для языков сценариев. что также означает, что это последняя версия JavaScript.
В ES2015 было введено много новых изменений синтаксиса, таких как функции стрелок, строки шаблонов, встроенная поддержка модулей (с ключевыми словами импорта и экспорта), функциональные возможности области действия с новыми ключевыми словами, такими как const, let. Если вы хотите узнать больше о ES2015, вот несколько полезных ресурсов.
- Репозиторий es6features — https://github.com/lukehoban/es6features
- Инструменты es6 — https://github.com/addyosmani/es6-tools
- обучение 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)