手写babel插件-第一讲

终于可以写babel系列的文章了。芜湖～～

到目前为止，我编程道路上的每个阶段都有主动去接触babel，每个阶段也都有不一样的感受。大学的时候，babel与webpack傻傻分不清；工作一年的时候，清醒的知道了babel的作用以及它是怎么运转的。工作2年的时候，很想着去写一些babel插件，于是看了几遍官网、也看了很多文章，结果发现自己还是不会写。这个时候再看其他文章就看不进去了，同时再回过头来看前几个月的状态，也好像能够总结出几点看不进去的原因：

• 自己的理解能力、学习能力确实是有限且不足的，这点要接受事实。
• 内心不坚定。现在的网络这么发达，我们所从事的行业，它的相关内容，90%都可以在网络上搜索到，由于每个人学习的能力不同，侧重点不一样，学习方式也不同，所以你看其他人的文章，有可能会出现看不懂的现象，一正一反的鲜明对比，你的内心就会怕，你越怕，你就越不可能达到自己内心所期待的高度。
• 有些文章的质量确实低，并且care不到细节，这反而会消耗自己。
• 毕业工作以后，外界耗时并且分心的事情确实不少，再加上你知道的越多，不知道的就越多，就导致弹簧压力过大，没办法复原。

那我们如何去破局？走自己的路就好啦，不要跟任何人比，现在不理解，不代表以后不理解。同时呢，我决定写这样的一个专栏，记录一下这个时刻，如果这篇文章能够对其他小伙伴有帮助，那也是荣幸至极。

聊回正题，我们知道babel是一个解析器，作用是将高级语言转换为另一种高级语言。这个过程中，大致分3个步骤，解析 -> 转换 -> 生成。其中，抽象语法树AST是贯穿始终的。因此，想要写一个babel插件，就必然会涉及到AST。这里给大家介绍一个网站，它也是我们今天的主题：AST可视化网站。

进去以后。界面是这样的：

我们着重来讲解一下，上面这几个tab页签都是干啥用的。

布局介绍

首先网站是左右布局的，左侧源代码，右侧是 源代码根据解析器生成的内容。左侧代码默认是JavaScript（当然你可以选择使用其他语言），右侧的展示形式分为Tree、JSON。想要哪个展现形式，由用户自己决定。

Snippet

支持你新建代码片段，保存代码。

JavaScript（默认的）

支持你切换语言，比如你切换成css，那么它就会将css转换为抽象语法树并返回给用户。

解析器

当你选择了特定的语言后，解析器就会做出相应的改变，因为针对某种语言的解析器有时会有很多，所以这个网站的这个选项，支持你选择不同种类的解析器。比如当你选择了JS语言，那么你就会看到很多的解析器：

Transform

这个选项可以理解为 提供了一个在线写插件的地方。它也有很多的选项，因为能够将JavaScript转换为AST的工具有很多，所以你会看到eslint、babel、jscodeshift等等（因为他们都可以将JS转换为AST），因为我们这篇文章主要讲解的是如何写babel插件，所以这里我们选择babel即可。

选中之后，界面会是这样：

此时整个网站被分为了4个区域：

• 左上区域是源代码。
• 右上区域是源代码对应的AST。
• 左下是可以写babel插件的地方。
• 右下区域是源代码经过babel处理后的结果。

最后

那咱们第一讲到这里就结束啦，字数也很多啦，那下一篇我们会来讲解，关于AST的一些基本内容，以及如何去手写一个最简单的babel插件，对啦，本人最近建立了一个交流群，这个交流群不仅局限于前端，你想要探讨任何一项技术都可以，因为是刚刚建立，所以群里会比较清净，想要加入群聊的，欢迎添加我的微信：18845097791。

最后，祝大家新年快乐，幸福满满，我们下期再见～～