esprima是什么？他的全称是ECMAScript parsing infrastructure for multipurpose analysis，可以理解它是ECMAScript官方提供的一个解析javascript的工具。

今天我们就从esprima出发，分析javascript AST的生成过程，搞懂AST这个概念。

AST是什么？

AST是abstract syntax tree，三个词对应着三个意义。用树形结构，能表述语法信息的，抽象数据来表述输入的代码。它是高级程序语言在编译过程中的产出。

除了AST(抽象语法树)之外，还有一种类似的数据结构叫做CST具体语法树，concrete syntax tree，也被称为分析树。在常规的编译流程中，是先生成具体语法树，再由CST生成AST。相对于AST，CST包含了整个语句中更多的信息，比如括()、=等、语句表达式标识。

举个例子

var a = (1 + 1) * 2;

AST

Untitled

CST

未命名绘图.png

为什么需要编译？

想想这样一个场景，我写的es6想运行在ie8上。这种情况怎么办？两种办法：

  1. 引入polyfill，在顶层对新的api进行覆盖。但是这解决不了新语法的问题，比如await，...。
  2. 通过编译，改变实际运行的代码。babel or others。

这第二个方法中，就存在对es6的编译。整个流程大抵如下：

Untitled

接下来，让我为你演示从原始代码，到AST的流程。