BabelJS教程

ES7 功能转换ES5

在本章中,我们将学习如何将 ES7 特性转换为 ES5、
ECMA Script 7 添加了以下新功能-
异步等待 求幂运算符 Array.prototype.includes()
我们将使用 babeljs 将它们编译为 ES5、根据您的项目要求,也可以编译任何 ecma 版本的代码,即 ES7 到 ES6 或 ES7 到 ES5、由于 ES5 版本是最稳定的,并且可以在所有现代和旧浏览器上正常运行,因此我们将代码编译为 ES5、

异步等待

Async 是一个异步函数,它返回一个隐式的 promise。承诺要么被解决,要么被拒绝。异步功能与普通标准功能相同。该函数可以有 await 表达式,它会暂停执行,直到它返回一个承诺,一旦它得到它,就继续执行。只有当函数是异步的时,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 秒后返回承诺。所以await 将停止执行,直到timer 函数的promise 被解决或拒绝,然后继续。
现在让我们使用 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 不编译对象或方法;所以这里使用的承诺不会被转译,而是按原样显示。为了在旧浏览器上支持 promises,我们需要添加代码,这将支持 promises。现在,让我们按如下方式安装 babel-polyfill-
npm install--save babel-polyfill
它应该保存为依赖项而不是开发依赖项。
为了在浏览器中运行代码,我们将使用来自 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>
当你运行上面的测试页面时,你会在控制台看到如下图的输出
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,因为 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>

输出

Babel ES5
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4