3-es6-babel-gulp

3 - Настройка ES6 с Babel и Gulp

Мы начинаем использовать синтаксис ES6, значительно более продвинутый относительно "старого" ES5. Все браузеры и JS окружения хорошо понимают ES5, но не ES6. Поэтому мы будем использовать инструмент, называемый Babel, чтобы преобразовать файлы ES6 в ES5 формат. Чтобы запустить Babel, мы будем использовать Gulp - менеджер задач. Это похоже на создание задач, расположенных в scripts файла package.json, но написание задач в JS файле проще и понятнее чем в JSON, поэтому установим Gulp и плагин Babel для него.

• Запустите yarn add --dev gulp
• Запустите yarn add --dev gulp-babel
• Запустите yarn add --dev babel-preset-latest
• Запустите yarn add --dev del (для задачи clean - очистки, как вы увидете ниже)
• В package.json добавьте поле babel для конфигурации Babel. Укажем, что хотим использовать новейшую конфигурацию Babel, следующим образом:

"babel": {
  "presets": [
    "latest"
  ]
},

Примечание: Файл .babelrc в корне проекта так же может быть использован вместо свойства babel в package.json. Но поскольку корневая директория вашего проекта, с течением времени, будет все больше и больше раздуваться, лучше храните конфигурацию Babel в package.json, до тех пор, пока она не станет слишком большой.

• Переместите файл index.js в директорию src. Там вы будете писать ES6 код. А папка lib будет местом, куда ваш код будет компилироваться в ES5. Gulp и Babel позаботятся о ее создании. Уберите предыдущий, относящийся к color, код из index.js, и замените его на нечто простое, например:

const str = 'ES6';
console.log(`Hello ${str}`);

Здесь мы использовали шаблонную строку - возможость ES6 внедрять с помощью ${} переменные прямо в строки, без использования конкантенации. Обратите внимание, что шаблонные строки пишутся в `обратных кавычках`

• Создайте gulpfile.js, содержащий:

const gulp = require('gulp');
const babel = require('gulp-babel');
const del = require('del');
const exec = require('child_process').exec;

const paths = {
  allSrcJs: 'src/**/*.js',
  libDir: 'lib',
};

gulp.task('clean', () => {
  return del(paths.libDir);
});

gulp.task('build', ['clean'], () => {
  return gulp.src(paths.allSrcJs)
    .pipe(babel())
    .pipe(gulp.dest(paths.libDir));
});

gulp.task('main', ['build'], (callback) => {
  exec(`node ${paths.libDir}`, (error, stdout) => {
    console.log(stdout);
    return callback(error);
  });
});

gulp.task('watch', () => {
  gulp.watch(paths.allSrcJs, ['main']);
});

gulp.task('default', ['watch', 'main']);

Давайте приостановимся и разберемся.

Gulp, сам по себе, имеет довольно понятный API. Он определяет задачи gulp.task, которые могут брать файы из gulp.src, применять к ним цепочки обработчиков - .pipe() (как babel() в нашем случае), и сохранять новые файлы в gulp.dest. Так же он может отслеживать (gulp.watch) изменения в файловой системе. Одни задачи Gulp могут предварять запуск других, если указать их в массиве (как ['build']) в качестве второго аргумента в gulp.task. В документации все изложено более основательно.

Сначала мы определили объект paths, что бы хранить в одном месте все нужные пути и использовать принцип "не повторяйся" (DRY).

Затем мы определили пять задач: build (создать), clean (очистить), main (основная), watch (наблюдать), and default (по умолчанию).

• build вызывает Babel, чтобы преобразовать все исходные файлы из src, и записывает результат в lib.
• clean - задача, которая просто удаляет всю нашу автоматически сгенерированную директорию lib перед каждым build. Как правило, полезно избавляться от старых скомпилированых файлов (которые могут остаться после переименования или удаления чего-то в src) для того, чтобы быть уверенным, что директория lib всегда синхронна с src, даже если build не завершился успешно, а вы этого не заметили. Мы используем пакет del, чтобы удалять файлы путем, наиболее подходящим для задач Gulp (это рекомендованый для Gulp способ)
• main - аналогично запуску node . из предыдущией части, за исключением того, что теперь мы используем lib/index.js. Мы можем просто писать node lib, потому что по умолчанию Node найдет и запустит index.js из указанной папки (мы используем переменную libDir, чтобы соответствовать принципу DRY). require('child_process').exec и exec - это функции самого Node, вызывающие консольные команды. Мы перенаправим stdout в console.log() и возвратим возможную ошибку через функцию обратного вызова (callback), которая передается в gulp.task в качестве аргумента. Не переживайте, если эта команда не совсем ясна для вас, помните, что эта задача просто запускает node lib.
• watch запускает задчу main, когда происходят изменения файловой системы для указанных файлов.
• default - это специальная задача, которая запускается, если вы просто вызываете gulp из CLI (коммандной строки). В нашем случае, мы хотим сначала запустить main (один раз), а затем watch.

Примечание: Возможно вы удивились тому, что мы используем синтаксис ES6 в этом Gulp файле, хотя он не транспилируется в ES5 со помощью Babel. Это потому, что мы используем версию Node, которая поддерживает возможности ES6 из коробки (убедитесь, что вы используете версию Node > 6.5.0, запустив node -v).

Отлично! Посмотрим как это работает.

• В package.json, замените скрипт start на: "start": "gulp".

• Запустите yarn start. Должно выйти "Hello ES6" и запуститься автоматическое отслеживание изменений. Попробуйте ввести неверный код в src/index.js и увидите после сохранения, как Gulp автоматически указывает на ошибку.

• Добавьте /lib/ в .gitignore

Следующий раздел: 4 - Использование ES6 классов

Назад в предыдущий разделили Содержание.