ast简介

概念

抽象语法树(Abstract Syntax Tree,AST)是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构,树上的每个节点都表示源代码中的一种结构。之所以说语法是“抽象”的,是因为这里的语法并不会表示出真实语法中出现的每个细节。

用途

优化变更代码,改变代码结构达到想要的结构(webpack 等),代码语法、风格的检查(eslint),代码的格式化,代码的高亮,代码错误提示,代码自动补全(IDE)等等。

如何转换

可通过一些优秀的 javascript Parser 解析器,来实现源码转换为语法树,更改语法树,生成新的语法树。

源码->语法树

一般浏览器会把 js 源码通过解析器转化为抽象语法树,再进一步转化为字节码或直接生成机器码。

每一个 js 引擎都会有自己的抽象语法树格式,chromev8 引擎,firefoxSpiderMonkey 引擎等等,业界标准为:AST 对象文档,中文类似讲解

在线解析点这里

常用的 parser 有:esprimatraceuracorn( webpack 使用),shift

遍历更新语法树

常用的 parser 为:estraverse

语法树->新的源码

常用的 parser 为:escodegen

使用 esprima, estraverse, escodegen 三板斧可完成源码编译解析,另有包 recast 可完成这一系列操作。

实例

箭头函数转换成普通函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const esprima = require('esprima');
const estraverse = require('estraverse');
const escodegen = require('escodegen');

let code = `var a = b=>{console.log(123);}`;
let tree = esprima.parseScript(code);
estraverse.traverse(tree, {
leave(node) {
if (node.type === 'ArrowFunctionExpression') {
node.type = 'FunctionDeclaration';
}
},
});
let r = escodegen.generate(tree);
console.log(r); // var a = function(b){console.log(123);}

babel 插件

待补充 参考

vue template 模板解析 AST

待补充 参考 参考 2

---- 本文结束,感谢您的阅读 ----