AST 是个啥？

抽象语法树看起来非常高大上。
官方的介绍是：

It is a hierarchical program representation that presents source code structure according to the grammar of a programming language, each AST node corresponds to an item of a source code.

嗯～看起来也是一脸懵逼吧？？？所以我们还是来看下具体的栗子～

image.png
见鬼，就这么一段简单的代码，竟然生成了一堆的结构树。这里只截取了一部分，这很简化
实际上，正真AST每个节点会有更多的信息。但是，这是大体思想。从纯文纯中，我们将得到树形结构的数据。每个条目和树中的节点一一对应。
那怎么从纯文本中得到AST呢？这是所有编译器做的事情，我们只需要了解编译器的词法分析和语法分析就可以知道AST是如何生成。

词法分析（scanner）

它读取我们的代码，然后把它们按照预定的规则合并成一个个的标识 type 。同时，它会移除空白符，注释等。将整个代码将被分割进一个 type 列表（一维数组）。
如下图，将每个单词符号进行拆分，打上 type 标签
image.png

语法分析

语法分析，也解析器。它会将词法分析出来的数组转化成树形的表达形式。同时，验证语法，语法如果有错的话，抛出语法错误。当生成树的时候，解析器会删除一些没必要的标识 type（比如不完整的括号），因此 AST 不是100%与源码匹配的，但是已经能让我们知道如何处理了。说个题外话，解析器100%覆盖所有代码结构生成树叫做CST（具体语法树）。
如下图，AST 没有对 const 做解释，只是用了 VariableDeclarator 做为了类型
image.png

好了大概了解了原理了，那么这么牛逼的东西，有什么用呢？刚好最近项目上有迁移 js 到 ts的需求，让我了解了自动代码重构工具，以及神器JSCodeshift。他有啥用呢？比如说你想要替换掉所有的老掉牙的匿名函数，把他们变成Lambda表达式（箭头函数）。你的代码编辑器很可能没法这么做，因为这并不是简单地查找替换操作。这时候jscodeshift 就登场了。
如果你听过 jscodeshift，你很可能也听过 codemods ，一开始挺这两个词可能很困惑，不过没关系，接下来就解释。jscodeshift 是一个跑 codemods 的工具。codemods 是一段描述 AST 要转化成什么样的代码。

image.png
社区提供了很多的 codemods 你可以保存你需要的，以免手动的修改一坨坨代码https://github.com/facebook/jscodeshift