BabelJS — Обзор

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

Почему BabelJS?

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

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

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

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

В следующей таблице перечислены функции, доступные в ES6, ES7 и ES8.

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

• transpiling
• polyfilling

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

Babel-транспортер преобразует синтаксис современного JavaScript в форму, которая может быть легко понята старыми браузерами. Например, функции arrow, const, let классов будут преобразованы в function, var и т. Д. Здесь синтаксис, т. Е. Функция arrow, преобразуется в обычную функцию, сохраняя функциональность в обоих случаях.

Что такое Вавилон-Полифилл?

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

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

• Классы
• Декораторы
• Const
• Модули
• подрывающий
• Параметры по умолчанию
• Вычисляемые имена свойств
• Объект отдых / распространение
• Асинхронные функции
• Функции стрелок
• Параметры отдыха
• распространение
• Шаблонные литералы

Возможности скрипта ECMA, которые можно заполнить —

• обещания
• карта
• Задавать
• Условное обозначение
• 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 выполнять перенос в определенном режиме. Нам нужно использовать предустановки, в которых есть среда, в которую мы хотим преобразовать код. Например, пресет es2015 преобразует код в es5 .

Babel-Polyfills

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

Babel-Polyfills

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

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

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

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

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

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

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

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

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

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

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

BabelJS также работает с реагирующим синтаксисом JSX и может быть скомпилирован в форме JSX.

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

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

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

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

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

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

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

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

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

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