如何配置 Babel 来体验最新 JavaScript 特性

因为各个浏览器厂商对 JavaScript 规范的实现并不统一，这让开发者在日常开发中经常遇到兼容性的挑战，一些新的 JavaScript/Ecmascript 特性并不能在所有的浏览器中使用，这样还需要针对各个浏览器编写不同的代码，才能让代码能够兼容。

后来，一些工具出现了，它们可以让我们编写有最新特性的 JavaScript 代码，然后把代码转换为各个浏览器都支持的版本，这种工具叫作转译器（Transpiler）。Babel 就是其中一个且比较著名，几乎每个前端框架中都使用到了，它可以把包含新特性的代码转换为 ES2015 版本，或者其它指定的版本来实现最大兼容性。

Ecmascript 每年都会发布一个新的版本，它有 TC39 组织来专门负责审阅提案，把合适的提案作为最终 JavaScript 新特性添加到新的 Ecmasciprt 版本中，可以通过 Github 链接来查看每个版本的提案，这些提案中包含了各个新特性的描述，以及对应的代码示例。

为了保持竞争力，我们需要不断的学习这些新特性，但是在提案完成之前，浏览器一般不会实现这些特性，那么要怎么提前进行学习和使用呢？

这个时候，可以利用 Babel 和它相关的插件，来把最新的特性转换为较旧的代码，来让浏览器支持运行，这里以 decorator （装饰器）特性为例，看看如何配置 babel 来测试 decorator 特性。这个教程主要以 Babel 的配置为主，不关注 decorator 详情，后期再发布相关的文章。

安装 Babel 依赖

要开始使用 babel，需要安装相关的依赖，先创建一个 node.js 工程，在一个合适的目录下，运行：

yarn init -y
# 或 npm
npm init -y

初始化一个 Node.js 工程并创建 package.json 文件，然后安装 Babel 依赖：

yarn add -D @babel/core @babel/cli @babel/preset-env @babel/plugin-proposal-decorators

这几个依赖的作用分别是：

• @babel/core。Babel 的核心依赖。
• @babel/cli。Babel 的命令行工具，可以让我们在命令行中转译代码。
• @babel/preset-env。Babel 的默认 preset，可以把 JavaScript 代码转译成指定的 Ecmascript 版本。preset 是包含一组 Babel 插件的集成环境。babel 所实现的功能是通过一个一个的插件实现的，使用 preset 可以直接引入一组插件。
• @babel/plugin-proposal-decorators。Babel 对 Ecmascript Decorator 特性的实现，把它转换为浏览器或 Node.js 支持的代码。

Babel 基本配置

在依赖安装完成之后，需要创建一个 Babel 的配置文件，来告诉 babel 该如何转译代码。在项目的根目录下创建一个 babel.config.json 文件，它里边的内容是：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "14"
        }
      }
    ]
  ],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": false}]
  ]
}

preset 属性配置了 Babel preset 的一些选项，babel 的 preset 和 plugins 都支持自定义选项，这里就是通过这个配置文件来指定的，在 presets 中：

• 使用数组来配置多个 preset，这里配置了 @babel/preset-env（或者也可以使用 @babel/env）这个 preset。
• 如果给 preset 或 plugin 传递配置项，需要把它们定义在数组里，数组的第一个元素是 preset 或 plugin 的名字，第二个元素是一个对象，用于设置配置项。
• @babel/preset-env 里配置了 targets，把代码转换为 node 14 版本所支持的。如果目标是浏览器，也可以针对各个浏览器配置版本，例如 chrome、firefox、safari、ie 等。

在 plugins 中，配置了 @babel/plugin-proposal-decorators，它就是负责把 Ecmascript Decorator 特性，转换为浏览器或 Node.js 支持的代码，由于指定了 targets 为 node 14，所以它就会把 decorators 特性转换为 node 14支持的代码。

@babel/plugin-proposal-decorators 也传递了配置对象，decoratorsBeforeExport 是必填项，用于设置 decorators 是否能写在 export 的前边。因为 decorators 特性在提案流程中，会根据用户反馈而发生变化，所以 babel 也会调整配置项，这个配置项的含义的代码示例如下：

// decoratorsBeforeExport: false
export @decorator class MyClass {}

// decoratorsBeforeExport: true
@decorator
export class MyClass {}

测试 decorators 特性

在配置完 Babel 和 decorators 插件后，我们来编写代码来测试一下 decorators 特性。在项目根目录下新建一个 index.js 文件，里边写上 decorators 提案中的示例代码：

@annotation
class MyClass {}

function annotation(target) {
  target.annotated = true;
  console.log("abc");
}

这里给 MyClass 这个类添加了 @annotation decorator，然后使用同名函数 annoation 实现了它的功能，把 target 的 annotated 属性设置为了 true，target 是 @annotation decorator 的类，接着打印了 "abc" 测试字符串。

接下来运行下面的命令，来转译代码：

npx babel index.js -o dist.js

npx 可以让我们省略 babel 命令的全路径：./node_modules/.bin/babel，在 babel 命令中，后面跟上源代码文件名 index.js，-o 表示把转译后的代码写入到文件中，这里指定为 dist.js 文件。

运行完成之后，打开 dist.js 文件，可以看到有相当长的内容，这里就不展示了，这些代码都是 node.js 版本 14 支持的。我们运行一下 dist.js 文件：

node dist.js

可以看到它能够打印出 "abc"，这说明它转译成功了。

小结

Babel 是非常流行的 JavaScript 转译工具，可以帮我们把 JavaScript 最新的特性转译为各个浏览器或 Node.js 所支持的版本，以最大程度的提高代码的兼容性。Babel 提供了一组 preset 和 plugins 来帮助代码的转译，例如可以使用 @babel/plugin-proposal-decorators 来测试 decorators 特性。

使用 Babel 的步骤是：

• 安装 @babel/core @babel/cli @babel/preset-env 依赖。
• 添加 babel.config.json 配置文件，配置 targets 和插件。
• 运行 npx babel 来转译代码。

后面如果想尝试其它 Ecmascript 新特性，那么可以查看 Babel 的插件列表，看看是否已经支持，如果支持就可以引入进来，编写测试代码了。

‌