logo图片
BabelJS教程

BabelJS 概述

BabelJS 是一个 JavaScript 转译器,可将新功能转译为旧标准。有了这个,这些功能可以在新旧浏览器上轻松运行。澳大利亚开发人员 Sebastian McKenzie 创立了 BabelJS。

为什么选择 BabelJS?

JavaScript 是浏览器可以理解的语言。我们使用不同的浏览器来运行我们的应用程序——Chrome、Firefox、Internet Explorer、Microsoft Edge、Opera、UC 浏览器等。ECMA Script 是 JavaScript 语言规范; ECMA Script 2015 ES6 是稳定版本,适用于所有新旧浏览器。
在 ES5 之后,我们有了 ES6、ES7 和 ES8、 ES6 发布了许多新功能,但并非所有浏览器都完全支持。这同样适用于 ES7、ES8 和 ESNext(ECMA 脚本的下一个版本)。现在还不确定什么时候可以让所有浏览器兼容所有发布的 ES 版本。
如果我们计划使用 ES6 或 ES7 或 ES8 特性来编写我们的代码,由于缺乏对新更改的支持,它在一些旧浏览器中往往会崩溃。因此,如果我们想在我们的代码中使用 ECMA Script 的新特性并希望在所有可用的浏览器上运行它,我们需要一个工具来编译我们在 ES5 中的最终代码。
Babel 做同样的事情,它被称为转译器,可以转译我们想要的 ECMA 脚本版本中的代码。它具有诸如预设和插件之类的功能,可配置我们转译代码所需的 ECMA 版本。借助 Babel,开发人员可以使用 JavaScript 中的新功能编写代码。用户可以得到使用 Babel 转译的代码;这些代码以后可以在任何浏览器中使用而不会出现任何问题。
下表列出了 ES6、ES7 和 ES8 中可用的功能-
Features ECMA Script version
Let + Const ES6
Arrow Functions ES6
Classes ES6
Promises ES6
Generators ES6
Iterators ES6
Modules ES6
Destructuring ES6
Template Literals ES6
Enhanced Object ES6
Default, Rest & Spread Properties ES6
Async - Await ES7
Exponentiation Operator ES7
Array.prototype.includes() ES7
String Padding ES8
BabelJS 管理以下两部分-
transpiling polyfilling

什么是 Babel-Transpiler?

Babel-transpiler 将现代 JavaScript 的语法转换成一种形式,旧版浏览器可以轻松理解这种形式。例如,箭头函数、const、let 类将被转换为函数、var 等。这里的语法,即箭头函数被转换为普通函数,在两种情况下保持相同的功能。

什么是 Babel-polyfill?

JavaScript 中添加了一些新功能,例如承诺、映射和包含。这些特征可以用于阵列;同样,使用 babel 使用和转译时不会被转换。如果新特性是一个方法或对象,我们需要使用 Babel-polyfill 和转译来使其在旧浏览器上工作。
以下是 JavaScript 中可用的 ECMA 脚本功能列表,可以转译和填充-
Classes Decorators Const Modules Destructing Default parameters Computed property names Object rest/spread Async functions Arrow functions Rest parameters Spread Template Literals
可以填充的ECMA脚本功能-
Promises Map Set Symbol Weakmap Weakset includess Array.from, Array.of,Array#find,Array.buffer, Array#findIndex Object.assign,Object.entries,Object.values

BabelJS 的特点

在本节中,我们将了解 BabelJS 的不同功能。以下是 BabelJS 最重要的核心特性-

Babel 插件

插件和预设是 Babel 转译代码的配置细节。 Babel 支持许多插件,如果我们知道代码将在其中执行的环境,它们可以单独使用。

Babel 预设

Babel 预设是一组插件,即 babel-transpiler 的配置细节,指示 Babel 在特定模式下进行转译。我们需要使用预设,它具有我们想要转换代码的环境。例如, es2015 预设会将代码转换为 es5

Babel-Polyfills

有一些特性,如方法和对象,不能被转译。在这种情况下,我们可以使用 babel-polyfill 来促进在任何浏览器中使用功能。让我们考虑 Promise 的例子;为了让该功能在旧浏览器中工作,我们需要使用 polyfill。

Babel-Polyfills

Babel-cli 附带了一堆命令,可以在命令行上轻松编译代码。它还具有可与命令一起使用的插件和预设等功能,从而可以轻松地一次性转译代码。

使用 BabelJS 的优势

在本节中,我们将了解与使用 BabelJS 相关的不同优势-
BabelJS 为 JavaScript 的所有新增功能提供向后兼容性,并可在任何浏览器中使用。 BabelJS 能够转译为下一版本的 JavaScript-ES6、ES7、ESNext 等。 BabelJS 可以与 gulp、webpack、flow、react、typescript 等一起使用,使其非常强大,并且可以与大型项目一起使用,让开发者的生活变得轻松。 BabelJS 还可以与 react JSX 语法一起使用,并且可以编译为 JSX 形式。 BabelJS 支持插件、polyfills、babel-cli,可以轻松处理大型项目。

使用 BabelJS 的缺点

在本节中,我们将了解使用 BabelJS 的不同缺点-
BabelJS 代码在转译时更改了语法,这使得代码在生产环境中发布时难以理解。 与原始代码相比,转译后的代码规模更大。 并非所有 ES6/7/8 或即将推出的新功能都可以转译,我们必须使用 polyfill 才能在旧浏览器上运行。
这里是 babeljs 的官方网站 https://babeljs.io/
编译器
昵称: 邮箱:
Copyright © 2020 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4