ast简介
概念
抽象语法树(Abstract Syntax Tree,AST)
是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构,树上的每个节点都表示源代码中的一种结构。之所以说语法是“抽象”的,是因为这里的语法并不会表示出真实语法中出现的每个细节。
用途
优化变更代码,改变代码结构达到想要的结构(webpack
等),代码语法、风格的检查(eslint
),代码的格式化,代码的高亮,代码错误提示,代码自动补全(IDE
)等等。
如何转换
可通过一些优秀的 javascript Parser
解析器,来实现源码转换为语法树,更改语法树,生成新的语法树。
源码->语法树
一般浏览器会把 js
源码通过解析器转化为抽象语法树,再进一步转化为字节码或直接生成机器码。
每一个 js
引擎都会有自己的抽象语法树格式,chrome
的 v8
引擎,firefox
的 SpiderMonkey
引擎等等,业界标准为:AST 对象文档,中文类似讲解
在线解析点这里
常用的 parser
有:esprima,traceur
,acorn
( webpack
使用),shift
遍历更新语法树
常用的 parser
为:estraverse
语法树->新的源码
常用的 parser
为:escodegen
使用 esprima
, estraverse
, escodegen
三板斧可完成源码编译解析,另有包 recast 可完成这一系列操作。
实例
箭头函数转换成普通函数
1 | const esprima = require('esprima'); |
babel 插件
待补充 参考
vue template 模板解析 AST
待补充 参考 参考 2