【编译技术】：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