BabelJS - 将 ES7 功能转换为 ES5
在本章中，我们将学习如何将 ES7 功能转换为 ES5。
ECMA Script 7 添加了以下新功能 −
- Async-Await
- 指数运算符
- Array.prototype.includes()
我们将使用 babeljs 将它们编译为 ES5。根据您的项目要求，也可以在任何 ecma 版本中编译代码，即 ES7 到 ES6 或 ES7 到 ES5。由于 ES5 版本最稳定，并且在所有现代和旧浏览器上都能正常工作，因此我们将代码编译为 ES5。
Async-Await
Async 是一个异步函数，它返回一个隐式承诺。承诺要么被解决，要么被拒绝。异步函数与普通标准函数相同。该函数可以有 await 表达式，该表达式会暂停执行，直到它返回承诺，一旦它得到承诺，执行将继续。只有当函数是异步时，Await才会起作用。
这是一个关于异步和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 秒后返回承诺。因此，await 将暂停执行，直到计时器函数上的承诺得到解决或拒绝，然后继续。
现在让我们使用 babel 将上述代码转换为 ES5。
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-dependency。
要在浏览器中运行代码，我们将使用 node_modules\babel-polyfill\dist\polyfill.min.js 中的 polyfill 文件，并使用脚本标记调用它，如下所示 −
<!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()
如果传递给它的元素存在于数组中，则此功能返回 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，因为 includes 是数组上的一个方法，它不会被转译。我们需要额外的步骤来包含 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，如下所示 −
<!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>
输出
