Как использовать ES6 для
универсальных приложений JavaScript

Теперь, когда пыль немного улеглась, я, наконец, начинаю использовать ES6 для производственных приложений - и поскольку я пишу универсальный JavaScript, он должен работать как для Node.js, так и для браузеров.

Это не будет подробное руководство о функциях ES6 или универсальном JavaScript (также известном как изоморфный JavaScript). Мы просто рассмотрим основы, чтобы вы начали работать.

Используйте Babel

Babel.js - отличный инструмент, который позволяет вам преобразовать ваш код ES6 в код ES5, который работает в современных средах JavaScript, включая Node.js и браузеры, но не совсем понятно, как его настроить.

Установить Babel

Практически в каждом руководстве, которое вы найдете, будет указано, что необходимо установить Babel по всему миру. Это нормально, если никто не должен делиться вашим кодом, но если вы работаете в команде или создаете библиотеки с открытым исходным кодом, также установите его локально для каждого пакета:

$ npm install -g babel-cli
$ npm install --save-dev babel-cli babel-preset-es2015 babel-preset-stage-0

Теперь вы можете запустить `babel-node` CLI / REPL:

$ babel-node
> Object.assign({}, {msg: 'wow!'}); // => { msg: 'wow!' }

Для рабочих процессов Browserify вам также могут понадобиться:

$ npm install --save-dev babelify browserify

Это позволит вам использовать весь новый крутой синтаксис ES6, например функции стрелок:

(x) => x + 1;

Но это не позволит вам использовать новые встроенные методы, такие как `Object.assign ()`, `Object.is ()` и т. Д.

Это не сразу очевидно, потому что эти функции отлично работают с `babel-node` REPL:

Object.is(NaN, NaN); // => true

К счастью для нас, это легко решается с помощью полифилла:

$ npm install --save core-js

Затем в верхней части вашего входного файла:

import 'core-js';

Линтинг

Обеспокоены тем, что вам придется отказаться от линкования кода? Не стоит беспокоиться. ESLint поможет вам!

$ npm install --save-dev eslint babel-eslint

Вот ` .eslintrc`, с которым я экспериментирую.

Любовь ES6 заключается в ключах `env` и ` ecmaFeatures`. Они понадобятся вам для предотвращения ошибок, когда ESLint обнаруживает ваш код, специфичный для ES6.

Если вам также нужен отдых и распространение объекта (предложение ES7, обычно используемое в коде React), вам также понадобится babel-eslint`.

Компиляция

В большинстве случаев вы можете просто заменить вызовы `node` на вызовы ` babel-node`. `babel-node` кэширует модули в памяти, поэтому возникает значительная задержка при запуске и потенциально большое использование памяти. Рассмотрите возможность компиляции в ES5 для производства. Читать дальше.

Документы Babel упрощают процесс компиляции:

$ babel script.js --out-file script-compiled.js

Что может быть проще, правда? Что ж, если вы не будете пытаться импортировать какие-либо модули, конечно, это сработает. Но если вы сделаете что-нибудь нетривиальное, вам нужно будет скомпилировать всю базу кода, а не только один файл. Для этого вы хотите использовать параметр `-d`.

$ babel -d build-dir source-dir

Обратите внимание, что выходной каталог идет первым.

Если вы хотите, чтобы отладчик работал правильно, вам нужно добавить исходные карты с параметром `-s`:

$ babel -d build-dir source-dir -s

Это сообщит Babel, что для каждого компилируемого файла он также должен создать файл исходной карты, который сообщит отладчикам, где найти исходный исходный код, пока вы выполняете текущий код в движке. Другими словами, вы увидите написанный вами код вместо скомпилированного вывода, который сгенерировал Babel. Обычно это то, что вы хотите.

Для компиляции для браузера вы хотите использовать Webpack или преобразование Babelify Browserify. Обычно я использую babelify для быстрой компиляции в терминале. Например, чтобы запустить несколько модульных тестов:

npm install -g browserify browser-run
browserify -t babelify script.js | browser-run -p 2222
  1. Установите `browserify` и ` browser-run`, чтобы вы могли использовать их в любом месте вашего терминала.
  2. Создайте пакет из `script.js` и запустите сценарий в Chrome. Нажмите http: // localhost: 2222 в своем любимом браузере, и скрипт запустится в браузере. Вывод журнала консоли будет возвращен на консоль.

Скомпилируйте бандл:

$ browserify script.js -t babelify --outfile bundle.js

Настройка Webpack - это слишком много для этого краткого руководства, но если вы хотите пропустить всю рутинную работу, вы можете использовать этот шаблон для производственных модулей.

Использование существующих модулей

Используя вышеупомянутые инструменты, вы можете импортировать как модули ES6, так и модули в стиле Node, используя синтаксис ES6:

import 'core-js'; // Node module
import harness from './harness'; // ES6 module

Таким образом, вы можете продолжать использовать все стандартные модули, которые вы найдете в массивной экосистеме npm в вашей современной кодовой базе ES6, но, поскольку так много людей все еще используют ES5, я рекомендую вам публиковать скомпилированные версии ваших модулей в npm.

Для публичных библиотек я помещаю исходный код в каталог `source` и скомпилировал ES5 в ` dist` или `lib`. На данный момент вероятно, неплохо указать на скомпилированную версию ES5 с помощью ключа ` main` в `package.json`.

Автоматизация

Мне нравится помещать эти команды в свои сценарии npm:

Реагировать

Бонус для пользователей React: вы тоже защищены. И Babel, и ESLint поддерживают JSX. Отлично!

РЕДАКТИРОВАТЬ: По состоянию на 8 ноября 2015 г. изменения в API Babel 6 нарушили преобразование babel-react-transform. При необходимости вы можете установить последнюю совместимую версию Babel:

npm install --save-dev [email protected]

Время веселиться

Поздравляю! Вы готовы начать использовать ES6 для своих универсальных приложений. Если вам интересно, вот несколько моих любимых вещей о ES6, которые вам стоит изучить:

  • Компактные объектные литералы
  • Деструктуризация
  • Стрелочные функции (отлично подходят для однострочных лямбд)
  • Параметры по умолчанию
  • Параметры отдыха
  • Генераторы

Вам следует запомнить новый шаблон настроек по умолчанию / переопределений прямо сейчас:

Наслаждаться!

Изучите ES6 с Эриком Эллиоттом

Эрик Эллиотт - автор книги Программирование приложений JavaScript (О'Рейли), ведущий производственного документального фильма Программирование грамотности . Он участвовал в разработке программного обеспечения для Adobe Systems, Zumba Fitness, The Wall Street Journal, ESPN, BBC и ведущие музыканты, включая Usher, Frank Ocean, Metallica и многие другие.

Он проводит большую часть времени в районе залива Сан-Франциско с самой красивой женщиной в мире.