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 Script). Сейчас неясно, когда все браузеры смогут быть совместимы со всеми выпущенными версиями ES.

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

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

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

  • транспиляция
  • полифиллинг

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

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

Что такое Babel-полифилл?

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

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

  • Классы
  • Декораторы
  • Постоянная
  • Модули
  • Разрушение
  • Параметры по умолчанию
  • Имена вычисляемых свойств
  • Остальное/распространение объекта
  • Асинхронные функции
  • Стрелочные функции
  • Параметры покоя
  • Распространение
  • Литералы шаблонов

Функции скрипта ECMA, которые можно заполнить полифиллом —

  • Обещания
  • карта
  • Набор
  • Символ
  • Слабая карта
  • Слабый набор
  • включает
  • Array.from, Array.of, Array#find, Array.buffer, Array#findIndex
  • Объект.назначить,Объект.записи,Объект.значения

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

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

  • BabelJS обеспечивает обратную совместимость со всеми недавно добавленными функциями JavaScript и может использоваться в любых браузерах.
  • У BabelJS есть возможность транспилировать следующую версию JavaScript — ES6, ES7, ESNext и т. д.
  • BabelJS можно использовать вместе с gulp, webpack, flow, react, typescript и т. д., что делает его очень мощным и может использоваться в больших проектах, облегчая жизнь разработчика.
  • BabelJS также работает вместе с реактивным синтаксисом JSX и может быть скомпилирован в форме JSX.
  • В BabelJS есть поддержка плагинов, полифилов, babel-cli, что упрощает работу с большими проектами.

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

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

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

Чтобы настроить среду для BabelJS:

Для работы с BabelJS нам нужна следующая настройка —

  • NodeJS
  • Npm
  • Babel-CLI
  • Вавилонская предустановка
  • IDE для написания кода

Обещания

Обещания JavaScript используются для управления асинхронными запросами в вашем коде.

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

Обещания бывают трех состояний —

  • в ожидании (начальное состояние)
  • решено (успешно завершено)
  • отклонено (не удалось)

new Promise() используется для создания обещания. Конструктор промисов имеет один аргумент, который является функцией обратного вызова. Функция обратного вызова имеет два аргумента — разрешить и отклонить;

обе эти функции являются внутренними. Асинхронный код, который вы пишете, т. Е. Ajax-вызов, загрузка изображения, функции синхронизации, перейдет в функцию обратного вызова.

Если задача, выполненная в функции обратного вызова, выполнена успешно, вызывается функция разрешения; в противном случае вызывается функция отклонения с подробной информацией об ошибке.

Следующая строка кода показывает вызов структуры обещания —

var _promise = new Promise (function(resolve, reject) {
   var success = true;
   if (success) {
      resolve("success");
   } else {
      reject("failure");
   }
});
_promise.then(function(value) {
   //once function resolve gets called it comes over here with the value passed in resolve
   console.log(value); //success
}).catch(function(value) {
   //once function reject gets called it comes over here with the value passed in reject
   console.log(value); // failure.
});

Пример обещания ES6

let timepromise = new Promise((разрешить, отклонить) =› {
setTimeout(function() {
разрешить(Promise разрешено!);
}, 1000);
} );

timepromise.then((msg) =› {
console.log(msg);
});

Вывод

Обещание выполнено!