【刨根问底】为什么需要AST？

为什么需要AST（抽象语法树）

在如今前端项目的任何开发依赖中，我们都可以看到他的增长量是多么的大。我们确实在其中获取到了一些非常好用的工具包括：javascript转译（balbel）、eslint、css预处理器、代码压缩、prettier等。这些是我们不交付生产的JS模块，但是他们确实在我们开发过程中发挥了相当强力的作用。所有这些工具，无论以何种方式，都建立在AST处理之上。

什么是AST？

他是一种层次化的程序表示，根据编程语言的代码呈现源码结构，每个AST节点对应一个源码项。

高级编程语言–》词法分析–》语法分析–》转换为AST树–》语义分析–》立即调用代码生成器和代码优化器进行优化–》生成浏览器可理解的基本代码–》通过代码优化器转换成机器码–》01010111

从上图我们可以看到我们的编译语言过程

首先是从高级语言代码在转换为 经过 词法解析器和语法解析器转化成AST ，这两个步骤在生成AST中起主要作用。

首先第一步，词法分析器，也称为扫描器，他读取字符流（我们的代码）并且使用定责的规则将他们组合成标记。此外，它将删除空格字符、注释等。最后，整个代码字符串将被拆分成一个个标记列表。

第二步，语法分析器，称为分析器，将在词法分析之后获取一个简单的标记列表，并将其转化成树表示，验证语言语法并且在发生这种情况的时候抛出语法错误。

在生成树的时候，一些解析器会省略不必要的标记（比如冗余括号）,因此他们创建的“抽象语法树”—它不一定100%与我们的代码匹配，但是足以知道如何处理它，另一方面，完全覆盖所有代码结构的解析器会生成成为"具体语法树（CST）"的树。

完成上述两个步骤，我们终于得到了AST。

OK，现在我们知道了代码如何变成AST，那么我们继续来讨论现实生活中的用例。

Babel----JS转译器

首先，我们要讨论的第一个用例是代码转译，那显然不得不提到Babel。

Babel不是“支持ES6的工具”？嗯，它是的，但这不仅仅是它的内容。

我们通常将Babel与ES6 7 8 特性的支持联系起来，但实际上，这就是我们经常使用它的原因，但归根结底，Babel只是一组插件，我们还可以将它用于代码压缩、与React相关的语法转换比如（JSX）、Flow插件等。

Babel是一个JS编译器，概括起来讲，它有三个运行代码的阶段：解析阶段、转换阶段、生成阶段。我们给Babel一些JS代码，他会修改并且生成新的代码，它如何修改代码？确切的来说，Babel通过构建AST，然后遍历AST，根据应用的插件对其进行修改，然后从修改的AST中生成新的代码。

正如之前所提到的，Babel使用Babylon，所以，我们首先解析代码，然后遍历AST并翻转所有的变量名，最后一步-生成代码-完毕。正如如我们看到的，第一步 解析和第三步 代码生成阶段看起来很常见，这就是我们每次都会做的事情，所以Babel会照顾他们，因为我们真正感兴趣的唯一事情就是AST转换。

当我们开发Babel插件时，我们只需要描述节点的“访问者”，它会改变我们的AST。

Prettier 代码整齐工具

Prettier格式化我们的代码，他将打破长线，清楚空格，括号等。因此它将代码作为输入，并将修改后的代码作为输出返回。听起来很熟悉了，那么我们来看看他的运行思路。

将代码作为输入，并将修改后的代码作为输出返回。听起来很熟悉了，那么我们来看看他的运行思路。

思路还是一样的，首先获取代码并且生成AST。然后实际上，更漂亮的魔法将会发生，AST将被转换为“中间表示”或者“文档”。在高层次上，AST将使用他们在格式方面如何相互关联的信息进行扩展，例如，函数的参数列表应被视为一组项目，因此如果列表很长并且不适合一行，则将每个参数分成单独的一行，等等。然后，称为“打印机”的主要算法将通过IR并根据整个图片决定如何格式化代码。