写在前面
本文将以把es6的语法let改为var为例，讲述如何编写一个babel插件。其中涉及到一些babel的基本知识，babel的工作流程，语法抽象树等。
babel简介
关于babel 官网做了如下解释:
Babel 是一个工具链，主要用于在旧的浏览器或环境中将 ECMAScript 2015+ 代码转换为向后兼容版本的 JavaScript 代码
相信大家在开发中或多或少的都使用过bable对代码进行编译。在babel配置文件.babelrc中最主要就是对presets和Plugins的配置。其中presets通俗来说就是某一类的插件转译集合，比如说babel官方封装好的@babel/preset-react中就包括以下插件@babel/plugin-syntax-jsx，@babel/plugin-transform-react-jsx，@babel/plugin-transform-react-display-name。而Plugins相对来说功能比较单一，比如transform-es2015-arrow-functions，这个插件只负责转译es2015新增的箭头函数。
所以在我们的日常开发中也可以根据自己的需求开发bebal插件，从而提高开发效率。
babel的编译过程
Babel转码的过程分三个阶段：解析(parse)、转换(transform)、生成(generate)。下面这张图可以很好的说明babel的工作过程
- 解析,解析步骤接收代码并输出 AST。
- 转换,转换步骤接收AST并对其进行遍历，在此过程中对节点进行添加、更新及移除等操作
- 生成,代码生成步骤把最终（经过一系列转换之后）的 AST 转换成字符串形式的代码，同时还会创建源码映射（source maps）。
其中，解析、生成阶段由Babel核心完成，而转换阶段，则由Babel插件完成，这也是本文的重点。
抽象语法树（AST）
在计算机科学中，抽象语法树（Abstract Syntax Tree，AST），或简称语法树（Syntax tree），是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。之所以说语法是“抽象”的，是因为这里的语法并不会表示出真实语法中出现的每个细节。
开发一个babel插件一定要对AST有所了解，上面是维基百科对抽象语法树的解释
举个例子：
var a = 1;
复制代码转换成的AST结构为：
这里是可以实时查看代码ast结构的网站astexplorer.net/，有助于更好的了解ast以及编写babel插件
开发babel插件
安装@babel/cli,@babel/core
可用于从命令行编译文件
"@babel/cli": "^7.1.5",
"@babel/core": "^7.1.6",
复制代码新建js文件
新建一个babel-letToVar.js文件，代码如下
function letToVar(babel) {
const { types: t, template } = babel;
return visitor = { };
}
module.exports = letToVar;
复制代码我们可以在letToVar这个方法中接收babel对象。
visitor 属性是这个插件的主要访问者，且其中的每个函数接收2个参数：path 和 stat。访问者是一个用于 AST 遍历的跨语言的模式。简单的说它们就是一个对象，定义了用于在一个树状结构中获取具体节点的方法。
我们的需求是将let转换成var,那么我们需要添加一个VariableDeclaration访问者方法
function letToVar(babel) {
const { types: t, template } = babel;
const visitor = {
VariableDeclaration(path) {
if(path.get('kind').node!='let')return;
path.node.kind='var';
}
};
return {visitor};
}
module.exports = letToVar;
复制代码我们可以通过path.get()方法获取到kind,并判断他是不是为let，如果是就将其改为var，以实现我们的需求。
下面我们可以运行看一下效果是否符合我们的预期。
新建.eslintrc文件
我们可以直接在此文件中引入我们的babel-letToVar.js文件
{
"plugins": [ "./babel-letToVar.js"]
}
复制代码运行并查看效果
我们可以在终端运行下面命令，将inedx.js文件编译后输出到dest.js文件中。
$ babel index.js --out-file dest.js
复制代码下图是运行效果，可以看到已经实现了我们的需求。
总结
本文演示的只是一个简单的babel插件的开发，我们在转换的过程中拿到代码的AST结构后，就可以随心所欲的对代码进行增加、删除、修改。我们还可以通过编写babel插件实现更多的功能，比如删除代码中所有console.log等。
作者简介
卓月，铜板街前端开发工程师，2018年3月加入团队，目前主要负责自营端 H5 项目开发。