插件


Babel 是一个编译器(输入源码 => 输出编译后的代码)。就像其他编译器一样,编译过程分为三个阶段:解析、转换和打印输出。

现在,Babel 虽然开箱即用,但是什么动作都不做。它基本上类似于 const babel = code => code; ,将代码解析之后再输出同样的代码。如果想要 Babel 做一些实际的工作,就需要为其添加插件。

除了一个一个的添加插件,你还可以以 preset 的形式启用一组插件。

转换插件

这些插件用于转换你的代码。

转换插件将启用相应的语法插件,因此你不必同时指定这两种插件。

ES3

ES5

ES2015

ES2016

ES2017

ES2018

Modules

Experimental

Js中文网 – 前端进阶资源教程 www.javascriptC.com ,Babel中文文档
一个致力于帮助开发者用代码改变世界为使命的平台

Minification

查看我们 minifier based on Babel 插件!

这些插件都在 minify 仓库中。

React

其他

语法插件

这些插件只允许 Babel 解析(parse) 特定类型的语法(而不是转换)。

注意:转换插件会自动启用语法插件。因此,如果你已经使用了相应的转换插件,则不需要指定语法插件。

或者,你也可以通过 Babel 解析器传递任何 plugins 参数

Your .babelrc:

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

Js中文网 – 前端进阶资源教程 www.javascriptC.com ,Babel中文文档
一个致力于帮助开发者用代码改变世界为使命的平台

插件/Preset 路径

如果插件再 npm 上,你可以输入插件的名称,babel 会自动检查它是否已经被安装到 node_modules 目录下

 json
{
  "plugins": ["babel-plugin-myPlugin"]
}

你还可以指定插件的相对/绝对路径。

 json
{
  "plugins": ["./node_modules/asdf/plugin"]
}

插件的短名称

如果插件名称的前缀为 babel-plugin-,你还可以使用它的短名称:

 js
{
  "plugins": [
    "myPlugin",
    "babel-plugin-myPlugin" // 两个插件实际是同一个
  ]
}

这也适用于带有冠名(scope)的插件:

 js
{
  "plugins": [
    "@org/babel-plugin-name",
    "@org/name" // 两个插件实际是同一个
  ]
}

插件顺序

插件的排列顺序很重要。

这意味着如果两个转换插件都将处理“程序(Program)”的某个代码片段,则将根据转换插件或 preset 的排列顺序依次执行。

  • 插件在 Presets 前运行。
  • 插件顺序从前往后排列。
  • Preset 顺序是颠倒的(从后往前)。

例如:

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

先执行 transform-decorators-legacy ,在执行 transform-class-properties

重要的时,preset 的顺序是 颠倒的。如下设置:

 json
{
  "presets": ["es2015", "react", "stage-2"]
}

将按如下顺序执行:stage-2react 然后是 es2015

这主要的是为了确保向后兼容,因为大多数用户将 "es2015" 排在 "stage-0" 之前。有关详细信息,请参阅 notes on potential traversal API changes

Js中文网 – 前端进阶资源教程 www.javascriptC.com ,Babel中文文档
一个致力于帮助开发者用代码改变世界为使命的平台

插件参数

插件和 preset 都可以接受参数,参数由插件名和参数对象组成一个数组,可以在配置文件中设置。

如果不指定参数,下面这几种形式都是一样的:

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

要指定参数,请传递一个以参数名作为键(key)的对象。

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

preset 的设置参数的工作原理完全相同:

 json
{
  "presets": [
    [
      "env",
      {
        "loose": true,
        "modules": false
      }
    ]
  ]
}

插件开发

请参考 babel-handbook 学习如何创建自己的插件。

一个简单的用于反转名称顺序的插件(来自于首页):

 js
export default function() {
  return {
    visitor: {
      Identifier(path) {
        const name = path.node.name;
        // reverse the name: JavaScript -> tpircSavaJ
        path.node.name = name
          .split("")
          .reverse()
          .join("");
      },
    },
  };
}

← 编辑器预设(Presets) →

来源:Js中文网 – 前端进阶资源教程
链接:https://www.javascriptc.com/docs/babel-manual/plugins

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界