babel 插件的编写

github 上关于 babel-plugin 关键词搜索结果达 3700 多个，可见 babel 的插件生态非常庞大，今天笔者讲带领大家打开 babel plugin 的大门。

babel 运行原理

解析（parse）
转换（transform）
生成（gnerate）

几个概念

babel 的主要工作都集中在 AST 转换，在这个过程中对节点进行添加、更新、移除等操作。

visitor

简单的理解为一个对象，定义了用于在一个树状结构中获取具体节点的方法

1 2	let visitor = {}; visitor.ExpressionStatement = function() {};

在遍历 AST 过程中每遇到 ExpressionStatement 都会调用 ExpressionStatement 方法

path

表示两个节点之间连接的对象，对象上包含其他元数据以及添加、更新、移动和删除节点有关的方法等

state

接受外界参数（插件选项），不同参数转换成不同 AST

….

babel 插件编写基本步骤

第一步

export 接受 babel 参数的 function

1
2
3

export default function (babel) {
  // ...
}

第二步

return 包含 visitor 属性的对象

export default function ({ types: t }) {
  return {
    visitor: {
      // visitor contents
    }
  };
};

第三步

编写 visitor 中不同函数，其中每个函数接受 path, state 两个参数

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

第四步

调用 API 转换 AST 即可

一个例子

这里只是简单介绍了下 plugin 编写的一个大致流程，至于 babel 提供的 api 还需读者自行查找了解。

笔者写了一个处理代码中的 console 的插件

ps: 有兴趣的同学可以阅读下 ant-design 开源的支持按需引入的 babel-plugin-import 插件