01
—
关于path的一些操作
path,翻译过来是路径,理解为路径就好了。比如有这么一段代码:
var a = 123;
在线网站解析的情况如下:
小技巧:鼠标点击 var 这三个字母中间,可以看到网站直接将相关代码标黄了。
可以看到,上面就是一个个的节点,这也是我们再熟悉不过的JSON结构的数据。
上图中红色方框处就是它的path类型。我们在遍历的时候就这样写插件:
-
const visitor = {
-
VariableDeclaration(path)
-
{
-
//to do something;
-
},
-
}
小疑问: VariableDeclaration 和 VariableDeclarator 有啥区别?
可以看到,VariableDeclaration 是 VariableDeclarator 的祖先节点,这两者肯定不一样的。我们将代码变成下面这样,再进行解析:
var a = 123,b = 456;
解析的结果如下:
这样就明白了。原来 一个 VariableDeclarator 只对应一个 变量的定义,理解这些,在我们插入节点的时候非常的有帮忙,比如我们想要在
var a = 123;
代码后面插入
b = 456;
你 就知道应该遍历 VariableDeclarator 路径,判断变量名是否为 "a",然后构造节点插入即可。
我们注意到它的参数是:path,那path究竟有那些常见的方法呢?
当前路径所对应的源代码,使用的是toString这个方法,在我解混淆的时候会经常的用到,是比较重要的,示例代码如下:
-
const visitor = {
-
VariableDeclaration(path)
-
{
-
console.log(path.toString());
-
},
-
}
-
判断path是什么type,使用path.isXXX 这个方法,比如我们需要判断路径是否为 StringLiteral 类型:
-
if(path.isStringLiteral())
-
{
-
//do something;
-
}
-
获取path的上一级路径,你可以像这样来获取:
let parent = path.parentPath;
获取path的子路径,你可以是使用 get方法,比如定义了如下变量:
var a = 123;
当前访问的是 VariableDeclarator ,其结构如下:
现在需要访问 id 这个路径,你可以这么操作:
path.get('id');
删除path,使用remove方法,当你觉得你访问的路径已经完成了改完成的事,对代码已经没什么作用了,可以将其删除,
path.remove()
替换path,单路径可以使用replaceWith方法,多路径则使用replaceWithMultiple方法,比如你想将 1 + 2 替换成 3,你可以像下面这样的代码进行替换:
path.replaceWith({type:"NumericLiteral",value:3});
当然,你也可以引入 const type = require("@babel/types");然后再进行替换:
path.replaceWith(type.NumericLiteral(3));
注意,这里的3是我口算出来的,在实际操作过程中,是需要获取 "+" 两边的值并计算其结果的。
如果你想获取更多path相关的方法,请直接阅读源码,阅读源码是你学习最快,也是最好的办法。path相关的源码在这里:
@babel\traverse\lib\path
02
—
关于node的一些操作
这里的node,其实是path的一个属性:
const node = path.node;
可以将其理解为节点,我们可以打印node,看看是些什么内容。这里还是以代码var a = 123;为例,访问 VariableDeclarator 路径,打印出当前的node:
console.log(path.node);
结果如图:
其实就是一个 json结构的数据。
1.如何获取当前节点所对应的源代码:
-
const generator = require("@babel/generator").default;
-
let {code} = generator(node);
2.如何删除节点,使用系统的 delete 方法。比如你想删除
init这个节点,可以使用下面的方式:
delete path.node.init;
操作过后,代码 var a = 123;将会变成 var a;,即将初始化的值进行删除。
当然也可以直接赋值,比如:
path.node.init = undefined;
3.访问子节点,比如你想得到初始化的值,你可以这么操作:
-
const node = path.node;
-
const value = node.init.value;
-
console.log(value);
嗯,你把它理解为 JSON就好了,比如,它是可以这么操作的:
-
const node = path.node;
-
console.log(JSON.stringify(node));
好了,这就是本文的全部内容了,如果你觉得好,可以点个在看,谢谢!
文章来源: blog.csdn.net,作者:悦来客栈的老板,版权归原作者所有,如需转载,请联系作者。
原文链接:blog.csdn.net/qq523176585/article/details/109590370