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 中可用的功能 -

特征 ECMA 脚本版本
让 + 常量 ES6
箭头功能 ES6
课程 ES6
承诺 ES6
发电机 ES6
迭代器 ES6
模块 ES6
解构 ES6
模板文字 ES6
增强对象 ES6
默认、剩余和传播属性 ES6
异步 - 等待 ES7
求幂运算符 ES7
Array.prototype.includes() ES7
字符串填充 ES8

BabelJS 管理以下两部分 -

  • 转译
  • 聚填充

什么是 Babel 转译器？

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

什么是 Babel-polyfill？

JavaScript 中添加了一些新功能，如承诺、映射和包含。这些特性可以用在数组上；同样，当使用 babel 进行使用和转译时，也不会被转换。如果新功能是方法或对象，我们需要使用 Babel-polyfill 和转译来使其在旧浏览器上运行。

以下是 JavaScript 中可用的 ECMA 脚本功能列表，可以对其进行转译和填充 -

  • 课程
  • 装饰器
  • 常量
  • 模块
  • 破坏
  • 默认参数
  • 计算属性名称
  • 物体静止/展开
  • 异步函数
  • 箭头功能
  • 其余参数
  • 传播
  • 模板文字

可以进行多填充的 ECMA 脚本功能 -

  • 承诺
  • 地图
  • 放
  • 象征
  • 弱图
  • 弱集
  • 包括
  • Array.from、Array.of、Array#find、Array.buffer、Array#findIndex
  • 对象.分配、对象.条目、对象.值

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/。

编译器