📌  相关文章
📜  BabelJS-将ES7功能转换为ES5

📅  最后修改于: 2020-10-27 03:18:31             🧑  作者: Mango

在本章中，我们将学习如何将ES7功能转换为ES5。

ECMA Script 7添加了以下新功能-

  • 异步等待
  • 求幂运算符
  • Array.prototype.includes（）

我们将使用babeljs将它们编译为ES5。根据您的项目要求，也可以在任何ecma版本中编译代码，例如ES7至ES6或ES7至ES5。由于ES5版本最稳定并且可以在所有现代和旧版浏览器上正常工作，因此我们会将代码编译为ES5。

异步等待

异步是一个异步函数，它返回一个隐式的Promise。诺言要么被解决，要么被拒绝。异步函数与普通标准函数相同。该函数可以具有await表达式，该表达式将暂停执行直到返回promise，并且一旦获得promise便继续执行。仅当函数异步时，等待才有效。

这是有关异步和等待的工作示例。

例

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秒钟后返回承诺。因此，等待将暂停执行，直到解决或拒绝计时器函数的承诺，然后再继续。

现在让我们使用babel将以上代码转换为ES5。

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

应该将其另存为依赖而不是dev依赖。

要在浏览器中运行代码，我们将使用来自node_modules \ babel-polyfill \ dist \ polyfill.min.js的polyfill文件，并使用script标记进行调用，如下所示-

BabelJs Testing

运行上面的测试页面时，您将在控制台中看到如下所示的输出

polyfill文件

求幂运算符

**是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（）

如果传递给它的元素存在于数组中，则此功能为true；否则为false。

例

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

Babel-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，如下所示-

BabelJs Testing

输出

Babel ES5