AST抽象语法树 JavaScript版
<p>在javascript世界中，你可以认为抽象语法树(AST)是最底层。 再往下，就是关于转换和编译的“黑魔法”领域了。</p><p><strong>现在，我们拆解一个简单的add函数</strong></p>
<pre><code class="language-js">function add(a, b) {
return a + b
}
</code></pre>
<p>首先，我们拿到的这个语法块，是一个FunctionDeclaration(函数定义)对象。</p>
<p>用力拆开，它成了三块：</p>
<ul>
<li>一个id，就是它的名字，即add</li>
<li>两个params，就是它的参数，即</li>
<li>一块body，也就是大括号内的一堆东西</li>
</ul>
<p>add没办法继续拆下去了，它是一个最基础Identifier（标志）对象，用来作为函数的唯一标志。</p>
<pre><code class="language-json">{
name: 'add'
type: 'identifier'
...
}
</code></pre>
<p>params继续拆下去，其实是两个Identifier组成的数组。之后也没办法拆下去了。</p>
<pre><code class="language-json">[
{
name: 'a'
type: 'identifier'
...
},
{
name: 'b'
type: 'identifier'
...
}
]
</code></pre>
<p>接下来，我们继续拆开body<br>
我们发现，body其实是一个BlockStatement（块状域）对象，用来表示是<code>{return a + b}</code></p>
<p>打开Blockstatement，里面藏着一个ReturnStatement（Return域）对象，用来表示<code>return a + b</code></p>
<p>继续打开ReturnStatement,里面是一个BinaryExpression(二项式)对象，用来表示<code>a + b</code></p>
<p>继续打开BinaryExpression，它成了三部分，<code>left</code>，<code>operator</code>，<code>right</code></p>
<ul>
<li><code>operator</code> 即<code>+</code></li>
<li><code>left</code> 里面装的，是Identifier对象 <code>a</code></li>
<li><code>right</code> 里面装的，是Identifer对象 <code>b</code></li>
</ul>
<p>就这样，我们把一个简单的add函数拆解完毕。</p>
<p>抽象语法树(Abstract Syntax Tree)，的确是一种标准的树结构。</p>
<p>那么，上面我们提到的Identifier、Blockstatement、ReturnStatement、BinaryExpression， 这一个个小部件的说明书去哪查？</p>
<p>请查看 AST对象文档</p>
<h2 id="recast">recast</h2>
<p>输入命令：<code>npm i recast -S</code></p>
<p>你即可获得一把操纵语法树的螺丝刀</p>
<p>接下来，你可以在任意js文件下操纵这把螺丝刀，我们新建一个parse.js示意：</p>
<h3 id="创建parsejs文件">创建parse.js文件</h3>
<pre><code class="language-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
console.log(add)
</code></pre>
<p>输入<code>node parse.js</code>你可以查看到add函数的结构，与之前所述一致，通过AST对象文档可查到它的具体属性：</p>
<pre><code class="language-js">FunctionDeclaration{
type: 'FunctionDeclaration',
id: ...
params: ...
body: ...
}
</code></pre>
<h2 id="recasttypesbuilders-制作模具">recast.types.builders 制作模具</h2>
<p>recast.types.builders里面提供了不少“模具”，让你可以轻松地拼接成新的机器。</p>
<p>最简单的例子，我们想把之前的<code>function add(a, b){...}</code>声明，改成匿名函数式声明<code>const add = function(a ,b){...}</code></p>
<h3 id="如何改装">如何改装？</h3>
<p>第一步，我们创建一个VariableDeclaration变量声明对象，声明头为const， 内容为一个即将创建的VariableDeclarator对象。</p>
<p>第二步，创建一个VariableDeclarator，放置add.id在左边， 右边是将创建的FunctionDeclaration对象</p>
<p>第三步，我们创建一个FunctionDeclaration，如前所述的三个组件，id params body中，因为是匿名函数id设为空，params使用add.params，body使用add.body。</p>
<p>这样，就创建好了<code>const add = function(){}</code>的AST对象。</p>
<p>在之前的parse.js代码之后，加入以下代码</p>
<pre><code class="language-js">// 引入变量声明，变量符号，函数声明三种“模具”
const {variableDeclaration, variableDeclarator, functionExpression} = recast.types.builders
// 将准备好的组件置入模具，并组装回原来的ast对象。
ast.program.body = 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)
</code></pre>
<p>打印出来还保留着“原装”的函数内容，连注释都没有变。</p>
<p>我们其实也可以打印出美化格式的代码段：</p>
<p><code>const output = recast.prettyPrint(ast, { tabWidth: 2 }).code</code></p>
<pre><code class="language-js">//输出为
const add = function(a, b) {
return a + b;
};
</code></pre>
<h2 id="实战进阶命令行修改js文件">实战进阶：命令行修改js文件</h2>
<p>除了parse/print/builder以外，Recast的三项主要功能：</p>
<ul>
<li>run: 通过命令行读取js文件，并转化成ast以供处理。</li>
<li>tnt： 通过assert()和check()，可以验证ast对象的类型。</li>
<li>visit: 遍历ast树，获取有效的AST对象并进行更改。</li>
</ul>
<p>通过一个系列小务来学习全部的recast工具库：</p>
<h3 id="demojs">demo.js</h3>
<pre><code class="language-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
}
</code></pre>
<h3 id="recastrun-命令行文件读取">recast.run 命令行文件读取</h3>
<p>新建一个名为<code>read.js</code>的文件，写入</p>
<h4 id="readjs">read.js</h4>
<pre><code class="language-js">recast.run( function(ast, printSource){
printSource(ast)
})
</code></pre>
<p>命令行输入</p>
<p><code>node read demo.js</code></p>
<p>我们查以看到js文件内容打印在了控制台上。</p>
<p>我们可以知道，<code>node read</code>可以读取<code>demo.js</code>文件，并将demo.js内容转化为ast对象。</p>
<p>同时它还提供了一个<code>printSource</code>函数，随时可以将ast的内容转换回源码，以方便调试。</p>
<h3 id="recastvisit-ast节点遍历">recast.visit AST节点遍历</h3>
<h4 id="readjs-1"><strong>read.js</strong></h4>
<pre><code class="language-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
}
});
});
</code></pre>
<p>recast.visit将AST对象内的节点进行逐个遍历。</p>
<p><strong>注意</strong></p>
<ul>
<li>你想操作函数声明，就使用visitFunctionDelaration遍历，想操作赋值表达式，就使用visitExpressionStatement。 只要在 AST对象文档中定义的对象，在前面加visit，即可遍历。</li>
<li>通过node可以取到AST对象</li>
<li>每个遍历函数后必须加上return false，或者选择以下写法，否则报错：</li>
</ul>
<pre><code class="language-js">#!/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)
}
})
});
</code></pre>
<p>调试时，如果你想输出AST对象，可以<code>console.log(node)</code></p>
<p>如果你想输出AST对象对应的源码，可以<code>printSource(node)</code></p>
<p>命令行输入<code> node read demo.js</code>进行测试。</p>
<blockquote>
<p><code>#!/usr/bin/env node</code> 在所有使用<code>recast.run()</code>的文件顶部都需要加入这一行，它的意义我们最后再讨论。</p>
</blockquote>
<h3 id="tnt-判断ast对象类型">TNT 判断AST对象类型</h3>
<p>TNT，即recast.types.namedTypes，它用来判断AST对象是否为指定的类型。</p>
<p>TNT.Node.assert()，就像在机器里埋好的摧毁器，当机器不能完好运转时（类型不匹配），就摧毁机器(报错退出)</p>
<p>TNT.Node.check()，则可以判断类型是否一致，并输出False和True</p>
<h4 id="上述node可以替换成任意ast对象">上述Node可以替换成任意AST对象</h4>
<p>例如:TNT.ExpressionStatement.check(),TNT.FunctionDeclaration.assert()</p>
<h5 id="readjs-2">read.js</h5>
<pre><code class="language-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);
}
});
});
</code></pre>
<p><strong>read.js</strong></p>
<pre><code class="language-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);
}
});
});
</code></pre>
<h2 id="实战用ast修改源码导出全部方法">实战：用AST修改源码，导出全部方法</h2>
<h3 id="exportificjs">exportific.js</h3>
<p>现在，我们想让这个文件中的函数改写成能够全部导出的形式，例如</p>
<pre><code class="language-js">function add (a, b) {
return a + b
}
</code></pre>
<p>想改变为</p>
<pre><code class="language-js">exports.add = (a, b) => {
return a + b
}
</code></pre>
<h4 id="首先我们先用builders凭空实现一个键头函数">首先，我们先用builders凭空实现一个键头函数</h4>
<h5 id="exportificjs-1">exportific.js</h5>
<pre><code class="language-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([])))))
});
</code></pre>
<p>上面写了我们一步一步推断出<code>exports.add = ()=>{}</code>的过程，从而得到具体的AST结构体。</p>
<p>使用<code>node exportific demo.js</code>运行可查看结果。</p>
<p>接下来，只需要在获得的最终的表达式中，把id('add')替换成遍历得到的函数名，把参数替换成遍历得到的函数参数，把blockStatement([])替换为遍历得到的函数块级作用域，就成功地改写了所有函数！</p>
<p>另外，我们需要注意，在commonDivision函数内，引用了sub函数，应改写成exports.sub</p>
<h6 id="exportificjs-2">exportific.js</h6>
<pre><code class="language-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)
})
</code></pre>
<h3 id="一步到位发一个最简单的exportific前端工具">一步到位，发一个最简单的exportific前端工具</h3>
<p>以下代码添加作了两个小改动</p>
<ol>
<li>添加说明书--help，以及添加了--rewrite模式，可以直接覆盖文件或默认为导出*.export.js文件。</li>
<li>将之前代码最后的 printSource(ast)替换成 writeASTFile(ast,filename,rewriteMode)</li>
</ol>
<h4 id="exportificjs-3"><strong>exportific.js</strong></h4>
<pre><code class="language-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
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)
})
</code></pre>
<p>现在尝试一下</p>
<p><code>node exportific demo.js</code></p>
<p>已经可以在当前目录下找到源码变更后的<code>demo.export.js</code>文件了。</p>
<h3 id="npm发包">npm发包</h3>
<p>编辑一下package.json文件</p>
<pre><code class="language-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"
}
}
</code></pre>
<p>注意bin选项，它的意思是将全局命令<code>exportific</code>指向当前目录下的<code>exportific.js</code></p>
<p>这时，输入<code>npm link</code> 就在本地生成了一个<code>exportific</code>命令。</p>
<p>之后，只要哪个js文件想导出来使用，就<code>exportific XXX.js</code>一下。</p>
<p>一定要注意exportific.js文件头有</p>
<p><code>#!/usr/bin/env node</code></p>
<h4 id="接下来正式发布npm包">接下来，正式发布npm包！</h4>
<p>如果你已经有了npm 帐号，请使用<code>npm login</code>登录</p>
<p>如果你还没有npm帐号 https://www.npmjs.com/signup 非常简单就可以注册npm</p>
<p>然后，输入<br>
<code>npm publish</code></p>
<p>没有任何繁琐步骤，丝毫审核都没有，你就发布了一个实用的前端小工具exportific 。任何人都可以通过</p>
<pre><code>npm i exportific -g
</code></pre>
<p>全局安装这一个插件。</p>
<p>提示：<strong>在试验教程时，请不要和我的包重名，修改一下发包名称。</strong></p>
<h2 id="usrbinenv-node">#!/usr/bin/env node</h2>
<p>不同用户或者不同的脚本解释器有可能安装在不同的目录下，系统如何知道要去哪里找你的解释程序呢？ <code>/usr/bin/env</code>就是告诉系统可以在PATH目录中查找。 所以配置<code>#!/usr/bin/env node</code>, 就是解决了不同的用户node路径不同的问题，可以让系统动态的去查找node来执行你的脚本文件。</p>
<p>如果出现<code>No such file or directory</code>的错误？因为你的node安装路径没有添加到系统的PATH中。所以去进行node环境变量配置就可以了。</p>
<p>要是你只是想简单的测试一下，那么你可以通过<code>which node</code>命令来找到你本地的node安装路径，将<code>/usr/bin/env</code>改为你查找到的node路径即可。</p>
<hr>
<p>参考文章：https://segmentfault.com/a/1190000016231512?utm_source=tag-newest#comment-area</p>
</div>
<div id="MySignature" role="contentinfo">
<hr/>
文章都是本人学习时的笔记整理，希望看完后能对您有所帮助，欢迎大家提意见，多多交流。
<br/>
也有些文章是转载的，如果存在转载文章且没有标注转载地址的，请与我联系，马上处理。
<br/>
自由转载-非商用-非衍生-保持署名。<br><br>
来源：https://www.cnblogs.com/rope/p/11934468.html
頁:
[1]