BabelJS - 概述

---

---

BabelJS 是一个 JavaScript 转译器，它将新特性转译成旧标准。这样，这些特性就可以在旧版和新版浏览器上无障碍运行。澳大利亚开发者 Sebastian McKenzie 创建了 BabelJS。

为什么选择 BabelJS？

JavaScript 是浏览器理解的语言。我们使用不同的浏览器来运行我们的应用程序——Chrome、Firefox、Internet Explorer、Microsoft Edge、Opera、UC 浏览器等等。ECMAScript 是 JavaScript 语言规范；ECMAScript 2015 (ES6) 是一个稳定的版本，在新旧浏览器中都能很好地工作。

在 ES5 之后，我们有了 ES6、ES7 和 ES8。ES6 发布了许多新特性，并非所有浏览器都完全支持。ES7、ES8 和 ESNext（ECMAScript 的下一个版本）也是如此。目前尚不清楚所有浏览器何时才能兼容所有已发布的 ES 版本。

如果我们计划使用 ES6 或 ES7 或 ES8 特性来编写代码，由于缺乏对新更改的支持，它可能会在某些旧版浏览器中出现故障。因此，如果我们想在代码中使用 ECMAScript 的新特性，并希望它能够在所有可能的浏览器上运行，我们需要一个工具将我们的最终代码编译成 ES5。

Babel 就能做到这一点，它被称为转译器，可以将代码转译成我们想要的 ECMAScript 版本。它具有预设和插件等特性，可以配置我们需要转译代码的 ECMAScript 版本。使用 Babel，开发者可以使用 JavaScript 中的新特性编写代码。用户可以使用 Babel 转译代码；之后，这些代码可以在任何浏览器中无任何问题地使用。

下表列出了 ES6、ES7 和 ES8 中可用的特性：

BabelJS 管理以下两部分：

• 转译
• polyfill

什么是 Babel 转译器？

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

什么是 Babel polyfill？

JavaScript 中添加了一些新特性，例如 Promise、Map 和 includes。这些特性可以用于数组；但是，当使用 babel 进行转译时，它们不会被转换。如果新特性是方法或对象，我们需要结合使用 Babel polyfill 和转译才能使其在旧版浏览器中工作。

以下是 JavaScript 中可用的 ECMAScript 特性列表，这些特性可以进行转译和 polyfill：

• 类
• 装饰器
• Const
• 模块
• 解构
• 默认参数
• 计算属性名
• 对象 rest/spread
• 异步函数
• 箭头函数
• 剩余参数
• 扩展运算符
• 模板字面量

可以进行 polyfill 的 ECMAScript 特性：

• Promise
• Map
• Set
• Symbol
• WeakMap
• WeakSet
• includes
• 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 转译器提供的配置细节，指示 Babel 以特定模式进行转译。我们需要使用预设，其中包含我们希望代码被转换到的环境。例如，`es2015` 预设将代码转换为 `es5`。

Babel Polyfill

有些特性（例如方法和对象）无法进行转译。在这种情况下，我们可以使用 babel-polyfill 来方便在任何浏览器中使用这些特性。让我们考虑 Promise 的示例；为了使该特性在旧版浏览器中工作，我们需要使用 polyfill。

Babel Polyfill

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，使其易于处理大型项目。

使用 BabelJS 的缺点

在本节中，我们将了解使用 BabelJS 的各种缺点：

• BabelJS 代码在转译时会更改语法，这使得在生产环境中发布时难以理解代码。

• 与原始代码相比，转译后的代码体积更大。

• 并非所有 ES6/7/8 或即将推出的新特性都可以进行转译，我们必须使用 polyfill 才能使其在旧版浏览器中工作。

这是 babeljs 的官方网站 https://babel.node.org.cn/。