AST

直接进入主题!

源码=》词法分析=〉语法分析=》AST语法树=〉transformation=》new AST语法树=〉生成源码

词法分析：生成tokens(也就是一个数组)阶段，通过遍历的方式，将源码进行最小单元的拆分，tokens也就是一个数组，里面的元素是描述拆结果的对象，大致结构也就是type，value，和起始与结束的位置，这个实现的话，也是比较简单的，遍历代码，将每个字符串和空格 进行分类处理，

token结构

如何去处理code，生成tokens的：【也就是swith - case，分类进行处理的】

语法分析：根据词法分析的结果也就是tokens，来构建AST语法树（这里的算法挺难的）【这里可以用在线转换器看一下https://astexplorer.net/ AST的结构】

其实这里我也是很疑惑的？？？有点难理解，因为token中并没有去描述他们之间的关联，emmm，那么构建ast就应该是从底向上构建二叉树了。

AST生成之后，如何去操作里面的节点，其实也就是对这课树进行遍历， 树的遍历只会进行一次，（因为一般生成的树是十分庞大的，遍历是非常耗时的）

transformation：转化，将一颗树转为新的树，参考es6转es5，（在此阶段进行代码的处理，如lint校验，或者lint插件，代码补全，代码提示，在此阶段实现），

babel的转化器如何实现的。根本还是在于对一颗树做遍历，但是，我们如何去操作这课树呢。

看一下babel的转换器的基本实现，

转换器 基础接受两个参数，一个是已经构造好的AST，另一个是访问器，访问器的实现是一个对象，属性是节点的类型，value仍然是一个转换函数，需要有我们去实现，会得到两个参数，第一个是当前的节点，第二个是父节点。

所以访问器的实现，只需要对这课树做一个深度优先的遍历，在每一次遍历中，去跟进当前节点的type与我们实现的访问器对象走一个映射，然后再去执行我们实现的方法

// babel插件 traverse 【AST转换，并不会返回新的树，而是基于原来的树做更改，其实也很好理解，因为树太庞大了】

在根据转换后的AST生成tokens，根据tokens生成源码

新代码的生成=》根据转换后的AST，再去遍历每一个节点，生成tokens，在根据tokens生成源码

// babel插件 generator 【AST转源码】

可以看一下最简单的实现（所以步骤就是=》源码转AST，AST转换，转换后的AST生成源码

后续实现一下 简易版的eslint。。。。。。。。。。。。。

第一阶段就是对code进行拆分，也就是词法分析阶段，此阶段确定type，value，以及基本属性，在根据词法分析的结果构造AST，然后，就是AST转换了，我们可以在这一步做我们想做的操作【转换是基于之前构造好的AST去change的，并不会生成另一颗新的树】，后面就是根据转换后的AST去生成我们的源码的了，在这阶段，其实也是对树的深度优先的遍历，我们也可以通过转换器去做change

emmm，个人理解，其实，我们如何去转换代码呢？直接字符串替换？code之间是有关联的，那么如何去描述这种关联呢，就使用的树