BabelJS - 将 ES7 功能转换为 ES5

BabelJS - 将 ES7 功能转换为 ES5

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

ECMA Script 7 添加了以下新功能

  • Async-Await
  • Exponentiation Operator
  • Array.prototype.includes()

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

 

Async-Await

Async 是一个异步函数,它返回一个隐式的承诺。承诺要么被解决,要么被拒绝。异步函数与普通的标准函数相同。该函数可以有 await 表达式,它会暂停执行,直到它返回一个 Promise,一旦它得到它,执行就会继续。只有当函数是异步的时,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 将暂停执行,直到计时器功能上的承诺被解决或拒绝,然后再继续。

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

npx babel asyncawait.js --out-file asyncawait_es5.js
"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 不编译对象或方法;所以这里使用的 Promise 不会被转译,而是按原样显示。为了在旧浏览器上支持 Promise,我们需要添加支持 Promise 的代码。现在,让我们按如下方式安装 babel-polyfill 

npm install --save babel-polyfill

它应该保存为依赖而不是开发依赖。

要在浏览器中运行代码,我们将使用 node_modules\babel-polyfill\dist\polyfill.min.js 中的 polyfill 文件,并使用 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>

 

Exponentiation Operator

** 是 ES7 中用于求幂的运算符。以下示例显示了 ES7 中相同的工作,代码使用 babeljs 进行了转译。

let sqr = 9 ** 2;
console.log(sqr);

输出:

81

要转换幂运算符,我们需要安装一个插件,如下所示

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
"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 以使其在旧浏览器中工作。

npx babel array_include.js --out-file array_include_es5.js
'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>

 

版权声明:著作权归作者所有。

相关推荐

[译]Angular 5:升级和新功能的总结

代号为pentagonal-donut的Angular 5刚刚发布,它带来了一些新功能以及一些内部变化,这些会让Angular应用变得更小,执行变得更快。 在这篇文章中,我们将简要介绍一些最重要的变化以及升级指南。 有关更多详细信息,请参阅公告博客帖子,有关所有更改的详细信息,请参阅官方更新日志。性能这是Angular 5包含的一些改变,它会让你的应用变得更

Java 9数组转换为List

Java 9使用List.of在Java 9,List新增了of()的工厂方法用来产生不可变的列表。返回一个空列表List list = List.of(); 多个元素生成列表List<Integer> list = List.of(1,2,3,4,5); 数组转换为列表Integer[] arr

Java转换List为JSON格式

使用GSON可以很简单实现list转换为json格式。添加依赖<dependencies> <dependency> <groupId>com.google.code.gson</groupId> <artifactId>gson</artifactId> <version

转换Pandas dataframe为numpy array数组

常用用于转换Pandas dataframe为numpy array有两种方法:np_array = df.as_matrix(columns=None)np_array = df.values但这两种方法都有一个缺陷:丢失dtype和name。另外一种可选的方法是使用df.to_records(),它会返回recarray,然后使用np.asarray()把转recarray转换为array。r

Java 8 转换Stream为数组

Stream转换为数组最简单的方法是使用toArray(IntFunction<A[]> generator)Stream<String> streamString = Stream.of("a", "b", "c");String[] stringArray = streamString.toArray(String[]::new);String[]:new会接收Stre

Java把LocalDate转换为Date

有时需要在LocalDate和Date之间互转。LocalDate转换为DateLocalDate localDate = LocalDate.now(); System.out.println("LocalDate = " + localDate); Date date = Date.from(localDate.atStartOfDay(ZoneId.systemDefault()).toIn

build.gradle转换为maven的pom文件

build.gradle文件示例:repositories { mavenCentral()}group = 'com.example'version = '0.0.1-SNAPSHOT'apply plugin: 'java'dependencies { compile('org.slf4j:slf4j-api') testCompile('junit:junit')} 1

JavaScript转换xml为json的函数

javascript转换xml为json的函数如下:function xmlToJson(xml) { // 新建返回的对象 var obj = {}; if (xml.nodeType == 1) { // 处理属性 if (xml.attributes.length > 0) { obj["@attributes"] = {};

Java使用IOUtils转换InputStream为String

Apache commons是一个强大的Java辅助工具包。它提供的IOUtils可以让我们很便捷的实现InputStream转换为String。StringWriter writer = new StringWriter();IOUtils.copy(inputStream, writer, encoding);String theString = writer.toString();首先把in