Учебники

BabelJS — функции Transpile ES7 для ES5

Октябрь 1, 2018

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

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

  • Асинхронный-Await
  • Оператор возведения в степень
  • Array.prototype.includes ()

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

Асинхронный-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

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

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

ES7 — 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();

команда 

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

Он должен быть сохранен как зависимость, а не как dev-зависимость.

Для запуска кода в браузере мы будем использовать файл 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);

Выход 

81

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, так как include — это метод для массива, и он не будет передан. Нам нужен дополнительный шаг для включения polyfill, чтобы он работал в старых браузерах.

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'));

Чтобы проверить это в старом браузере, нам нужно использовать polyfill, как показано ниже —

47
Share: