[Babel] Intro Babel - 04. Plugins and Presets

使用插件

在 babel 要使用一个插件，步骤实际上非常简单，就分为两步：

• 安装插件
• 在配置文件或者 CLI 中指定插件

举个例子，例如有一个专门将箭头函数转为普通函数的插件：

pnpm add @babel/plugin-transform-arrow-functions -D

之后在配置文件中进行插件配置即可

{
  "plugins": ["@babel/plugin-transform-arrow-functions"]
}

插件使用的细节

1. 插件的运行顺序

plugins 对应的值为一个数组，说明是可以指定多个插件的

{
  "plugins": ["transform-decorators-legacy", "transform-class-properties"]
}

在上面的配置中，插件的运行会从左往右运行，也就是说，会先运行 transform-decorators-legacy 这个插件，然后运行 transform-class-properties 这个插件。

如果配置文件中既配置了插件，又配置了预设，那么 babel 会先运行插件，然后在运行预设里面的插件，也就是说，插件运行的时机是要早于预设的。

2. 插件选项

在使用插件的时候，是可以传递插件选项的，例如有三种写法：

{
  "plugins": ["pluginA", ["pluginA"], ["pluginA", {}]]
}

上面的三种写法目前来讲是等价的，而第三种写法，数组第二项的对象实际上就是用来传递插件配置项

{
  "plugins": [
    [
      "transform-async-to-module-method",
      {
        "module": "bluebird",
        "method": "coroutine"
      }
    ]
  ]
}

关于插件究竟有哪些配置项，这个需要去参阅插件相关的文档。

插件列表

你可以在 https://babeljs.io/docs/plugins-list 看到 babel 中支持的大多数插件。

一般来讲，每个插件点击进去会包含该插件对应的说明信息，一般包含这些内容：

• 该插件的说明
• 插件编译前后代码的区别
• 该插件的使用方法
• 该插件的配置选项

使用预设

预设的基本使用

首先第一步仍然是先要安装对应的预设

pnpm add --save-dev @babel/preset-env

安装完成后，在配置文件中进行配置：

{
  "presets": ["@babel/preset-env"]
}

预设对应的值是一个数组，说明也是能够配置多个预设的，但是一定要注意顺序

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

上面的配置中，会先运行 @babel/preset-react 预设里面的插件，然后运行 @babel/preset-env 这套预设里面的插件。

运行的顺序刚好和插件是相反的，从后往前运行。

官方预设

官方提供了 4 套预设：

• @babel/preset-env 用于编译 ES2015 及以上版本的语法
• @babel/preset-typescript 用于 TypeScript
• @babel/preset-react 用于 React
• @babel/preset-flow 用于 Flow

stage-x 预设

在 babel v7.0.0 之前，支持一种叫做 state-x 的预设特性。

JavaScript 的新特性是由 TC39 的小组提出并且通过一系列的阶段来推动的。一般来讲，这个阶段分为从 0 到 4，每个阶段对应了新特性的不同状态：

• Stage 0 - Strawman：只是一个想法或者提案，还没有任何实现。
• Stage 1 - Proposal：这是一个正式的提案，包含 API 的描述，但可能还没有完全实现。
• Stage 2 - Draft：初步版本，已经有了初步的规范文本，并且大部分细节都已经确定。
• Stage 3 - Candidate：候选阶段，规范已经完成，并且已经完成了浏览器的初步实现，这个阶段主要是为了获取反馈和评估。
• Stage 4 - Finished：完成阶段，已经在多个浏览器中实现并通过了实际使用的测试，可以被添加到 ECMAScript 标准中。

在早期的时候（babel v7.x.x 之前），可以安装对应阶段的预设

npm install --save-dev @babel/preset-stage-2

这个预设对应了 stage2 阶段的新特性的编译

{
  "presets": ["@babel/preset-stage-2"]
}

之后你在做开发的时候，就可以只用 stage 2 阶段的新语法了。

但是上面的 stage-x 的预设从 v7.0.0 版本开始就已经废弃了。

As of Babel 7, we've decided to deprecate the Stage-X presets and stop publishing them. Because these proposals are inherently subject to change, it seems better to ask users to specify individual proposals as plugins vs. a catch all preset that you would need to check up on anyway.

目前官方推荐的做法是要使用哪个新特性，直接安装对应的插件即可。

@babel/preset-env

这里我们主要看一下这一套插件对应的 options

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry",
        "corejs": "3.22",
        "modules": false
      }
    ]
  ]
}

在上面的配置中，我们就使用了 @babel/preset-env 预设，并且对这套预设做了一些配置。

• targets：指定浏览器需要支持的版本范围

{
  "presets": [
    ["@babel/preset-env", {
      "targets": "> 0.25%, not dead"
    }]
  ]
}

• useBuiltIns：让你决定如何使用 polyfills

  • entry：该选项值会根据项目中 browserslist 对应的浏览器版本范围来添加 polyfills，这个选项不会管你源码中是否用到缺失的特性，只要对应的浏览器版本是缺失的，那么就会添加对应的特性。而且在使用这个选项值的时候，还需要在源码的入口文件中手动引入 core-js
  • usage：根据你的源码中是否使用了缺失的特性，如果使用到了缺失的特性，那么才添加对应的 polyfills
  • false：这个是默认值，关闭自动引入 polyfills。

• corejs：指定你的 corejs 版本，polyfills 实际上就是通过 corejs 来实现的。该配置项一般就和 useBuiltIns 一起使用

{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage",
      "corejs": 3
    }]
  ]
}

• corejs 支持的配置项有 2、3 还有 false：

-- "2": 使用 core-js 的版本 2。这是旧版本的 core-js，它包含 ES5、ES6 和 ES7 的特性。在 Babel 7.4.0 之前，这是默认值。

-- "3": 使用 core-js 的版本 3。这是新版本的 core-js，它包含 ES5、ES6、ES7、ES8 和更高版本的特性。在 Babel 7.4.0 及更高版本，这是推荐的值。

-- false: 不使用 core-js。如果你不想让 Babel 添加任何 polyfill，你可以将 corejs 设置为 false。

• modules：设置模块的类型
  • amd
  • umd
  • systemjs
  • commonjs
  • cjs
  • auto
  • false

默认值为 auto，根据你的环境和代码自动来决定使用的模块版本。

• include：允许你显式的指定要包含的插件（这个插件是本身在预设里面，但是因为 targets 的设置，可能会被排除掉）

{
  "presets": [
    ["@babel/preset-env", {
      "targets": "> 0.25%, not dead",
      "include": ["@babel/plugin-proposal-optional-chaining"]
    }]
  ]
}

假设 preset-env 里面有 pluginA、pluginB、pluginC，假设我现在指定了浏览器范围，所指定的这些浏览器范围已经实现了特性 A 和 特性B，那么这里就只会用到 pluginC。那么 include 配置项就可以强行指定要包含的插件