AST抽象语法树 Javascript版
在javascript世界中,你可以认为抽象语法树(ast)是最底层。 再往下,就是关于转换和编译的“黑魔法”领域了。
现在,我们拆解一个简单的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文件
// 给你一把"螺丝刀"——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 制作模具
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; };
实战进阶:命令行修改js文件
除了parse/print/builder以外,recast的三项主要功能:
- run: 通过命令行读取js文件,并转化成ast以供处理。
- tnt: 通过assert()和check(),可以验证ast对象的类型。
- visit: 遍历ast树,获取有效的ast对象并进行更改。
通过一个系列小务来学习全部的recast工具库:
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 node const 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 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 判断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 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); } }); });
实战:用ast修改源码,导出全部方法
exportific.js
现在,我们想让这个文件中的函数改写成能够全部导出的形式,例如
function add (a, b) { return a + b }
想改变为
exports.add = (a, b) => { return a + b }
首先,我们先用builders凭空实现一个键头函数
exportific.js
#!/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
exportific.js
#!/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) })
一步到位,发一个最简单的exportific前端工具
以下代码添加作了两个小改动
- 添加说明书--help,以及添加了--rewrite模式,可以直接覆盖文件或默认为导出*.export.js文件。
- 将之前代码最后的 printsource(ast)替换成 writeastfile(ast,filename,rewritemode)
exportific.js
#!/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
文件了。
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
一下。
一定要注意exportific.js文件头有
#!/usr/bin/env node
接下来,正式发布npm包!
如果你已经有了npm 帐号,请使用npm login
登录
如果你还没有npm帐号 非常简单就可以注册npm
然后,输入npm publish
没有任何繁琐步骤,丝毫审核都没有,你就发布了一个实用的前端小工具exportific 。任何人都可以通过
npm i exportific -g
全局安装这一个插件。
提示:在试验教程时,请不要和我的包重名,修改一下发包名称。
#!/usr/bin/env node
不同用户或者不同的脚本解释器有可能安装在不同的目录下,系统如何知道要去哪里找你的解释程序呢? /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路径即可。
参考文章:
上一篇: html汇总
下一篇: 基于SCN增量恢复DG同步