（给前端大全加星标，晋升前端技能）
作者：刘羽冲
segmentfault.com/a/1190000016231512
形象语法树（AST），是一个十分根底而重要的知识点，但国内的文档却简直一片空白。
本文将带大家从底层理解AST,并且通过公布一个小型前端工具，来带大家理解AST的弱小性能
Javascript就像一台精妙运作的机器，咱们能够用它来实现所有天马行空的构思。
咱们对javascript生态一目了然，却常漠视javascript自身。这台机器，到底是哪些零部件在反对着它运行？
AST在日常业务中兴许很难波及到，但当你不止于想做一个工程师，而想做工程师的工程师，写出vue、react之类的大型框架，或相似webpack、vue-cli前端自动化的工具，或者有批量批改源码的工程需要，那你必须懂得AST。AST的能力非常弱小，且能帮你真正吃透javascript的语言精华。
事实上，在javascript世界中，你能够认为形象语法树(AST)是最底层。 再往下，就是对于转换和编译的“黑魔法”畛域了。
人生第一次拆解Javascript
小时候，当咱们拿到一个螺丝刀和一台机器，人生中最令人思念的梦幻时刻便开始了：
咱们把机器，拆成一个一个小整机，一个个齿轮与螺钉，用奇妙的机械原理连接在一起…
当咱们把它从新照不同的形式组装起来，这时，机器从新又跑动了起来——世界在你眼中如获新生。
通过形象语法树解析，咱们能够像童年时拆解玩具一样，透视Javascript这台机器的运行，并且从新按着你的志愿来组装。
当初，咱们拆解一个简略的add函数
function add(a, b) {
return a + b
}首先，咱们拿到的这个语法块，是一个FunctionDeclaration(函数定义)对象。
使劲拆开，它成了三块：
- 一个id，就是它的名字，即add
- 两个params，就是它的参数，即[a, b]
- 一块body，也就是大括号内的一堆货色
add没方法持续拆下去了，它是一个最根底Identifier（标记）对象，用来作为函数的惟一标记，就像人的姓名一样。
{
name: 'add'
type: 'identifier'
...
}params持续拆下去，其实是两个Identifier组成的数组。之后也没方法拆下去了。
[
{
name: 'a'
type: 'identifier'
...
},
{
name: 'b'
type: 'identifier'
...
}
]接下来，咱们持续拆开body
咱们发现，body其实是一个BlockStatement（块状域）对象，用来示意是{return a + b}
关上Blockstatement，外面藏着一个ReturnStatement（Return域）对象，用来示意return a + b
持续关上ReturnStatement,外面是一个BinaryExpression(二项式)对象，用来示意a + b
持续关上BinaryExpression，它成了三局部，left，operator，right
- operator 即+
- left 外面装的，是Identifier对象 a
- right 外面装的，是Identifer对象 b
就这样，咱们把一个简略的add函数拆解结束，用图示意就是
看！形象语法树(Abstract Syntax Tree)，确实是一种规范的树结构。
那么，下面咱们提到的Identifier、Blockstatement、ReturnStatement、BinaryExpression， 这一个个小部件的说明书去哪查？
送给你的AST螺丝刀：recast
输出命令：
npm i recast -S你即可取得一把操纵语法树的螺丝刀
接下来，你能够在任意js文件下操纵这把螺丝刀，咱们新建一个parse.js示意：
parse.js
// 给你一把"螺丝刀"——recastconst recast = require("recast");// 你的"机器"——一段代码// 咱们应用了很奇怪格局的代码，想测试是否能维持代码构造const code =
`
function add(a, b) {
return a +
// 有什么奇怪的货色混进来了
b
}
`// 用螺丝刀解析机器const ast = recast.parse(code);// ast能够解决很微小的代码文件// 但咱们当初只须要代码块的第一个body，即add函数const add = ast.program.body[0]
console.log(add)输出node parse.js你能够查看到add函数的构造，与之前所述统一，通过AST对象文档可查到它的具体属性：
FunctionDeclaration{
type: 'FunctionDeclaration',
id: ...
params: ...
body: ...
}你也能够持续应用console.log透视它的更内层，如：
console.log(add.params[0])
console.log(add.body.body[0].argument.left)recast.types.builders 制作模具
一个机器，你只会拆开重装，不算本事。
拆开了，还能改装，才算上得了台面。
recast.types.builders外面提供了不少“模具”，让你能够轻松地拼接成新的机器。
最简略的例子，咱们想把之前的function add(a, b){…}申明，改成匿名函数式申明const add = function(a ,b){…}
如何改装？
第一步，咱们创立一个VariableDeclaration变量申明对象，申明头为const， 内容为一个行将创立的VariableDeclarator对象。
第二步，创立一个VariableDeclarator，搁置add.id在右边， 左边是将创立的FunctionDeclaration对象
第三步，咱们创立一个FunctionDeclaration，如前所述的三个组件，id params body中，因为是匿名函数id设为空，params应用add.params，body应用add.body。
这样，就创立好了const add = function(){}的AST对象。
在之前的parse.js代码之后，退出以下代码
// 引入变量申明，变量符号，函数申明三种“模具”const {variableDeclaration, variableDeclarator, functionExpression} = recast.types.builders
// 将筹备好的组件置入模具，并组装回原来的ast对象。
ast.program.body[0] = variableDeclaration("const", [
variableDeclarator(add.id, functionExpression(
null, // Anonymize the function expression.
add.params,
add.body
))]);//将AST对象从新转回能够浏览的代码const output = recast.print(ast).code;
console.log(output)能够看到，咱们打印出了
const add = function(a, b) {
return a +
// 有什么奇怪的货色混进来了
b};最初一行
const output = recast.print(ast).code;其实是recast.parse的逆向过程，具体公式为
recast.print(recast.parse(source)).code === source打印进去还保留着“原装”的函数内容，连正文都没有变。
咱们其实也能够打印出丑化格局的代码段：
const output = recast.prettyPrint(ast, { tabWidth: 2 }).code输入为
const add = function(a, b) {
return a + b;
};当初，你是不是曾经产生了“我能够通过AST树生成任何js代码”的幻觉？我郑重通知你，这不是幻觉。
实战进阶：命令行批改js文件
除了parse/print/builder以外，Recast的三项次要性能：
- run: 通过命令行读取js文件，并转化成ast以供解决。
- tnt： 通过assert()和check()，能够验证ast对象的类型。
- visit: 遍历ast树，获取无效的AST对象并进行更改。
咱们通过一个系列小务来学习全副的recast工具库：
创立一个用来示例文件，假如是demo.js
demo.js
function add(a, b) {
return a + b
}function sub(a, b) {
return a - b
}function commonDivision(a, b) {
while (b !== 0) {
if (a > b) {
a = sub(a, b)
} else {
b = sub(b, a)
}
}
return a
}recast.run —— 命令行文件读取
新建一个名为read.js的文件，写入
read.js
recast.run( function(ast, printSource){
printSource(ast)
})命令行输出
node read demo.js咱们查以看到js文件内容打印在了管制台上。
咱们能够晓得，node read能够读取demo.js文件，并将demo.js内容转化为ast对象。
同时它还提供了一个printSource函数，随时能够将ast的内容转换回源码，以不便调试。
recast.visit —— AST节点遍历
read.js
#!/usr/bin/env nodeconst recast = require('recast')
recast.run(function(ast, printSource) {
recast.visit(ast, {
visitExpressionStatement: function({node}) {
console.log(node)
return false
}
});
});recast.visit将AST对象内的节点进行一一遍历。
留神
- 你想操作函数申明，就应用visitFunctionDelaration遍历，想操作赋值表达式，就应用visitExpressionStatement。 只有在 AST对象文档中定义的对象，在后面加visit，即可遍历。
- 通过node能够取到AST对象
- 每个遍历函数后必须加上return false，或者抉择以下写法，否则报错：
#!/usr/bin/env nodeconst recast = require('recast')
recast.run(function(ast, printSource) {
recast.visit(ast, {
visitExpressionStatement: function(path) {
const node = path.node
printSource(node)
this.traverse(path)
}
})
});调试时，如果你想输入AST对象，能够console.log(node)
如果你想输入AST对象对应的源码，能够printSource(node)
命令行输出node read demo.js进行测试。
#!/usr/bin/env node在所有应用recast.run()的文件顶部都须要退出这一行，它的意义咱们最初再探讨。
TNT —— 判断AST对象类型
TNT，即recast.types.namedTypes，就像它的名字一样火爆，它用来判断AST对象是否为指定的类型。
TNT.Node.assert()，就像在机器里埋好的炸药，当机器不能完整运行时（类型不匹配），就炸毁机器(报错退出)
TNT.Node.check()，则能够判断类型是否统一，并输入False和True
上述Node能够替换成任意AST对象，例如TNT.ExpressionStatement.check(),TNT.FunctionDeclaration.assert()
read.js
#!/usr/bin/env nodeconst recast = require("recast");const TNT = recast.types.namedTypes
recast.run(function(ast, printSource) {
recast.visit(ast, {
visitExpressionStatement: function(path) {
const node = path.value
// 判断是否为ExpressionStatement，正确则输入一行字。
if(TNT.ExpressionStatement.check(node)){
console.log('这是一个ExpressionStatement')
}
this.traverse(path);
}
});
});read.js
#!/usr/bin/env nodeconst recast = require("recast");const TNT = recast.types.namedTypes
recast.run(function(ast, printSource) {
recast.visit(ast, {
visitExpressionStatement: function(path) {
const node = path.node
// 判断是否为ExpressionStatement，正确不输入，谬误则全局报错
TNT.ExpressionStatement.assert(node)
this.traverse(path);
}
});
});命令行输出node read demo.js进行测试。
实战：用AST批改源码，导出全副办法
exportific.js
当初，咱们心愿将demo中的function全副
咱们想让这个文件中的函数改写成可能全副导出的模式，例如
function add (a, b) {
return a + b
}想扭转为
exports.add = (a, b) => {
return a + b
}除了应用fs.read读取文件、正则匹配替换文本、fs.write写入文件这种蠢笨的形式外，咱们能够==用AST优雅地解决问题==。
首先，咱们先用builders凭空实现一个键头函数
exportific.js
#!/usr/bin/env nodeconst recast = require("recast");const {
identifier:id,
expressionStatement,
memberExpression,
assignmentExpression,
arrowFunctionExpression,
blockStatement} = recast.types.builders
recast.run(function(ast, printSource) {
// 一个块级域 {}
console.log('\n\nstep1:')
printSource(blockStatement([]))
// 一个键头函数 ()=>{}
console.log('\n\nstep2:')
printSource(arrowFunctionExpression([],blockStatement([])))
// add赋值为键头函数 add = ()=>{}
console.log('\n\nstep3:')
printSource(assignmentExpression('=',id('add'),arrowFunctionExpression([],blockStatement([]))))
// exports.add赋值为键头函数 exports.add = ()=>{}
console.log('\n\nstep4:')
printSource(expressionStatement(assignmentExpression('=',memberExpression(id('exports'),id('add')),
arrowFunctionExpression([],blockStatement([])))))
});下面写了咱们一步一步推断出exports.add = ()=>{}的过程，从而失去具体的AST构造体。
应用node exportific demo.js运行可查看后果。
接下来，只须要在取得的最终的表达式中，把id(‘add’)替换成遍历失去的函数名，把参数替换成遍历失去的函数参数，把blockStatement([])替换为遍历失去的函数块级作用域，就胜利地改写了所有函数！
另外，咱们须要留神，在commonDivision函数内，援用了sub函数，应改写成exports.sub
exportific.js
#!/usr/bin/env nodeconst recast = require("recast");const {
identifier: id,
expressionStatement,
memberExpression,
assignmentExpression,
arrowFunctionExpression} = recast.types.builders
recast.run(function (ast, printSource) {
// 用来保留遍历到的全副函数名
let funcIds = []
recast.types.visit(ast, {
// 遍历所有的函数定义
visitFunctionDeclaration(path) {
//获取遍历到的函数名、参数、块级域
const node = path.node
const funcName = node.id
const params = node.params
const body = node.body
// 保留函数名
funcIds.push(funcName.name)
// 这是上一步推导进去的ast构造体
const rep = expressionStatement(assignmentExpression('=', memberExpression(id('exports'), funcName),
arrowFunctionExpression(params, body)))
// 将原来函数的ast构造体，替换成推导ast构造体
path.replace(rep)
// 进行遍历
return false
}
})
recast.types.visit(ast, {
// 遍历所有的函数调用
visitCallExpression(path){
const node = path.node;
// 如果函数调用呈现在函数定义中，则批改ast构造
if (funcIds.includes(node.callee.name)) {
node.callee = memberExpression(id('exports'), node.callee)
}
// 进行遍历
return false
}
})
// 打印批改后的ast源码
printSource(ast)
})一步到位，发一个最简略的exportific前端工具
下面讲了那么多，依然只体现在实践阶段。
但通过简略的改写，就能通过recast制作成一个名为exportific的源码编辑工具。
以下代码增加作了两个小改变
- 增加说明书—help，以及增加了—rewrite模式，能够间接覆盖文件或默认为导出*.export.js文件。
- 将之前代码最初的 printSource(ast)替换成 writeASTFile(ast,filename,rewriteMode)
exportific.js
#!/usr/bin/env nodeconst recast = require("recast");const {
identifier: id,
expressionStatement,
memberExpression,
assignmentExpression,
arrowFunctionExpression} = recast.types.builders
const fs = require('fs')const path = require('path')// 截取参数const options = process.argv.slice(2)//如果没有参数，或提供了-h 或--help选项，则打印帮忙if(options.length===0 || options.includes('-h') || options.includes('--help')){
console.log(`
采纳commonjs规定，将.js文件内所有函数批改为导出模式。
选项： -r 或 --rewrite 可间接笼罩原有文件
`)
process.exit(0)}// 只有有-r 或--rewrite参数，则rewriteMode为truelet rewriteMode = options.includes('-r') || options.includes('--rewrite')// 获取文件名const clearFileArg = options.filter((item)=>{
return !['-r','--rewrite','-h','--help'].includes(item)})// 只解决一个文件let filename = clearFileArg[0]const writeASTFile = function(ast, filename, rewriteMode){
const newCode = recast.print(ast).code
if(!rewriteMode){
// 非笼罩模式下，将新文件写入*.export.js下
filename = filename.split('.').slice(0,-1).concat(['export','js']).join('.')
}
// 将新代码写入文件
fs.writeFileSync(path.join(process.cwd(),filename),newCode)}
recast.run(function (ast, printSource) {
let funcIds = []
recast.types.visit(ast, {
visitFunctionDeclaration(path) {
//获取遍历到的函数名、参数、块级域
const node = path.node
const funcName = node.id
const params = node.params
const body = node.body
funcIds.push(funcName.name)
const rep = expressionStatement(assignmentExpression('=', memberExpression(id('exports'), funcName),
arrowFunctionExpression(params, body)))
path.replace(rep)
return false
}
})
recast.types.visit(ast, {
visitCallExpression(path){
const node = path.node;
if (funcIds.includes(node.callee.name)) {
node.callee = memberExpression(id('exports'), node.callee)
}
return false
}
})
writeASTFile(ast,filename,rewriteMode)
})当初尝试一下
node exportific demo.js曾经能够在当前目录下找到源码变更后的demo.export.js文件了。
npm发包
编辑一下package.json文件
{
"name": "exportific",
"version": "0.0.1",
"description": "改写源码中的函数为可exports.XXX模式",
"main": "exportific.js",
"bin": {
"exportific": "./exportific.js"
},
"keywords": [],
"author": "wanthering",
"license": "ISC",
"dependencies": {
"recast": "^0.15.3"
}
}留神bin选项，它的意思是将全局命令exportific指向当前目录下的exportific.js
这时，输出npm link 就在本地生成了一个exportific命令。
之后，只有哪个js文件想导出来应用，就exportific XXX.js一下。
这是在本地的玩法，想和大家一起分享这个前端小工具，只须要公布npm包就行了。
同时，肯定要留神exportific.js文件头有
#!/usr/bin/env node否则在应用时将报错。
接下来，正式公布npm包！
如果你曾经有了npm 帐号，请应用npm login登录
如果你还没有npm帐号 https://www.npmjs.com/signup …
而后，输出
npm publish
没有任何繁琐步骤，丝毫审核都没有，你就公布了一个实用的前端小工具exportific 。任何人都能够通过
npm i exportific -g全局装置这一个插件。
提醒：在试验教程时，请不要和我的包重名，批改一下发包名称。
结语
咱们对javascript再相熟不过，但透过AST的视角，最一般的js语句，却焕发出精心动魄的美感。你能够通过它批量构建任何javascript代码！
童年时，这个世界充斥了离奇的玩具，再一般的货色在你眼中都如同至宝。现在，计算机语言就是你手中的大玩具，一段段AST对象的拆分组装，构建出咱们所生存的网络世界。
所以不得不说软件工程师是一个幸福的工作，你心中住的依然是那个午后的少年，永远有有数离奇等你发现，永远有有数幻想等你构建。
我的项目代码：https://github.com/wanthering…
举荐浏览
（点击题目可跳转浏览）
前端与编译原理：用 JS 写一个 JS 解释器
前端码农之变质 — AST（形象语法树）
前端构建：3 类 13 种热门工具的选型参考
感觉本文对你有帮忙？请分享给更多人
关注「前端大全」加星标，晋升前端技能
发表回复