从零开始写一个babel插件

babel对于一个前端应该并不陌生，在我们随心所欲的使用ESnext的语法的时候，babel为我们默默的做着转换工作。那我们可能会好奇babel到底是怎么做到的呢，接下来我们就从手写一个babel插件入手来一起学习学习。

首先我们要研究一个东西得弄清楚它到底是干什么，引用babel官网的描述：

图一

我们首先思考一下babel要将最新的语法进行转换，肯定是有一套描述语法的数据结构，是的它就是AST(抽象语法树)，看到这玩意是不是有点有头绪了。有了AST，数据结构我们就有了，剩下的就剩匹配转换了。

开始写代码之前我们先来介绍一下babel提供的工具：

1.https://astexplorer.net/ （在线js代码转换为AST）

2.babylon（js转换为AST的库）

3.babel-traverse（AST遍历库）

4.babel-types（包含了构造、验证以及变换 AST 节点的方法）

工欲善其事必先利其器，我们的工具都有了，接下来我们创建一个项目，项目的目录结构如下：

图二

index.js就是我们的插件入口，_test_为单元测试，test.js是我们需要转换的文件。接下来我们一起来看一看index.js文件

图三

我们这个插件主要功能是实现按照配置去除代码中的console，debugger，以及自定义的一个DEBUG的一个调试关键字（用于在指定环境下需要执行的代码）。

我们可以看到这边导出了一个function，function返回的是一个对象，这个对象内部有一个visitor属性，这visitor也是我们最核心的一个属性（AST的访问者），这个访问者是必须要提供的，也可以理解为固定写法。

我们看到导出的function有一个参数t，这个t是干什么的呢？这其实就是我们上面提到的babel-types。它可以让我们更方便的去匹配（if, else, for）这些关键字，从而定位到需要执行我们自己逻辑的代码块。

那visitor内部的这些东西又是什么呢，这个我们就得打开我们上面提到的AST转换网站，将我们需要处理的代码贴进去观察

图四

以debugger为例，我们看到debugger对应的AST里面的key为DebuggerStatement，然后我们在visitor里面也看到了DebuggerStatement，是不是有点眉目了，没错，这个key其实也是做类型匹配的。比如debugger，我们就可以在DebuggerStatement内去处理自己的逻辑，DebuggerStatement的value是一个function，提供有两个参数（path， state）path就是当前配备到的节点上下文，state我们经常的用法是获取babel插件配置的参数。到了这一步，我们回忆我们的需求：根据配置是否去除（debugger, console, 自定义关键字），现在配置能拿到了，接下来就是如何去除，这就得在path上面研究了，查询文档我们可以看到path提供了replaceWith，remove方法（nice），那我们的思路就很清晰了，匹配到关键字，删除就OK了。

接下来修改我们的package.json文件：

图五

npm run babel，可以看到这个插件完美的实现了我们的需求.。对于关键字和console的处理基本大同小异，需要注意的是自定义关键字需要处理eslint校验。最后附上完整代码地址：https://github.com/wangKXX/babel-plugin