首先来了解Babel转码的过程分三个阶段：分析(parse)、转换(transform)、生成(generate)。
其中，分析、生成阶段由Babel核心完成，而转换阶段，则由Babel插件完成，这也是本文的重点。

分析

Babel读入源代码，经过词法分析、语法分析后，生成抽象语法树（AST）。

parse(sourceCode) => AST

转换

经过前一阶段的代码分析，Babel得到了AST。在原始AST的基础上，Babel通过插件，对其进行修改，比如新增、删除、修改后，得到新的AST。

transform(AST, BabelPlugins) => newAST

生成

通过前一阶段的转换，Babel得到了新的AST，然后就可以逆向操作，生成新的代码。

generate(newAST) => newSourceCode

典型的Babel插件结构

典型的Babel插件结构，如下代码所示。

export default function({ types: babelTypes }) {
  return {
    visitor: {
      Identifier(path, state) {},
      ASTNodeTypeHere(path, state) {}
    }
  };
};

需要关注的内容如下：

babelType：类似lodash那样的工具集，主要用来操作AST节点，比如创建、校验、转变等。举例：判断某个节点是不是标识符(identifier)。
path：AST中有很多节点，每个节点可能有不同的属性，并且节点之间可能存在关联。path是个对象，它代表了两个节点之间的关联。你可以在path上访问到节点的属性，也可以通过path来访问到关联的节点（比如父节点、兄弟节点等）
state：代表了插件的状态，你可以通过state来访问插件的配置项。
visitor：Babel采取递归的方式访问AST的每个节点，之所以叫做visitor，只是因为有个类似的设计模式叫做访问者模式，不用在意背后的细节。
Identifier、ASTNodeTypeHere：AST的每个节点，都有对应的节点类型，比如标识符（Identifier）、函数声明（FunctionDeclaration）等，可以在visitor上声明同名的属性，当Babel遍历到相应类型的节点，属性对应的方法就会被调用，传入的参数就是path、state。

插件制作

简单的例子

npm init -f
npm install --save-dev @babel/cli @babel/core
./plugin.js
module.exports = function({ types: babelTypes }) {
  return {
    name: "deadly-simple-plugin-example",
    visitor: {
      Identifier(path, state) {
        // if (path.node.name === 'bad') {
        //  path.node.name = 'good';
        // }
        let name = path.node.name;
        console.log("name:", name);
        console.log(state);
        if (state.opts[name]) {
          path.node.name = state.opts[name];
        }
      }
    }
  };
};
./babel.config.js
module.exports = {
  "plugins": [ ["./plugin", {
    "bad": "good",
    "dead": "alive"
  }] ]
}
./index.js
let bad = true;
let dead = true;

复杂的例子

下面，来看一个稍微复杂一点但比较实用的例子：替换 process.env.NODE_ENV。示例完整代码可以在这里找到，参考了这个插件。
在很多开源项目中，我们经常会看到类似下面的代码，对这些代码，需要在构建阶段进行处理，比如进行替换。

// index.js
if ( process.env.NODE_ENV === 'development' ) {
  console.log('我是程序猿小卡');
}

// plugin.js
module.exports = function({ types: babelTypes }) {
  return {
    name: "node-env-replacer",
    visitor: {
      // 成员表达式
      MemberExpression(path, state) {
        // 如果 object 对应的节点匹配了模式 "process.env"
        if (path.get("object").matchesPattern("process.env")) {
          // 这里返回结果为字符串字面量类型的节点
          const key = path.toComputedKey();
          if ( babelTypes.isStringLiteral(key) ) {
            // path.replaceWith( newNode ) 用来替换当前节点
            // babelTypes.valueToNode( value ) 用来创建节点，如果value是字符串，则返回字符串字面量类型的节点
            path.replaceWith(babelTypes.valueToNode(process.env[key.value]));
          }
        }
      }
    }
  };
};

插件代码讲解

这次我们处理的是成员表达方式(MemberExpression)。对于MemberExpression，BabelType的定义如下：
MemberExpression 主要是由 object、property、computed、optional 组成的。对于本例子来说，object 是 process.env 对应的节点，property 为 NODE_ENV 对应的节点。

defineType("MemberExpression", {
  builder: ["object", "property", "computed", "optional"],
  visitor: ["object", "property"],
  // ...
});

前面提到，path对应了节点的属性，以及节点的关联关系。path.get(“object”) 获取到的就是 object（process.env）对应的 path实例。
matchesPattern(pattern) 检查某个节点是否符合某种模式（pattern）。本例子中，path.get(“object”).matchesPattern(“process.env”) 检查 object 是否符合 “process.env” 这种模式。比如成员表达式 process.env.NODE_ENV 为true，而成员表达式 process.hello.NODE_ENV 返回false。

if (path.get("object").matchesPattern("process.env")) { }

接着，通过 path.toComputedKey() 获取成员表达式的键（key），对于对于MemberExpression，返回的是类型为字符串字面量（stringLiteral）的节点。

const key = path.toComputedKey();

if ( babelTypes.isStringLiteral(key) ) 判断 key 是否为字符串字面量，如果是，则返回true。
path.replaceWith( node ) 方法用来替换节点。babelTypes.valueToNode( value ) 用来创建节点，如果value是字符串，则返回字符串字面量类型的节点。

path.replaceWith(babelTypes.valueToNode(process.env[key.value]));

运行插件

命令如下：

npx babel --plugins ./plugin.js index.js

转换结果：

// index.js
if ('development' === 'development') {
  console.log('我是程序猿小卡');
}

总结

Babel的插件入门比较简单，照葫芦画瓢即可。在编写插件过程中，可能会遇到的主要障碍，包括对ECMA规范不了解、对Babel的API不了解。

对ECMA规范不了解：MemberExpression、FunctionDeclaration、Identifier等都是规范里的术语，如果对规范没有一定的了解，转换代码的时候就不知道如何入手。建议读者稍微了解下ECMA规范。
对Babel的API不了解：Babel相关API的文档比较少，这会对插件编写造成不小的困难，目前比较好的解决办法，就是参考现有的插件进行修改。

总而言之，就是多看多写多查。
这里再留个小问题，前面插件替换了 process.env.NODE_ENV，如果是下面代码该怎么替换？

process.env['NODE_' + 'ENV'];

李俊扬的技术分享

babel插件的编写

分析

转换

生成