关于babel转化后AST语法树的解析

AST语法树 结构：

AST语法树每一层都拥有相同的结构，这样的每一层结构也被叫做 节点（Node）。

一个 AST 可以由单一的节点或是成百上千个节点构成。 它们组合在一起可以描述用于静态分析的程序语法。

单层AST节点示例：

{
  type: "BinaryExpression",
  operator: ...,
  left: {...},
  right: {...}
}

//type是节点的类型，比如"Program"、"FunctionDeclaration"、"ExpressionStatement"等，类型
//有很多种，种节点类型会有一些附加的属性用于进一步描述该节点类型。
//节点类型种类参见：https://blog.csdn.net/weixin_30576827/article/details/94938016

几个重要的包：

babylon  将js代码转化为ast语法树

解析 Babylon

Babylon 是一个解析器，它可以将 JavaScript 字符串转换为对计算机来说更加友好的表现形式，称之为抽象语法树（AST）。

转换 babel-traverse 

babel-traverse 模块允许你浏览、分析和修改抽象语法树（AST）。

生成 babel-generator 

最后，babel-generator 模块用来将转换后的抽象语法树（AST）转换为 JavaScript 字符串。

转换也可以使用recast包  关于recast:英[ˌriːˈkɑːst]  v.改动; 重组; 改写; 重新安排(演员阵容); 改变(演员角色);

JavaScript syntax tree transformer, nondestructive pretty-printer, and automatic source map generator

每个js引擎都有自己的AST语法解析器，比如chrome是v8引擎，node也是v8引擎

关于解析：

Babel是通过 Babylon 实现的。在解析过程中有两个阶段： 词法分析 和 语法分析 ，词法分析阶段把字符串形式的代码转换为 令牌 （tokens）流，令牌类似于AST中节点；而语法分析阶段则会把一个令牌流转换成 AST的形式，同时这个阶段会把令牌中的信息转换成AST的表述结构。

关于转换：

在这个阶段，Babel接受得到AST并通过babel-traverse对其进行深度优先遍历，在此过程中对节点进行添加、更新及移除操作。这部分也是Babel插件介入工作的部分。

关于生成：

将经过转换的AST通过babel-generator再转换成js代码，过程就是深度优先遍历整个AST，然后构建可以表示转换后代码的字符串。

babel中重要的对象Visitor

babel在处理一个节点时，是以访问者的形式获取节点的信息，并进行相关的操作，这种操作是通过visitor对象实现的。

在visitor中定义了处理不同节点的函数。

自定义插件原理：自定义的babel插件实际上是定义一个实例化的visitor对象，来处理一系列的AST节点，进而操作代码。

实例：

visitor: {
    Program: {
        enter(path, state) {
            console.log('start processing this module...');
        },
        exit(path, state) {
            console.log('end processing this module!');
        }
    },
    ImportDeclaration:{
        enter(path, state) {
            console.log('start processing ImportDeclaration...');
            // do something
        },
        exit(path, state) {
            console.log('end processing ImportDeclaration!');
            // do something
        }
    }
}

待完成