在javascript世界中，你可以认为抽象语法树(ast)是最底层。 再往下，就是关于转换和编译的“黑魔法”领域了。
现在，我们拆解一个简单的add函数
我要评论function add(a, b) {
return a + b
}
首先，我们拿到的这个语法块，是一个functiondeclaration(函数定义)对象。
用力拆开，它成了三块：
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对象 aright 里面装的，是identifer对象 b就这样，我们把一个简单的add函数拆解完毕。
抽象语法树(abstract syntax tree)，的确是一种标准的树结构。
那么，上面我们提到的identifier、blockstatement、returnstatement、binaryexpression， 这一个个小部件的说明书去哪查？
请查看 ast对象文档
输入命令：npm i recast -s
你即可获得一把操纵语法树的螺丝刀
接下来，你可以在任意js文件下操纵这把螺丝刀，我们新建一个parse.js示意：
// 给你一把"螺丝刀"——recast
const 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: ...
}
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, // 匿名化函数表达式.
add.params,
add.body
))
]);
//将ast对象重新转回可以阅读的代码
//这一行其实是recast.parse的逆向过程，具体公式为
//recast.print(recast.parse(source)).code === source
const output = recast.print(ast).code;
console.log(output)
打印出来还保留着“原装”的函数内容，连注释都没有变。
我们其实也可以打印出美化格式的代码段：
const output = recast.prettyprint(ast, { tabwidth: 2 }).code
//输出为
const add = function(a, b) {
return a + b;
};
除了parse/print/builder以外，recast的三项主要功能：
通过一个系列小务来学习全部的recast工具库：
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
}
新建一个名为read.js的文件，写入
recast.run( function(ast, printsource){
printsource(ast)
})
命令行输入
node read demo.js
我们查以看到js文件内容打印在了控制台上。
我们可以知道，node read可以读取demo.js文件，并将demo.js内容转化为ast对象。
同时它还提供了一个printsource函数，随时可以将ast的内容转换回源码，以方便调试。
#!/usr/bin/env node
const recast = require('recast')
recast.run(function(ast, printsource) {
recast.visit(ast, {
visitexpressionstatement: function({node}) {
console.log(node)
return false
}
});
});
recast.visit将ast对象内的节点进行逐个遍历。
注意
#!/usr/bin/env node
const 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，即recast.types.namedtypes，它用来判断ast对象是否为指定的类型。
tnt.node.assert()，就像在机器里埋好的摧毁器，当机器不能完好运转时（类型不匹配），就摧毁机器(报错退出)
tnt.node.check()，则可以判断类型是否一致，并输出false和true
例如:tnt.expressionstatement.check(),tnt.functiondeclaration.assert()
#!/usr/bin/env node
const 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 node
const 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);
}
});
});
现在，我们想让这个文件中的函数改写成能够全部导出的形式，例如
function add (a, b) {
return a + b
}
想改变为
exports.add = (a, b) => {
return a + b
}
#!/usr/bin/env node
const 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
#!/usr/bin/env node
const 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)
})
以下代码添加作了两个小改动
#!/usr/bin/env node
const 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为true
let 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文件了。
编辑一下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一下。
一定要注意exportific.js文件头有
#!/usr/bin/env node
如果你已经有了npm 帐号，请使用npm login登录
如果你还没有npm帐号 非常简单就可以注册npm
然后，输入
npm publish
没有任何繁琐步骤，丝毫审核都没有，你就发布了一个实用的前端小工具exportific 。任何人都可以通过
npm i exportific -g
全局安装这一个插件。
提示：在试验教程时，请不要和我的包重名，修改一下发包名称。
不同用户或者不同的脚本解释器有可能安装在不同的目录下，系统如何知道要去哪里找你的解释程序呢？ /usr/bin/env就是告诉系统可以在path目录中查找。 所以配置#!/usr/bin/env node, 就是解决了不同的用户node路径不同的问题，可以让系统动态的去查找node来执行你的脚本文件。
如果出现no such file or directory的错误？因为你的node安装路径没有添加到系统的path中。所以去进行node环境变量配置就可以了。
要是你只是想简单的测试一下，那么你可以通过which node命令来找到你本地的node安装路径，将/usr/bin/env改为你查找到的node路径即可。
参考文章：
如对本文有疑问， 点击进行留言回复！！
同事牛逼啊，写了个隐藏 bug，我排查了 3 天才解决问题！
【JavaScript笔记（一）】万丈高楼平地起 - 基本概念篇
轻松解决 org.apache.taglibs.standard.tlv.JstlCoreTLV 困惑
网友评论