ast抽象语法树_【编译技术】：AST——基础的基础

你的名字 2023-01-10 10:08 165阅读 0赞

![b6edb098e852ed64419de11b26178769.png][]

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

**1. AST 是什么？**

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

例如：

var a = 3;a + 5

AST：

![2143a23bebdd22ef62c2ff5c72e0bc6b.png][]

**2. AST 有什么用途？**

AST 用途有很多：

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

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

**3. 基本编译过程？**

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

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

![bebc7d7e062f922e0ee70900fa65d7c0.png][]

**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：生成

![bdeab6919759ca5364d71084b3c58cf8.png][]

**参考资料：**

> 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

![b93fd163a077ce3e4537c55c705dab1a.png][]

--------------------

![3855a8b59cc1de04d57ec17aebdcc607.png][]

[b6edb098e852ed64419de11b26178769.png]: /images/20221119/e90c1cae092f4c85ab51ed4a7ac5d0cb.png
[2143a23bebdd22ef62c2ff5c72e0bc6b.png]: /images/20221119/e3e6e9c536db4da0b6209ffd7e68524c.png
[bebc7d7e062f922e0ee70900fa65d7c0.png]: /images/20221119/f0edc9abf0d84d1fb9854ebdefea7c69.png
[bdeab6919759ca5364d71084b3c58cf8.png]: /images/20221119/93add91f826140c9980a9405ed9295aa.png
[b93fd163a077ce3e4537c55c705dab1a.png]: /images/20221119/90dbd8fb55854688a5b79656d512c02b.png
[3855a8b59cc1de04d57ec17aebdcc607.png]: /images/20221119/c0d7d7f4116c417f8845d0cdfeac264d.png