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/.