【编译技术】：AST——基础的基础

目录
1. AST 是什么？
2. AST 有什么用途？
3. 基本编译过程？
4. 有哪些主流 AST 工具？

1. AST 是什么？

在计算机科学中，抽象语法树（abstract syntax tree 或者缩写为 *AST*），或者语法树（*syntax tree*），是源代码的抽象语法结构的树状表现形式，这里特指编程语言的源代码。树上的每个节点都表示源代码中的一种结构。之所以说语法是「抽象」的，是因为这里的语法并不会表示出真实语法中出现的每个细节。

例如：

var a = 3;
a + 5

AST：

2. AST 有什么用途？

AST 用途有很多：

代码转换（例：Babel）
语法检查（例：JSLint）、风格检查（例：JSHint）；
IDE 的错误提示、格式化、高亮、自动补全等（例：IDEA、WebStorm）；
混淆、优化、压缩、打包（例：Webpack、Rollup）
语言扩展（例：TypeScript、JSX、CoffeeScript）
CSS 预处理器
...等等

这些工具都建立在 AST 的基础之上。

3. 基本编译过程？

大多数编译器主要来说分为三个阶段：

解析（Parsing）：将原始代码转换成 AST。
转换（Transformation）：分析、修改 AST。
代码生成（Code Generation）：根据转换后的 AST，生成代码。

4. 有哪些主流 AST 工具？

有很多，下面是几个知名度比较高的...

esprima
- Esprima (esprima.org, BSD license) is a high performance, standard-compliant ECMAScript parser written in ECMAScript (also popularly known as JavaScript).
espree
- Espree started out as a fork of Esprima v1.2.2, the last stable published released of Esprima before work on ECMAScript 6 began. Espree is now built on top of Acorn, which has a modular architecture that allows extension of core functionality. The goal of Espree is to produce output that is similar to Esprima with a similar API so that it can be used in place of Esprima.
ECMAScript
- estraverse
  - Estraverse (estraverse) is ECMAScript traversal functions from esmangle project.
- escodegen
  - Escodegen (escodegen) is an ECMAScript (also popularly known as JavaScript) code generator from Mozilla's Parser API AST.
UglifyJS
- UglifyJS is a JavaScript parser, minifier, compressor and beautifier toolkit.
acorn
- A tiny, fast JavaScript parser, written completely in JavaScript.
babel
- @babel/parser：解析
  - The Babel parser (previously Babylon) is a JavaScript parser used in Babel.
- @babel/traverse：转换
- @babel/generator：生成

参考资料：

Understanding ASTs by Building Your Own Babel Plugin： https://www.sitepoint.com/understanding-asts-building-babel-plugin/ the-super-tiny-compiler： https://github.com/jamiebuilds/the-super-tiny-compiler LangSandbox： https://github.com/ftomassetti/LangSandbox Ruslan's Blog： https://ruslanspivak.com/archives.html

工具箱：

可视化 AST 工具： https://astexplorer.net/ ECMAScript Tooling： https://github.com/estools

JS 引擎：

SpiderMonkey: The Mozilla JavaScript runtime https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey

AST 规范：

The ESTree Spec： https://github.com/estree/estree

AST 解析器：

UglifyJS： https://github.com/mishoo/UglifyJS2 acorn： https://github.com/acornjs/acorn esprima： http://esprima.org/ https://github.com/jquery/esprima espree： https://github.com/eslint/espree @babel/parser： https://github.com/babel/babel/tree/master/packages/babel-parser

Babel 插件：

Babel 插件手册： https://github.com/jamiebuilds/babel-handbook/blob/master/translations/zh-Hans/plugin-handbook.md babel-plugin-hello-world： https://github.com/RReverser/babel-plugin-hello-world