什么是AST
树是一种主要的数据构造,由根结点和多少颗子树组成的。 依据构造的差别又能够划分为二叉树,trie树,红黑树等等。
本日研讨的对象是AST,笼统语法树,它以树状的情势表现编程言语的语法构造,树上的每一个节点都示意源代码中的一种构造。
经由过程支配这棵树,能够精准的定位到声明、赋值、运算语句,从而完成对代码的剖析、优化、变动等支配。
AST运用场景
- 代码作风,语法的搜检,IDE中的毛病提醒,花样化,自动补全等等
- 优化变动代码,代码紧缩等等
- es6转es5,以及TypeScript、JSX等转化为原生Javascript等等
AST处置惩罚步骤
js中借助于一些库能够把js源码剖析为语法树,比方 Babylon, esprima、acorn、UglifyJS、AST explorer等等,以下所示是一个简朴的示例。
var a = 42;
var b = 5;
ar c = a + b;
申明 一个简朴的ast树示例,对应的json花样以下所示
{
"type": "Program",
"start": 0,
"end": 37,
"body": [
{
"type": "VariableDeclaration",
"start": 0,
"end": 11,
"declarations": [
{
"type": "VariableDeclarator",
"start": 4,
"end": 10,
"id": {
"type": "Identifier",
"start": 4,
"end": 5,
"name": "a"
},
"init": {
"type": "Literal",
"start": 8,
"end": 10,
"value": 42,
"raw": "42"
}
}
],
"kind": "var"
},
{
"type": "VariableDeclaration",
"start": 12,
"end": 22,
"declarations": [
{
"type": "VariableDeclarator",
"start": 16,
"end": 21,
"id": {
"type": "Identifier",
"start": 16,
"end": 17,
"name": "b"
},
"init": {
"type": "Literal",
"start": 20,
"end": 21,
"value": 5,
"raw": "5"
}
}
],
"kind": "var"
},
{
"type": "VariableDeclaration",
"start": 23,
"end": 37,
"declarations": [
{
"type": "VariableDeclarator",
"start": 27,
"end": 36,
"id": {
"type": "Identifier",
"start": 27,
"end": 28,
"name": "c"
},
"init": {
"type": "BinaryExpression",
"start": 31,
"end": 36,
"left": {
"type": "Identifier",
"start": 31,
"end": 32,
"name": "a"
},
"operator": "+",
"right": {
"type": "Identifier",
"start": 35,
"end": 36,
"name": "b"
}
}
}
],
"kind": "var"
}
],
}
经由过程支配剖析出来的ast,能够完成我们AST运用场景中列出的一些运用。
下面针对上面列出的ast树做一些简朴申明:
任何一颗ast树根节点的范例都是Program,start和end纪录了字符的位置,body示意顺序体,其内部是三个简朴的变量声明,每一个变量声明中纪录了标示符以及字面量的值。末了一个变量c中init是一个BinaryExpression(二元运算表达),纪录的不是字面值,而是引用到的标示符和支配符。想要完成运用场景中举的示例,大抵就是遍历,修正,删除,挪动这棵树上的节点,末了遍历处置惩罚后ast天生终究代码。
webpack和ast
//compile.js
this.hooks.make.callAsync(compilation, err => {});
----
//NormalModules.js
runLoaders(
{
resource: this.resource,
loaders: this.loaders,
context: loaderContext,
readResource: fs.readFile.bind(fs)
},
(err, result) => {
this._source = this.createSource(
this.binary ? asBuffer(source) : asString(source),
resourceBuffer,
sourceMap
);
return callback();
}
);
----------------------------------
//Parse.js
const acorn = require("acorn-dynamic-import").default;
ast = acorn.parse(code, parserOptions);
if (this.hooks.program.call(ast, comments) === undefined) {
this.detectStrictMode(ast.body);
this.prewalkStatements(ast.body);
this.walkStatements(ast.body);
}
申明 上面是webpack源码中摘取的和ast处置惩罚有关的上下文症结片断
在webpack实行流程中,make是一个主要的阶段,在一个新的 Compilation 建立终了后,即将从 Entry 最先读取文件,依据文件范例和设置的 Loader 对文件举行编译,将loader处置惩罚后的文件经由过程acorn笼统成笼统语法树AST,然后遍历AST,递归剖析构建该模块的一切依靠。
总结
发明ast水很深,日常平凡打仗的也比较少, 本日算是个入门了解下,作为明白webpack源码前的铺垫。
参考源码
webpack: “4.4.1”
webpack-cli: “2.0.13”
参考文档
https://github.com/acornjs/acorn
https://zh.wikipedia.org/wiki…
https://www.sitepoint.com/und…