AST(抽象语法树)
简介
抽象语法树(Abstract Syntax Tree),简称 AST 或 语法树,是源代码结构的一种抽象表示。它以树状的形式表现编程语言的语法结构,树上的每个节点都表示源代码中的一种结构。
演示
在线 AST 转换站点: AST Explorer
应用场景
其实我们每天都在使用它
React
- 将
JSX
语法转为React.createElement
语法
- 将
Vue
- 将模板语法转为
JavaScript代码
- 将模板语法转为
webpack
、Vite
、rollup
- 依赖关系树
- 代码打包
-
loader
TypeScript
- 将
TypeScript
语法转为JavaScript
语法
- 将
Sass
、Less
- 将
Sass
、Less
语法转为CSS
语法
- 将
Babel
- 将 ES6+ 语法的代码转为 ES5 语法
ESLint
、Prettier
- 语法检查、代码格式化
- …
前端工程化、代码层面相关处理
操作AST
的包
- babel
- @babel/parser
- Code 转 AST
- @babel/traverse
- 遍历 AST
- @babel/types
- 判断节点类型和生成新节点
- @babel/generator
- AST 转 Code
- @babel/parser
- acorn
- recast
- esprima
- …