使用Babel重命名函数参数且不修改同名其他标识符

我正在开发一个JavaScript项目，需要通过编程方式重命名函数参数。核心需求是：只修改函数参数名及其在函数体内的合法变量引用，不能影响函数作用域内同名的对象键或其他非变量标识符。

尝试的代码 #

window.onload = function() {
  const code = `function process(x, y) { return { z: x * y, x: 4 }; }`;

  const result = Babel.transform(code, {
    plugins: [{
      visitor: {
        Identifier(path) {
          if (path.node.name === 'x' && path.scope.getBinding(path.node.name).kind === 'param') {
            path.node.name = 'a';
          }
        },
        FunctionDeclaration(path) {
          path.node.params.forEach(param => {
            if (param.name === 'x') {
              param.name = 'a';
            }
          });
        },
      }
    }]
  });

  console.log(result.code);
};

期望输出 #

function process(a, y) {
  return {
    z: a * y,
    x: 4
  };
}

实际输出 #

function process(a, y) {
  return {
    z: a * y,
    a: 4
  };
}

问题出在：对象的键名x也被改成了a，我原本以为path.scope.getBinding(path.node.name).kind === 'param'能区分参数引用和对象键，但没生效。

解决方案 #

核心问题分析 #

你之前的代码会匹配所有名为x的Identifier节点，包括对象属性的键名（ObjectProperty的key）。虽然path.scope.getBinding('x')确实存在（因为参数是x），但对象键名不属于变量引用，它只是字符串字面量的另一种写法，不属于作用域绑定的范畴，所以会被误修改。

推荐方案：使用Babel Scope的rename方法 #

Babel的作用域系统内置了rename方法，能自动识别所有属于目标绑定的变量引用，不会触及对象键名这类非变量标识符。代码如下：

window.onload = function() {
  const code = `function process(x, y) { return { z: x * y, x: 4 }; }`;

  const result = Babel.transform(code, {
    plugins: [{
      visitor: {
        FunctionDeclaration(path) {
          // 获取当前函数作用域中名为x的绑定
          const xBinding = path.scope.getBinding('x');
          // 确认该绑定是参数类型
          if (xBinding && xBinding.kind === 'param') {
            // 调用rename方法，自动重命名所有合法引用
            xBinding.rename('a');
          }
        }
      }
    }]
  });

  console.log(result.code);
};

这段代码会输出你期望的结果：仅修改参数x和函数体内的变量引用x，对象键名x保持不变。

备选方案：手动过滤非变量引用的Identifier #

如果你想手动处理Identifier节点，可以增加判断条件，排除对象属性键的场景：

window.onload = function() {
  const code = `function process(x, y) { return { z: x * y, x: 4 }; }`;

  const result = Babel.transform(code, {
    plugins: [{
      visitor: {
        Identifier(path) {
          if (path.node.name === 'x') {
            const binding = path.scope.getBinding('x');
            // 条件：绑定是参数，且当前Identifier不是对象属性的键
            if (binding && binding.kind === 'param' && !path.parentPath.isObjectProperty({ key: path.node })) {
              path.node.name = 'a';
            }
          }
        },
        FunctionDeclaration(path) {
          path.node.params.forEach(param => {
            if (param.name === 'x') {
              param.name = 'a';
            }
          });
        }
      }
    }]
  });

  console.log(result.code);
};

不过这种方法需要手动处理所有非变量引用的场景（比如类属性键、JSX属性名等），不如rename方法通用可靠。

内容的提问来源于stack exchange，提问作者John.F