BabelJS - Обзор

BabelJSэто транспилятор JavaScript, который переносит новые функции в старый стандарт. Благодаря этому функции могут без проблем работать как в старых, так и в новых браузерах. Австралийский разработчик Себастьян Маккензи создал BabelJS.

Почему именно BabelJS?

JavaScript - это язык, который понимает браузер. Мы используем разные браузеры для запуска наших приложений - Chrome, Firefox, Internet Explorer, Microsoft Edge, Opera, браузер UC и т. Д. ECMA Script - это спецификация языка JavaScript; ECMA Script 2015 ES6 - это стабильная версия, которая отлично работает во всех новых и старых браузерах.

После ES5 у нас были ES6, ES7 и ES8. ES6 выпущен с множеством новых функций, которые не полностью поддерживаются всеми браузерами. То же самое относится к ES7, ES8 и ESNext (следующая версия сценария ECMA). Сейчас неясно, когда все браузеры будут совместимы со всеми выпущенными версиями ES.

Если мы планируем использовать функции ES6, ES7 или ES8 для написания нашего кода, он будет иметь тенденцию ломаться в некоторых старых браузерах из-за отсутствия поддержки новых изменений. Поэтому, если мы хотим использовать новые функции сценария ECMA в нашем коде и хотим запускать его во всех возможных доступных браузерах, нам нужен инструмент, который скомпилирует наш окончательный код в ES5.

Babelделает то же самое, и это называется транспилятором, который транслирует код в нужную нам версию сценария ECMA. Он имеет такие функции, как пресеты и плагины, которые настраивают версию ECMA, которая нам нужна для транспиляции нашего кода. С помощью Babel разработчики могут писать свой код, используя новые функции JavaScript. Пользователи могут передавать коды с помощью Babel; впоследствии коды можно без проблем использовать в любых браузерах.

The following table lists down the features available in ES6, ES7 and ES8 −

Особенности Версия скрипта ECMA
Пусть + Const ES6
Стрелочные функции ES6
Классы ES6
Обещания ES6
Генераторы ES6
Итераторы ES6
Модули ES6
Разрушение ES6
Шаблонные литералы ES6
Улучшенный объект ES6
Свойства по умолчанию, отдыха и спреда ES6
Асинхронный - Ожидание ES7
Оператор возведения в степень ES7
Array.prototype.includes () ES7
Заполнение строк ES8

BabelJS управляет следующими двумя частями -

  • transpiling
  • polyfilling

Что такое Babel-Transpiler?

Babel-transpiler преобразует синтаксис современного JavaScript в форму, понятную для старых браузеров. Например, функция стрелки, константа, классы let будут преобразованы в функцию, переменную и т. Д. Здесь синтаксис, т.е. стрелочная функция, преобразуется в обычную функцию, сохраняя функциональность одинаковой в обоих случаях.

Что такое Babel-polyfill?

В JavaScript добавлены новые функции, такие как обещания, карты и включения. Возможности можно использовать в массиве; то же самое, когда используется и передается с помощью babel, не конвертируется. Если новая функция - это метод или объект, нам нужно использовать Babel-polyfill вместе с транспилированием, чтобы заставить его работать в старых браузерах.

Вот список функций сценария ECMA, доступных в JavaScript, которые можно транспилировать и полифилить:

  • Classes
  • Decorators
  • Const
  • Modules
  • Destructing
  • Параметры по умолчанию
  • Вычисляемые имена свойств
  • Остаток / распространение объекта
  • Асинхронные функции
  • Стрелочные функции
  • Остальные параметры
  • Spread
  • Шаблонные литералы

ECMA Script features that can be polyfilled −

  • Promises
  • Map
  • Set
  • Symbol
  • Weakmap
  • Weakset
  • includess
  • Array.from, Array.of, Array # find, Array.buffer, Array # findIndex
  • Object.assign,Object.entries,Object.values

Особенности BabelJS

В этом разделе мы узнаем о различных функциях BabelJS. Ниже приведены наиболее важные основные функции BabelJS:

Babel-плагины

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

Babel-пресеты

Пресеты Babel - это набор плагинов, то есть детали конфигурации babel-transpiler, которые инструктируют Babel выполнять транспилирование в определенном режиме. Нам нужно использовать предустановки, в которых есть среда, в которой мы хотим преобразовать код. Например, предустановка es2015 преобразует код в es5 .

Babel-Polyfills

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

Babel-Polyfills

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

Преимущества использования BabelJS

В этом разделе мы узнаем о различных преимуществах, связанных с использованием BabelJS -

  • BabelJS обеспечивает обратную совместимость со всеми недавно добавленными функциями JavaScript и может использоваться в любых браузерах.

  • BabelJS имеет возможность транспиляции для использования следующей версии JavaScript - ES6, ES7, ESNext и т. Д.

  • BabelJS можно использовать вместе с gulp, webpack, flow, response, typescript и т. Д., Что делает его очень мощным и может использоваться с большим проектом, облегчая жизнь разработчика.

  • BabelJS также работает вместе с синтаксисом React JSX и может быть скомпилирован в форме JSX.

  • BabelJS поддерживает плагины, полифиллы, babel-cli, что упрощает работу с большими проектами.

Недостатки использования BabelJS

В этом разделе мы узнаем о различных недостатках использования BabelJS -

  • Код BabelJS изменяет синтаксис во время транспиляции, что затрудняет понимание кода при выпуске в производство.

  • Транспортированный код больше по размеру по сравнению с исходным кодом.

  • Не все ES6 / 7/8 или предстоящие новые функции могут быть перенесены, и мы должны использовать polyfill, чтобы он работал в старых браузерах.

Вот официальный сайт babeljs https://babeljs.io/.