前端开发中的AST抽象语法树简介(未完成 标题待确定)
AST简介
在平时的开发中,经常会遇到对我们写的JavaScript代码进行检查或改动的工具,例如ESLint会检查代码中的语法错误;Prettier会修改代码的格式;打包工具会将不同文件中的代码打包在一起等等。这些工具都对JavaScript代码本身进行了解析和修改。这些工具是如何实现对代码本身的解析呢?这就要用到一种叫做AST抽象语法树的技术。
抽象语法树(Abstract Syntax Tree, 缩写为AST),是将源代码抽象成一种树状结构,树上的每个节点表示源码中的一种语法,包括标识符,字面量,表达式,语句,模块等等。将代码形成抽象语法树AST之后,还可以通过这棵树还原成代码。在AST的形成过程中会丢弃注释和空白符等无意义的内容。
将源代码抽象成AST需要两个步骤:1.词法分析,是扫描源码并将其中的内容标识为以一个一个的token数组。2.语法分析,是将词法分析的token数组转化为树状的形式,也就形成了抽象语法树。下面我们分别看一下每个步骤。
词法分析
语法分析
AST的应用(这里试一下例子?)
具体语法树CST
总结?
这属于编译原理的内容
参考
- 深入理解AST-带你揭秘前端工程的幕后魔法
https://juejin.cn/post/7405239837939548160 - AST 抽象语法树知识点
https://mp.weixin.qq.com/s/KaIaCjRGC55UB6px15M1kw - CST vs AST 以及 biome 和 Oxc 各自的选择理由
https://juejin.cn/post/7504168956594683943