BabelJS - 概述

BabelJS - 概述

BabelJS 是一个 JavaScript 转译器，它将新功能转译成旧标准。有了BabelJS，这些新功能可以在新旧浏览器上自由运行。澳大利亚开发人员 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 中可用的功能

BabelJS 管理以下两部分

• transpiling
• polyfilling

什么是 Babel-Transpiler？

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

什么是 Babel-polyfill？

avaScript 中添加了一些新功能，例如 promise、map 和 include。这些特征可以用在数组上；同样，当使用 babel 进行转译时，也不会被转换。如果新特性是一个方法或对象，我们需要使用 Babel-polyfill 和转译来使其在旧浏览器上工作。

这是 JavaScript 中可用的 ECMA 脚本功能列表，可以转译和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 脚本功能

• 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

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

Babel-Presets

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

Babel-Polyfills

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

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 才能在旧浏览器上运行。