终于可以写babel系列的文章了。芜湖～～
到目前为止，我编程道路上的每个阶段都有主动去接触babel，每个阶段也都有不一样的感受。大学的时候，babel与webpack傻傻分不清；工作一年的时候，清醒的知道了babel的作用以及它是怎么运转的。工作2年的时候，很想着去写一些babel插件，于是看了几遍官网、也看了很多文章，结果发现自己还是不会写。这个时候再看其他文章就看不进去了，同时再回过头来看前几个月的状态，也好像能够总结出几点看不进去的原因：
- 自己的理解能力、学习能力确实是有限且不足的，这点要接受事实。
- 内心不坚定。现在的网络这么发达，我们所从事的行业，它的相关内容，90%都可以在网络上搜索到，由于每个人学习的能力不同，侧重点不一样，学习方式也不同，所以你看其他人的文章，有可能会出现看不懂的现象，一正一反的鲜明对比，你的内心就会怕，你越怕，你就越不可能达到自己内心所期待的高度。
- 有些文章的质量确实低，并且care不到细节，这反而会消耗自己。
- 毕业工作以后，外界耗时并且分心的事情确实不少，再加上你知道的越多，不知道的就越多，就导致弹簧压力过大，没办法复原。
那我们如何去破局？走自己的路就好啦，不要跟任何人比，现在不理解，不代表以后不理解。同时呢，我决定写这样的一个专栏，记录一下这个时刻，如果这篇文章能够对其他小伙伴有帮助，那也是荣幸至极。
聊回正题，我们知道babel是一个解析器，作用是将高级语言转换为另一种高级语言。这个过程中，大致分3个步骤，解析 -> 转换 -> 生成。其中，抽象语法树AST是贯穿始终的。因此，想要写一个babel插件，就必然会涉及到AST。这里给大家介绍一个网站，它也是我们今天的主题： AST可视化网站（astexplorer.net/）。
进去以后。界面是这样的：
我们着重来讲解一下，上面这几个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插件，我们下期再见啦，拜拜～～