BabelJS教程

BabelJS - ES5的Transpile ES7功能

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

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

Async-Await
Exponentiation Operator
Array.prototype.includes（）

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

Async-Await

Async是一个异步函数，它返回一个隐式的promise。承诺要么得到解决，要么被拒绝。异步功能与普通标准功能相同。该函数可以具有等待表达式，该表达式暂停执行直到它返回一个promise，一旦获得它，执行就会继续。 Await仅在函数异步时才有效。

这是async和await的一个工作示例。

示例

 
 let timer =（）=> {
返回新的承诺（resolve => {
 setTimeout（（）=> {
 resolve（"承诺在5秒后解决"）; 
}，5000）; 
}）; 
}; 
 let out = async（）=> {
让msg = await timer（）; 
 console.log（msg）; 
 console.log（"等待后的问候"）; 
}; 
 out（）;

输出

 
 5秒后解决的承诺
你好等待

在调用定时器函数之前添加await表达式。计时器功能将在5秒后返回承诺。因此等待将暂停执行，直到计时器功能的承诺被解决或拒绝，然后继续。

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

ES7 - Async-Await

 
 let timer =（）=> {
返回新的承诺（resolve => {
 setTimeout（（）=> {
 resolve（"承诺在5秒后解决"）; 
}，5000）; 
}）; 
}; 
 let out = async（）=> {
让msg = await timer（）; 
 console.log（msg）; 
 console.log（"等待后的问候"）; 
}; 
 out（）;

命令

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

BabelJS - ES5

 
"use strict"; 
 var timer = function timer（）{
返回新的Promise（函数（解析）{
 setTimeout（function（）{
 resolve（"Promise在5之后解决）秒"）; 
}，5000）; 
}）; 
}; 
 var out = async function out（）{
 var msg = await timer（）; 
 console.log（msg）; 
 console.log（"等待后的问候"）; 
}; 
 out（）;

Babeljs不编译对象或方法;所以这里使用的承诺不会被转换，并将显示为原样。为了支持旧浏览器的承诺，我们需要添加代码，这将支持promises。现在，让我们安装babel-polyfill如下−

 
 npm install --save babel-polyfill

它应该保存为依赖项而不是dev依赖项。

要在浏览器中运行代码，我们将使用node_modules中的polyfill文件\babel-polyfill\dist\polyfill.min.js并使用脚本标签调用它，如下所示−

 
< ！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编译代码。

示例

 
让sqr = 9 ** 2; 
 console.log（sqr）;

输出

ES6 - Exponentiation

 
 let sqr = 9 ** 2; 
 console.log（sqr）;

要转换指数运算符，我们需要安装一个插件，安装如下−

command

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

将插件详细信息添加到 .babelrc 文件中，如下所示−

 
 {
"预设":[
"es2015"
]，
"插件":["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））; 
让名字= ['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

 
让arr1 = [10,6,3,9,17]; 
 console.log（arr1.includes（9））; 
让名字= ['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>