使用Recast与Espree向箭头函数插入代码的路径回溯问题

我尝试用Recast结合Espree向指定箭头函数中插入一行新代码，目前已经实现了功能，但觉得代码里通过多次parentPath回溯的写法很不严谨，希望得到更合理的实现方式。

待修改的目标代码 #

//这是我要修改的代码

class SomeCalss extends Yapyap {
  constructor() {
    super(...arguments);
    this.foo = new foo();
  }

  connectedCallback() {
    Something.initialize().then((user) => {
        Settings.initialize();
      })
      .catch((err) => {
        console.log("user not found: ", err);
      })
      .then(() => {
        //需要在此箭头函数中添加代码
        //FS.open("abc")
        //FS.open是此调用独有的
        FS.open("xyz")

      })
      .then(() => {
        console.log("some more code")
      })
  }
}

当前的解决方案 #

export default function transformer(code, { recast, parsers }) {
  const ast = recast.parse(code, { parser: parsers.esprima });
   
        const newcode = ["FS.open('abc')"]
        const astnew = recast.parse(newcode);
  
  recast.visit(ast, {
          visitClassDeclaration(path) {
             if (path.node.id.name === 'SomeCalss') { this.traverse(path) }
             else { return false }
          },
          visitMethodDefinition(path) {
            if (path.node.key.name === 'connectedCallback') { 
               this.traverse(path) 
               
            }
            else { return false }
          },
    
    visitCallExpression(path) {
        if(path.node.callee.type == 'MemberExpression') {
            this.traverse(path)
          if(path.node.callee.object.name == 'FS') {
            const a = path.parentPath.parentPath.parentPath.value.original.body
            const b = path.parentPath.parentPath.value.length
        
            if (typeof(a) == "object") {
               if(a.length == b ){
                    this.traverse(path)
                    console.log(545,path.parentPath.parentPath.value)
                    path.parentPath.parentPath.value.push(astnew.program.body[0])
                }
            }
            //if (typeof(a) != "undefined") return false;
            //if (typeof(b) != "undefined") return false;
           
        
          }else {return false}
        }
        else {return false}
      
    }
  });

  return recast.print(ast).code;
}

问题分析 #

当前实现通过path.parentPath.parentPath.parentPath这种多层回溯的方式定位箭头函数的代码块，完全依赖固定的AST层级结构。一旦目标代码的结构稍有变化（比如多一层嵌套、表达式结构调整），这段代码就会失效，不仅维护性差，容错率也极低。

优化后的实现方案 #

export default function transformer(code, { recast, parsers }) {
  const ast = recast.parse(code, { parser: parsers.esprima });
  // 解析要插入的代码，生成对应的AST节点
  const insertStatement = recast.parse("FS.open('abc')").program.body[0];

  recast.visit(ast, {
    // 只处理名为SomeCalss的类
    visitClassDeclaration(path) {
      if (path.node.id.name !== 'SomeCalss') return false;
      this.traverse(path);
    },
    // 只处理类中的connectedCallback方法
    visitMethodDefinition(path) {
      if (path.node.key.name !== 'connectedCallback') return false;
      this.traverse(path);
    },
    // 直接定位箭头函数节点
    visitArrowFunctionExpression(path) {
      // 检查当前箭头函数是否是then方法的回调参数
      const parentCall = path.parentPath;
      if (parentCall.node.type !== 'CallExpression' || 
          parentCall.node.callee.type !== 'MemberExpression' || 
          parentCall.node.callee.property.name !== 'then') {
        this.traverse(path);
        return;
      }

      // 检查箭头函数体内是否包含目标调用FS.open("xyz")
      const hasTargetCall = path.node.body.body.some(stmt => 
        stmt.type === 'ExpressionStatement' &&
        stmt.expression.type === 'CallExpression' &&
        stmt.expression.callee.type === 'MemberExpression' &&
        stmt.expression.callee.object.name === 'FS' &&
        stmt.expression.callee.property.name === 'open' &&
        stmt.expression.arguments[0].value === 'xyz'
      );

      if (hasTargetCall) {
        // 在目标箭头函数的代码块开头插入新代码
        path.node.body.body.unshift(insertStatement);
      }

      this.traverse(path);
    }
  });

  return recast.print(ast).code;
}

优化点说明 #

• 避免脆弱的层级依赖：直接通过visitArrowFunctionExpression定位箭头函数，不再依赖多层parentPath回溯，AST结构变化时更不容易出错
• 精准定位目标：通过检查父级调用是否为then方法、箭头函数内是否包含FS.open("xyz")，精准锁定要修改的箭头函数，避免误操作其他位置的代码
• 逻辑清晰直观：直接操作箭头函数的body.body数组插入代码，逻辑一目了然，维护成本低

内容的提问来源于stack exchange，提问作者James C