AST抽象语法树

如图所示，AST主要作用有三步：

    1.解析(PARSE)：将代码字符串解析成抽象语法树。

    2.转换(TRANSFORM)：对抽象语法树进行转换操作。

    3.生成(GENERATE): 根据变换后的抽象语法树再生成代码字符串。

看到上面，我们不仅纳闷了，这不是什么都没做吗。我们知道javascript程序一般是由一系列的字符组成的，每一个字符都有一些含义，比如我们可以使用匹配的字符([], {}, ()), 或一些其他成对的字符('', "")和代码缩进让程序解析更加简单，但是对计算机并不适用，这些字符在内存中仅仅是个数值，但是计算机并不知道一个程序内部有多少个变量这些高级问题，
这个时候我们需要寻找一些能让计算机理解的方式，这个时候，抽象语法树诞生了。

我们通过上面知道，Babel的工作的第一步是 解析操作，将代码字符串解析成抽象语法树，那么抽象语法树就是在解析过程中产生的。其实解析又可以分成两个步骤：
               1.： 将整个代码字符串分割成 语法单元数组。
               2.：在分词结果的基础之上分析 语法单元之间的关系。

那么JS代码中有哪些语法单元呢？大致有下面这些：
              1. 空白。JS中连续的空格，换行，缩进等这些如果不在字符串里面，就没有任何实际的意义，因此我们可以将连续的空白组合在一起作为一个语法单元。
              2. 注释。行注释或块注释，对于编写人或维护人注释是有意义的，但是对于计算机来说知道这是个注释就可以了，并不关心注释的含义，因此我们可以将注释理解为一个不可拆分的语法单元。
              3. 字符串。对计算机而言，字符串的内容会参与计算或显示，因此有可以为一个语法单元。
              4. 数字。JS中有16，10，8进制以及科学表达式等语法，因此数字也可以理解一个语法单元。
            5. 标识符。没有被引号括起来的连续字符，可包含字母 _, $ 及数字，或 true, false等这些内置常量，或 if，return，function等这些关键字。
              6. 运算符： +, -, *, /, >, < 等。
              7，还有一些其他的，比如括号，中括号，大括号，分号，冒号，点等等。

是不是又有点晕，上图片：

 我们可以发现，程序代码本身可以被映射成为一棵语法树，而通过操纵语法树，我们能够精准的获得程序代码中的某个节点。例如声明语句，赋值语句，而这是用正则表达式所不能准确体现的地方。JavaScript的语法解析器Espsrima提供了一个在线解析的工具，你可以借助于这个工具，将JavaScript代码解析为一个JSON文件表示的树状结构。 

AST的作用非常多，比如编译器，IDE，压缩优化代码等；再javascript中，虽然我们不会跟AST打交道，却会经常用到它。