es6/7/8的出现，给我们带来了很多方便，但是浏览器并不怎么支持，目前chrome应该是支持率最高的，所以为了兼容我们只能把代码转成es5，这应该算是我们最初使用babel的一个缘由，随着业务的开发，我们会有很多自己定制化的需求，单纯的bebel并不能解决我们所有的问题，所以babel插件应用而来，本文将会采用较为通俗的语言来描述如何快速写一个babel插件。

一、babel的作用

babel的作用其实就是一个转换器，把我们的代码转成浏览器可以运行的代码，类似于加工厂的概念。解析代码都是一个文件一个文件的处理，把代码读出来，然后经过处理，再输出，在处理的过程中每个文件的代码其实就是个大的字符串。但是我们要把有些语法修改，比如let定义变量改成var定义，很明显用字符串替换是不现实的，这里babel是把代码转成ast语法树，然后经过一系列操作之后再转成字符串输出，

二、ast分析

那么什么是ast语法树呢？
比如代码var a = 12对应的就是下面的ast语法树，是不是很懵？就这么简单的代码弄出这么多东西

image.png

image.png

这句VariableDeclaration字面意思就是变量声名，是不是跟我们之前的分析对应上了，至于接下来为啥又有个declarations数组，也很好理解，我们声明变量是不是可以用逗号隔开同时写多个，就像var a = 12, b = 16;，而他们在同一条声明语句中，所以就用数组来表示了。再看具体的一个

image.png

type

这里我们把每个花括号叫做一个节点，每个节点代表了代码中的一部分，变量名，然后是所赋的值，type表示了每一块节点所表示的类型，那么这些类型有那些呢，babel type这里有详细介绍，当然有很多种类型，这里也无法给大家一一讲解（我也不知道所有的），但是我们需要知道的只是我们要改变的代码是什么类型的节点，介绍个网址 AST explorer，在这个页面中我们只需要把代码写进去，就会展示出代码的ast语法树，上面截图就是来自于这个网站。

三、写插件

基础的东西讲了写，下面说下具体如何写插件。

插件格式

image.png

一个简单的插件

我们先来一个简单的插件，要求是把所有定义变量名为a的换成是b
首先我们要找到定义变量的地方，然后判断变量名是不是a，如果是就把它替换成b，思路就是这样。开始动手，首先把这一句放到 AST explorer这个网站中，鼠标选中这一句代码，右侧就会展示出这句代码转成ast的样子

image.png

visitor: {
    VariableDeclarator: (path, state) => {
         //code
    }
}

然后我们要判断他的变量名是不是a，可以从ast中看到VariableDeclarator的id属性就是变量名部分，所以我们只要判断id的name属性是不是a就可以了

//访问的是当前节点，所以操作对象是path.node
if(path.node.id.name === 'a'){
    //code
}

有人可能会想这里是不是直接path.node.id.name = 'b'就可以了，如果你是操作object，那你就对了，不过这里是ast语法树，所以想改变某个值，就是用对应的ast来替换，所以我们要把id是a的ast换成b的ast，那么b的ast怎么创建呢？很简单，最外层的函数参数我们引入了types，就是用这个来构建，替换的类型是个Identifier

image.png

module.exports = function(babel){
    let t = babel.types;
    return {
        visitor: {
            VariableDeclarator(path, state) {
                if(path.node.id.name == 'a'){
                    path.node.id = t.Identifier('b')
                }
            }
            }
      }
}

所以我们写插件的时候只需要以下几个步骤就可以完成：
1.确认我们要修改的节点类型（把代码复制到ast explorer 中，一一对应）
2.找到修改的属性是哪个（这里我们修改id属性）
3.根据旧的ast构建新的ast语句并替换（把b构建成ast语句替换原来的属性）

构建ast

这里的一个难点就是如何构建ast，代码有很多种类型，我们要修改就需要构建各种各样类型的ast，这里我们结合AST explorer和babel type来快速构建，首先你要知道我们要构建的ast是什么样的，所以把代码放到AST explorer中，我们就可以在右侧看到它的ast树，然后再根据节点类型，参考babel type的使用方法一层一层的构建。
下面举个例子：

image.png

image.png

image.png

image.png

t.objectExpression([t.objectProperty(
            t.identifier('name'),
            t.stringLiteral('Steven'),
            false,
            false,
            null
        )])

连起来就是

 t.variableDeclaration('let', [t.variableDeclarator(t.identifier('info'), t.objectExpression([t.objectProperty(
            t.identifier('name'),
            t.stringLiteral('Steven'),
            false,
            false,
            null
        )]))])

我们来验证下

image.png

包括之前的把a换成b

image.png

image.png

四、总结

写插件最快的方法就是，对照上面推荐的两个网站一层一层的构建ast，然后做想要的操作。在GitHub上有全面的介绍写插件的各个属性及方法，看这里教程