AST（抽象语法树）的学习第三讲——ast分析常用节点及方法

AST还原是通过指定节点路径，使用一系列方法操作得到我们想要的代码；
其中，最重要的就是常用节点和常用方法

一、常用节点和常用方法概括

常用节点：

image.png

常用方法：

image.png

二、常用方法举例

以下举几个常用例子进行讲解

套用第二讲中的模板完成以下内容

// 第一步
//文件模块导入
const{parse}     = require("@babel/parser");
const traverse = require("@babel/traverse").default;
const types = require("@babel/types");
const generator = require("@babel/generator").default;
// 第二步
//读取文件
jscode = 'var a = 123'
// 第三步
//转换为ast树
let ast = parse(jscode);
// 第四步
// 调用插件，处理源代码
const visitor = {

}
traverse(ast, visitor);
// 第五步
//生成新的js code，并保存到文件中输出
// let {code} = generator(ast);
// console.log(code)

1、打印当前路径所对应的源代码

const visitor = {
    VariableDeclarator(path)
    {
        console.log(path.toString());  // var a = 123;
        console.log(generator(path.node).code)  // var a = 123;
    },
}

此处访问的是VariableDeclarator的节点路径（VariableDeclarator未在常用节点列出），下同

2、判断当前path的类型type（使用isxxx，如：isVariableDeclarator）

const visitor = {
    VariableDeclarator(path)
    {
        console.log(path.type); // VariableDeclarator
        console.log(path.isVariableDeclarator()) // true
        console.log(types.isVariableDeclarator(path.node))  //true
    },
}

3、删除指定节点 remove

const visitor = {
    VariableDeclarator(path){
        console.log(path.toString())  // a = 123;b = 321
        if (path.node.id.name === 'b'){
            path.remove()};
    }}
还原后代码：var a = 123

4、替换指定节点 replaceWith、replaceInline（推荐）

const visitor = {
    VariableDeclarator(path){
        console.log(path.toString())  // a = 123
        path.replaceWith(types.valueToNode(123456))
        console.log(path.toString())  // 123456
        path.replaceInline(types.valueToNode(123456789))
        console.log(path.toString())  // 123456789
    }}

三、path属性：Node的操作

关于path的属性node的一些操作
node其实是path的一个属性，将它打印出来观察一下

const visitor = {
    VariableDeclarator(path){
        console.log(path.toString())  // a = 123
        console.log(path.node);
    }}

image.png

相当于是VariableDeclarator节点下的json结构
我们来测试一下

const visitor = {
    VariableDeclarator(path){
        console.log(path.node.id.name);
    }}

输出：a

image.png

这样ast理解和操作起来会更加清晰，也便于我们对代码进行操作

传送门
AST（抽象语法树）的学习第一讲——认识ast在线解析网站
https://www.jianshu.com/p/6cccabe91228
AST（抽象语法树）的学习第二讲——ast分析代码步骤的拆解
https://www.jianshu.com/p/bef7fa8bf92a
AST（抽象语法树）的学习第四讲——实战ast
https://www.jianshu.com/p/78405d38bb82