掌握 Babel 插件：运行顺序与选项传递技巧(4)

Babel 的插件机制允许你通过安装和配置特定的插件来扩展其功能，从而实现各种代码转换。

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

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

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

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

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

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

插件使用的细节

1. 插件的运行顺序

   插件数组中的插件会按照从左到右的顺序依次执行。例如：

   {
     "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"
         }
       ]
     ]
   }
   

   关于插件的具体配置选项，需要查阅相应插件的文档。

插件列表

你可以在 Babel 插件列表 页面查看 Babel 支持的大多数插件。每个插件通常包含以下信息：

• 插件说明：简要介绍插件的功能。
• 编译前后代码的区别：展示插件如何转换代码。
• 使用方法：说明如何在项目中使用该插件。
• 配置选项：列出可用的配置选项及其作用。

示例

假设你有一个项目结构如下：

/my-project
|-- src
|   |-- index.js
|-- .babelrc
|-- package.json

• .babelrc

  {
    "presets": ["@babel/preset-env"],
    "plugins": [
      "@babel/plugin-transform-arrow-functions",
      [
        "transform-async-to-module-method",
        {
          "module": "bluebird",
          "method": "coroutine"
        }
      ]
    ]
  }
  

• src/index.js

  const greet = (name) => `Hello, ${name}!`;
  
  async function fetchData() {
    // 异步操作
  }
  
  console.log(greet("World"));
  await fetchData();
  

• package.json

  {
    "scripts": {
      "build": "babel src --out-dir lib"
    }
  }
  

• 运行构建脚本

  pnpm run build
  

  这个脚本会编译 src 目录下的所有文件，并将结果输出到 lib 目录下。@babel/plugin-transform-arrow-functions 会将箭头函数转换为普通函数，而 transform-async-to-module-method 会根据配置将异步函数转换为 Bluebird 的 coroutine 方法。

通过这些步骤，你可以灵活地使用 Babel 插件来满足项目的具体需求。