java抽象语法树(ast),【你应该了解的】抽象语法树AST

团队：skFeTeam  本文作者：李世伟

作为前端程序员，webpack，rollup，babel，eslint这些是不是经常用到？他们是打包工具，代码编译工具，语法检查工具。他们是如何实现的呢？本文介绍的抽象语法树，就是他们用到的技术，是不是应该了解一下呢？

本文没有晦涩难懂的理论，也没有大段大段的代码，完全从零开始，小白阅读也无任何障碍。通过本文的阅读，您将会了解AST的基本原理以及使用方法。

前言

什么是抽象语法树？

AST(Abstract Syntax Tree)是源代码的抽象语法结构树状表现形式。下面这张图示意了一段JavaScript代码的抽象语法树的表现形式。

抽象语法树有什么用呢？

IDE的错误提示、代码格式化、代码高亮、代码自动补全等

JSLint、JSHint、ESLint对代码错误或风格的检查等

webpack、rollup进行代码打包等

Babel 转换 ES6 到 ES5 语法

注入代码统计单元测试覆盖率

目录

1.AST解析器

2.AST in Babel

3.Demo with esprima

4.思考题

1.AST解析器

1.1 JS Parser解析器

AST是如何生成的？

能够将JavaScript源码转化为抽象语法树(AST)的工具叫做JS Parser解析器。

JS Parser的解析过程包括两部分

词法分析(Lexical Analysis)：将整个代码字符串分割成最小语法单元数组

语法分析(Syntax Analysis)：在分词基础上建立分析语法单元之间的关系

常见的AST parser

早期有uglifyjs和esprima

Espree，基于esprima，用于eslint

Acorn，号称是相对于esprima性能更优，体积更小

Babylon，出自acorn，用于babel

Babel-eslint，babel团队维护，用于配合使用ESLint

1.2 词法分析(Lexical Analysis)

语法单元是被解析语法当中具备实际意义的最小单元，简单的来理解就是自然语言中的词语。

Javascript 代码中的语法单元主要包括以下这么几种：

关键字：例如 var、let、const等

标识符：没有被引号括起来的连续字符，可能是一个变量，也可能是 if、else 这些关键字，又或者是 true、false 这些内置常量

运算符： +、-、 *、/ 等

数字：像十六进制，十进制，八进制以及科学表达式等

字符串：因为对计算机而言，字符串的内容会参与计算或显示

空格：连续的空格，换行，缩进等

注释：行注释或块注释都是一个不可拆分的最小语法单元

其他：大括号、小括号、分号、冒号等

1.3 语法分析(Syntax Analysis)

组合分词的结果，确定词语之间的关系，确定词语最终的表达含义，生成抽象语法树。

1.4 示例

以赋值语句为例，使用esprima来解析：

var a = 1;

复制代码

词法分析结果如下，可以看到，分词的结果是一个数组，每一个元素都是一个最小的语法单元：

[

{

"type": "Keyword",

"value": "var"

},

{

"type": "Identifier",

"value": "a"

},

{

"type": "Punctuator",

"value": "="

},

{

"type": "Numeric",

"value": "1"

},

{

"type": "Punctuator",

"value": ";"

}

]

复制代码

语法分析结果如下，把分词的结果按照相互的关系组成一个树形结构：

{

"type": "Program",

"body": [

{

"type": "VariableDeclaration",

"declarations": [

{

"type": "VariableDeclarator",

"id": {

"type": "Identifier",

"name": "a"

},

"init": {

"type": "Literal",

"value": 1,

"raw": "1"

}

}

],

"kind": "var"

}

],

"sourceType": "script"

}

复制代码

1.5 工具网站

经典的JavaScript抽象语法树解析器，网站提供的功能也非常丰富

可以在线查看分词和抽象语法树

<