读懂ast语法树

第一眼看到ast语法树我是懵逼的，这是啥?我在干嘛?我是谁?
让我们从最简单的开始

const a = 100

转成语法树后：

看得一脸懵逼吧，好巧哦，我也是。首先画重点记住两个网站： 第一个：javascript代码转ast语法树 第二个：babel-types文档

现在开始敲黑板了，首先我们看到这颗水灵灵的ast语法树最外层树结构 type 是 variableDeclaration。
然后打开2号链接。查询一下variableDeclaration是个啥，注意参数，第一个参数是 kind 用来定义这个变量声明是用let 、const、var 来声明的。
再看第二个参数 declarations 一个数组类型的野生 VariableDeclarator 。

现在我们来看看 VariableDeclarator 又是个啥，还是老样子查一下户口， 我们可以看到两个参数，一个是id,一个是init。这两个又是啥呢，先看下下面的第二张图，就可以发现原来VariableDeclarator代表a=100，再看下面第三张图，id.name = a ,最后看图四 init.value = 100.

好吧，作为能动手就不逼逼的码农，把人家拆开了不整回去这是人干的事吗？这个时候请上babel-types就派上用场了

// const a = 100
ast 如何写呢
let t = require('@babel/types');
//按照上面的思路进行
t.variableDeclaration('const',[
  // t.VariableDeclarator('a','100') ?  这样写肯定是错的，不要问啥，问就是不知道。那咋写呢？
  // 注意观察 id 的type 是 Identifier  init 的type 是 NumberLiteral ，我有一个大胆的想法
  t.VariableDeclarator(
  	t.Identifier('a'),
  	t.NumericLiteral(100)
  )
])

写完收工，下一篇  介绍babel-code 、微信小程序js文件代码结构了。

babel ast语法树（微信小程序转react）

读懂ast语法树