BabelJS - преобразование функций ES7 в ES5

В этой главе мы узнаем, как перенести функции ES7 в ES5.

В ECMA Script 7 добавлены следующие новые функции:

Async-Await
Оператор возведения в степень
Array.prototype.includes()

Мы скомпилируем их в ES5 с помощью babeljs. В зависимости от требований вашего проекта, также можно скомпилировать код в любой версии ecma, например, от ES7 до ES6 или от ES7 до ES5. Поскольку версия ES5 является наиболее стабильной и отлично работает во всех современных и старых браузерах, мы скомпилируем код в ES5.

Асинхронное ожидание

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

Вот рабочий пример async и await.

пример

let timer = () => {
   return new Promise(resolve => {
      setTimeout(() => {
         resolve("Promise resolved after 5 seconds");
      }, 5000);
   });
};
let out = async () => {
   let msg = await timer();
   console.log(msg);
   console.log("hello after await");
};
out();

Выход

Promise resolved after 5 seconds
hello after await

Выражение ожидания добавляется перед вызовом функции таймера. Функция таймера вернет обещание через 5 секунд. Таким образом, await остановит выполнение до тех пор, пока обещание функции таймера не будет разрешено или отклонено, а затем продолжится.

Давайте теперь перенесем приведенный выше код в ES5 с помощью babel.

ES7 - Асинхронное ожидание

let timer = () => {
   return new Promise(resolve => {
      setTimeout(() => {
         resolve("Promise resolved after 5 seconds");
      }, 5000);
   });
};
let out = async () => {
   let msg = await timer();
   console.log(msg);
   console.log("hello after await");
};
out();

команда

npx babel asyncawait.js --out-file asyncawait_es5.js

BabelJS - ES5

"use strict";

var timer = function timer() {
   return new Promise(function (resolve) {
      setTimeout(function () {
         resolve("Promise resolved after 5 seconds");
      }, 5000);
   });
};
var out = async function out() {
   var msg = await timer();
   console.log(msg);
   console.log("hello after await");
};

out();

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

npm install --save babel-polyfill

Его следует сохранить как зависимость, а не как зависимость от разработчика.

Чтобы запустить код в браузере, мы будем использовать файл polyfill из node_modules \ babel-polyfill \ dist \ polyfill.min.js и вызывать его с помощью тега script, как показано ниже -

<!DOCTYPE html>
<html>
   <head>
      <title>BabelJs Testing</title>
   </head>
   <body>
      <script src="node_modules\babel-polyfill\dist\polyfill.min.js" type="text/javascript"></script>
      <script type="text/javascript" src="aynscawait_es5.js"></script>
   </body>
</html>

Когда вы запустите вышеуказанную тестовую страницу, вы увидите вывод в консоли, как показано ниже.

Оператор возведения в степень

** - это оператор, используемый для возведения в степень в ES7. В следующем примере показано, как работает то же самое в ES7, и код передается с использованием babeljs.

пример

let sqr = 9 ** 2;
console.log(sqr);

Выход

ES6 - Возведение в степень

let sqr = 9 ** 2;
console.log(sqr);

Чтобы перенести оператор возведения в степень, нам нужно установить плагин, который будет установлен следующим образом:

команда

npm install --save-dev babel-plugin-transform-exponentiation-operator

Добавьте информацию о плагине в .babelrc файл следующим образом -

{
   "presets":[
      "es2015"
   ],
   "plugins": ["transform-exponentiation-operator"]
}

команда

npx babel exponeniation.js --out-file exponeniation_es5.js

BabelJS - ES5

"use strict";

var sqr = Math.pow(9, 2);
console.log(sqr);

Array.prototype.includes ()

Эта функция дает истину, если переданный ей элемент присутствует в массиве, и ложь, если в противном случае.

пример

let arr1 = [10, 6, 3, 9, 17];
console.log(arr1.includes(9));
let names = ['Siya', 'Tom', 'Jerry', 'Bean', 'Ben'];
console.log(names.includes('Tom'));
console.log(names.includes('Be'));

Выход

true
true
false

Здесь мы снова должны использовать babel-polyfill как includes- это метод массива, и он не передается. Нам нужен дополнительный шаг для включения полифила, чтобы он работал в старых браузерах.

ES6 - array.includes

let arr1 = [10, 6, 3, 9, 17];
console.log(arr1.includes(9));
let names = ['Siya', 'Tom', 'Jerry', 'Bean', 'Ben'];
console.log(names.includes('Tom'));
console.log(names.includes('Be'));

команда

npx babel array_include.js --out-file array_include_es5.js

Бабель-ES5

'use strict';

var arr1 = [10, 6, 3, 9, 17];
console.log(arr1.includes(9));
var names = ['Siya', 'Tom', 'Jerry', 'Bean', 'Ben'];
console.log(names.includes('Tom'));
console.log(names.includes('Be'));

Чтобы протестировать его в старом браузере, нам нужно использовать полифилл, как показано ниже -

<!DOCTYPE html>
<html>
   <head>
      <title>BabelJs Testing</title>
   </head>
   <body>
      <script src="node_modules\babel-polyfill\dist\polyfill.min.js" type="text/javascript"></script>
      <script type="text/javascript" src="array_include_es5.js"></script>
   </body>
</html>

Выход