https://astexplorer.net/ 有意思

通过语法树,知道什么是什么。可以窥探编译器的实现。
目前,知道大概,至于具体的使用和开发在有具体的需求再说。

概念

Abstract syntax tree: WIKI

在计算机科学中,抽象语法树(AST)或只是语法树是用编程语言编写的源代码的抽象句法结构的树表示。 树的每个节点表示在源代码中出现的构造。 为什么语法是“抽象的”的呢,因为不代表真实语法中出现的每
个细节。例如,分组括号在树结构中是隐含的,并且类似if-condition-then表达式的句法结构可以通过具有三个分支的单个节点来表示。

和抽象语法树相对的是具体语法树(concrete syntax tree),通常称作分析树(parse tree),通常是在源代码的翻译和编译过程中的解析器构建, 一旦构建,通过随后的处理(例如上下文分析)将附加信息添加到AST。

抽象语法树是由编译器(complier) 在语法分析阶段产生(由 parser 解析生成)。关于 JS 是怎么被解释执行,可以看 V8 的原理。

下面只是纯粹的讲 AST。

标准

SpiderMonkey AST

ESTree

https://github.com/estree/estree
https://github.com/ternjs/acorn

社区版本。

Babel format AST

基于 ESTree,但是有不同之处。

Babylon generates AST according to Babel AST format. It is based on ESTree spec with the following deviations:

应用

babel

先看下 Babel 的原理:

The compiler can be broken down into 3 parts:

  • The parser: babylon (moved to a separate repo and versioned independently)
  • The transformer[s]: All the plugins/presets
    • These all use babel-traverse to traverse through the AST
  • The generator: babel-generator

The flow goes like this:

input string -> babylon parser -> AST -> transformer[s] -> AST -> babel-generator -> output string

先解析为 AST ,再遍历 AST 进行操作(transformer 都是这样做的而已,有其他需要就需要自己来遍历节点做操作),再根据 AST 生成代码。

如果自己想要在 语法树层面做修改的话,可以参照 babel 的模式来做。

Lint 代码检查

Uglify

UglifyJS 提供了一些工具用于分析 JavaScript 代码,包括:

  • parser,把 JavaScript 代码解析成抽象语法树
  • code generator,通过抽象语法树生成代码
  • mangler,混淆 JavaScript 代码
  • scope analyzer,分析变量定义的工具
  • tree walker,遍历树节点
  • tree transformer,改变树节点

代码提示

用来获取上下文环境。

parse 得到 AST 再遍历 AST 得到所有的 name。【我理解的实现】但整个语法树是很大的, 不可能每次输入都遍历语法树, 如何进行优化?

具体还是得看源代码: Codemirror 和 https://github.com/Microsoft/monaco-editor 是怎么实现的。

玩具

一步一步看 AST 的构建过程
预执行
用 JS 实现一门编程语言

文章参考

解决 AST 没有空行的问题

CST

另一个概念: https://github.com/cst/cst