Как использовать новые возможности ECMAScript

30.04.2017
Смотрите видео
на Youtube

Для начала стоит сказать, что современные браузеры и так поддерживают большинство новых фич, часто даже до того, как они становятся стандартом. Например, новые методы строк padStart и padEnd войдут в стандарт ECMAScript 2017, а Firefox, Хром, Опера, Сафари и Edge уже их поддерживают. Если вас интересуют только последние версии браузеров — проверяйте поддержку и, если она есть, смело используйте нужные фичи. Поддержку новых фич можно смотреть на странице ECMAScript compatibility table.

Если вам не повезло и нужно поддерживать IE11 или ниже, то здесь существуют два варианта: подключить полифилл или использовать транспайлер. Какой из этих вариантов выбрать зависит от того, какие фичи вам нужны.

Если вам нужны только новые объекты, такие как Map, Set или Promise, или новые методы, например, Object.assign(), то достаточно подключить полифилл, например, es6-shim. Это своего рода библиотека — скрипт, в котором реализованы необходимые объекты и методы. Работать с полифиллом очень просто, достаточно подключить его перед другими скриптами. Но он не поддерживает новые синтаксические конструкции.

Если вы хотите использовать новый синтаксис — вам нужен транспайлер. Это специальный инструмент, который, грубо говоря, «переводит» код с одного языка на другой, а сам перевод называется компиляцией. К транспайлерам относятся Babel, Closure Compiler, Google Traceur и другие. Самым популярным транспайлером является Babel, он является стандартом «де-факто».

Компилировать код можно как «на лету» непосредственно в браузере пользователя, так и заранее на этапе сборки.

Чтобы динамически компилировать код в браузере, достаточно подключить пакет babel-standalone, можно даже с CDN:


<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

И дальше для тех скриптов, которые вы хотите компилировать, нужно использовать атрибут type="text/babel":


<script type="text/babel">
  const x = 'this is compiled with Babel';
</script>

Поскольку в этом случае скрипты компилируются непосредственно в браузере перед выполнением, это влияет на производительность. Лучше подготовить файлы заранее.

Babel можно использовать самостоятельно как утилиту командной строки, можно настроить среду разработки или подключить компиляцию к вашей текущей системе сборки.

Допустим, мы хотим компилировать файлы вручную в командной строке. Для этого устанавливаем babel-cli:


npm install --save-dev babel-cli

И можем запустить компиляцию файла:


./node_modules/.bin/babel script.js -o script-compiled.js

Можно скомпилировать все файлы в директории:


./node_modules/.bin/babel src -d lib

Удобно добавить команду в package.json в раздел scripts. Тогда запускать babel можно с помощью команды npm run babel:


{
    "name": "my-project",
    "version": "1.0.0",
    "scripts": {
      "build": "babel src -d lib"
    },
    "devDependencies": {
      "babel-cli": "^6.0.0"
    }
}

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

Чтобы подключить плагины, нужно создать в проекте файл настроек .babelrc и добавить в него параметр plugins.


{
  "plugins": ["transform-es2015-template-literals"]
}

Чтобы не заморачиваться с набором плагинов, существуют готовые пресеты: es2015, es2016 и другие.

Чтобы подключить пресеты, нужно добавить настройку presets в .babelrc:


{
  "presets": ["env"]
}

Есть и универсальный пресет babel-preset-env. По умолчанию, он производит все трансформации, но для него можно настроить, какие именно браузеры или какую версию node.js мы хотим поддерживать. Причем настройка эта очень удобная, можно явно указать версии браузеров, а можно задать в виде строки, например, «last 2 versions» или «> 1%».

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

Можно также встроить Babel в ваш текущий процесс сборки, есть плагины для Gulp, Webpack, Browserify и других инструментов.

Стоит сказать, что Babel только транслирует синтаксис, но никак не проверяет, поддерживает ли браузер фичу нативно или нет. Что это значит? Если вы скомпилировали файл, скажем, со стрелочными функциями, то скомпилированный код будет выполняться, даже когда браузер нативно поддерживает стрелочные функции.

Таким образом, если вы хотите использовать новую возможность ECMAScript:

  1. Для начала проверьте, какие браузеры ее поддерживают. Если она поддерживается во всех интересующих вас браузерах, то вы можете смело ее использовать.
  2. Если в каком-то браузере поддержки нет, то нужно проверить, можно ли обойтись полифиллом или нужно компилировать код.
    • Если это новый метод или объект — подключаем полифилл.
    • Если синтаксическая конструкция — используем компиляцию.