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 Script 的下一个版本)也是如此。现在还不确定什么时候所有浏览器都可以兼容所有发布的 ES 版本。

如果我们计划使用 ES6 或 ES7 或 ES8 功能来编写代码，由于缺乏对新更改的支持，它往往会在某些旧浏览器中崩溃。因此，如果我们想在代码中使用 ECMA Script 的新功能，并希望在所有可能的浏览器上运行它，我们需要一个可以在 ES5 中编译最终代码的工具。

Babel 的作用相同，它被称为转译器，可以转译我们想要的 ECMA Script 版本的代码。它具有预设和插件等功能，可以配置我们转译代码所需的 ECMA 版本。使用 Babel，开发人员可以使用 JavaScript 中的新功能编写代码。用户可以使用 Babel 转译代码；代码稍后可以在任何浏览器中使用，不会出现任何问题。

下表列出了 ES6、ES7 和 ES8 中可用的功能 −

功能	ECMA 脚本版本
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 Script 功能列表，可以进行转译和 polyfill −

Classes
Decorators
Const
Modules
Destructing
Default parameters
Computed property names
Object rest/spread
Async functions
Arrow functions
Rest parameters
Spread
Template Literals

可以实现 polyfill 的 ECMA Script 功能−

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-Plugins

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

Babel-Presets

Babel 预设是一组插件，即 babel-transpiler 的配置详细信息，用于指示 Babel 以特定模式进行转译。我们需要使用预设，它具有我们希望代码转换的环境。例如，es2015 预设将代码转换为 es5。

Babel-Polyfills

有些功能(如方法和对象)无法转译。在这种情况下，我们可以利用 babel-polyfill 来方便在任何浏览器中使用这些功能。让我们考虑一下承诺的例子；为了让该功能在旧浏览器中工作，我们需要使用 polyfills。

Babel-Polyfills

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

使用 BabelJS 的优势

在本节中，我们将了解使用 BabelJS 的不同优势 −

BabelJS 为 JavaScript 的所有新添加功能提供向后兼容性，并且可以在任何浏览器中使用。
BabelJS 能够转译以采用下一个即将推出的 JavaScript 版本 - ES6、ES7、ESNext 等。
BabelJS 可以与 gulp、webpack、flow、react、typescript 等一起使用，功能非常强大，可以用于大型项目，让开发人员的工作变得轻松。
BabelJS 还可以与 react JSX 语法一起使用，并且可以在 JSX 中编译形式。
BabelJS 支持插件、polyfill、babel-cli，可轻松处理大型项目。