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.
Характеристики | Версия скрипта ECMA |
---|---|
Let + Const | ES6 |
Функции стрелок | ES6 |
Классы | ES6 |
обещания | ES6 |
Генераторы | ES6 |
итераторы | ES6 |
Модули | ES6 |
деструктурирующие | ES6 |
Шаблонные литералы | ES6 |
Улучшенный объект | ES6 |
Свойства по умолчанию, Rest & Spread | ES6 |
Async — Await | ES7 |
Оператор возведения в степень | ES7 |
Array.prototype.includes () | ES7 |
String Padding | 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/ .