Skip to content

就像前文已经提过的,babel 的核心转换功能是在@babel/core@babel/core 本身只是一个转换器,如果没有配置 plugins 声明转换规则的话,babel 什么都不会做。

插件分为两类:转换插件语法插件

转换插件

.babelrc 中配置:

json
{
  "plugins": ["@babel/plugin-transfrom-arrow-fuctions"]
}

这里列举些 es6 常见的插件:

箭头函数:@babel/plugin-transform-arrow-functions

class: @babel/plugin-transform-classes

for of: @babel/plugin-transform-for-of

语法插件

.babelrc 中配置:

json
{
  "parserOpts": {
    "plugins": ["jsx", "flow"]
  }
}

在使用某些转换插件的时候,会默认启用对应依赖的语法插件

所以一般我们不用过于注重这类插件的种类和配置。

插件顺序

  • 插件在 presets 前执行。
  • 插件顺序从前往后运行。
  • presets 顺序是颠倒的(从后往前)。这个是为了由于 babel 版本的迭代原因,保证向下兼容。

插件参数

给插件设置参数的时候,可以将插件项写作数组形式

json
{
  "plugins": [
    [
      "@babel/plugin-transform-arrow-functions", {
        "key": "value"
      }
    ]
  ]
}