📚 Компиляция для сред, а не для спецификаций

📑 Содержание

Babel - это компилятор для JavaScript, который позволяет использовать новые языковые функции (например, async или стрелочные функции =>), не дожидаясь поддержки браузера или среды выполнения. Здесь мы обсудим спецификации JS, поддержку спецификаций среды выполнения и то, как настроить Babel для среды выполнения вашего кода.

ECMAScript (ES) Технические характеристики

Организации стандартов ECMA, помимо прочего, определяют спецификацию для JavaScript (ECMAScript или ES). В 2015 году они взяли на себя обязательство выпускать обновления спецификации ES ежегодно, при этом год выпуска указывается в официальном названии (es2015), избегая исходной схемы именования, основанной на выпуске спецификации (es5).

Эти имена могут использоваться как синонимы:

  • es5 - старая конвенция
  • es6 = es2015 (новое соглашение)
  • es7 = es2016 и т. д.

Я предпочитаю es<edition num>, потому что он короткий и вневременной (год неизбежно будет пропущен 😜). Инструменты JS, такие как Babel, правильно используют официальное соглашение об именах, поэтому вы увидите es2015, es2016 и т. Д. Назвать вещи сложно, по-видимому, даже спецификации с четким перечислением. Добро пожаловать в бой.

Как работает Babel

Babel анализирует структуру вашего JS-кода (как абстрактное синтаксическое дерево или AST), чтобы найти определенные конструкции, и применяет преобразование к этим узлам дерева, в результате чего синтаксис исполняется более старыми средами выполнения JS.

Плагины и пресеты Babel

В Babel каждое преобразование AST упаковано как плагин Babel для простого обмена и компоновки. Пресеты Babel - это комбинации плагинов для поддержки определенных сред. Первоначально рекомендуемые пресеты были комбинациями плагинов, чтобы обеспечить совместимость с версиями спецификации ES. Важно отметить, что спецификация в названии предустановки - это не целевая версия, а исходная версия. Например, babel-preset-es2015 скомпилирует ES6 (es2015) в ES5, а babel-preset-es2016 скомпилирует ES7 (es2016) в ES6 (es2015). Вскоре была представлена ​​предустановка, охватывающая все предустановки спецификаций, preset-latest, упрощающая конфигурацию Babel.

Браузеры, среда выполнения и спецификации ES

К сожалению, время выполнения браузера и сервера не согласуется с их поддержкой функций ES. Например (с использованием данных из compat-table):

NodeJS v6.11.1 поддерживает:

  • 97% списка функций спецификации ES6
  • 29% списка функций спецификации ES7 и т. Д.

IE11 поддерживает:

  • 99% списка функций спецификации ES5
  • 11% списка функций спецификации ES6
  • 3% от списка функций спецификации ES7

Это означает, что некоторые новые языковые функции могут не быть скомпилированы для вашей среды, если используется неправильная цель спецификации. Компиляция для самой низкой версии спецификации (ES5) - это вариант, но в идеале вы должны компилировать только то, что необходимо, и поставлять как можно больше нативного кода.

Таким образом, вы не должны полагаться на версию спецификации для определения вывода компиляции.

К счастью, Babel devs создали инструмент, способный справиться с тяжелой работой.

Введите preset-env

Babel preset-env - это предустановка, которая компилируется как минимум до ES5 (preset-es2015), но также может принимать версию браузера или времени выполнения и определять, какие плагины необходимы для этой конкретной среды!

Это позволяет избежать проблемы нацеливания на спецификацию! Это также позволяет избежать ненужной компиляции кода, в котором нет необходимости. В конечном итоге Babel делает меньше, и вы можете отправить свой собственный код своим пользователям, где это возможно! Это также заменяет preset-latest как рекомендуемый пресет разработчиками Babel.

Как работает preset-env ?!

preset-env использует данные из compat-table (таблица совместимости среды выполнения / ECMAScript), чтобы определить, какие функции необходимо преобразовать для работы в конкретном браузере или версиях среды выполнения.

Спасибо создателям, сопровождающим и участникам Babel, preset-env и compat-table, ваша работа очень ценится!

Использование preset-env

Babel’s v7 Beta близка к выпуску и объединяет preset-env и CLI в монорепозиторий. Чтобы добавить эти пакеты в свой проект, выполните:

yarn add @babel/preset-env @babel/cli -D

Скомпилировать для всего (с поддержкой ES5)!

{
  "presets": ["@babel/preset-env"]
}

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

Скомпилировать для браузера

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      }
    }]
  ]
}

Список браузеров - это библиотека, которую использует Babel, позволяя вам указать версии браузера, на которые вы хотите настроить таргетинг, например "last 2 versions" и т. Д. Документы объясняют все параметры. Также есть хороший сайт, чтобы узнать, какие браузеры и версии нацелены на ваше определение:



browserl.ist: Страница для отображения совместимых браузеров из строки списка браузеров.
Страница для отображения совместимых браузеров из строки списка браузеров.browserl.ist



Некоторые примеры запросов (% глобального покрытия внизу страницы):

Скомпилировать для среды выполнения

Для NodeJS v6.11.1 мы просто помещаем:

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "node": "6.11.1"
      }
    }]
  ]
}

Если вы компилируете Babel с использованием той же версии Node, что и ваша производственная среда, вы можете просто указать использование current версии времени выполнения.

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "node": "current"
      }
    }]
  ]
}

Полифиллы

Чтобы применить полифиллы с помощью preset-env, вы можете переключить флаг useBuiltIns следующим образом:

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "node": "current"
      },
      "useBuiltIns": true,
    }]
  ]
}

При этом будут применяться неэкспериментальные / stage-x полифиллы по мере необходимости. Вам нужно добавить yarn add @babel/polyfill и добавить import "@babel/polyfill" один раз в свой проект.

Для получения дополнительных сведений обратитесь к разделу Параметры документации.

Заключение

Компилируйте в соответствии с пользовательскими средами, а не спецификациями. Используйте Babel preset-env со списком браузеров и compat-table, чтобы определить целевую среду (со спецификацией ES5, как наихудший вариант). Используйте все возможности языка сегодня и ... Прибыль ?! 😄

Для более глубокого погружения в скомпилированные выходные данные Babel см. Мой следующий пост:

ES6 + в облачных функциях для Firebase # 2
Babel Boogaloo!

Хотите еще что-нибудь почитать?

Подробнее о Вавилоне:

Еще я:

📑 Содержание
Индекс для моей серии Medium



jthegedus / firebase-gcp-examples
🔥 Примеры Firebase и GCP, исследующие бессерверные архитектуры приложений, языки, инструменты и многое другое! … github.com



Если вы нашли это полезным, поделитесь с друзьями и коллегами.