如何通过Babel Transform移除父属性与外层包裹函数？

原始代码 #

import someOtherFunction from 'whatever'

function testFunction(hello) {
  return someOtherFunction(hello.world.name)
}

期望转换结果 #

import someOtherFunction from 'whatever'

function testFunction(hello) {
  return world.name
}

现有代码问题 #

你当前的插件逻辑存在两处问题：一是直接给path.parentPath.name赋值属于无效操作，MemberExpression节点并没有name属性；二是只处理了hello.world这一层节点，完全没触及外层的someOtherFunction调用，所以根本达不到预期效果。

正确的Babel插件实现 #

transformSync(code, {
  plugins: [
    function customPlugin() {
      return {
        visitor: {
          // 先定位外层的someOtherFunction调用
          CallExpression(path) {
            // 确认调用的是目标函数
            if (path.get('callee').isIdentifier({ name: 'someOtherFunction' })) {
              const argPath = path.get('arguments.0');
              // 确保参数是hello.world.name这类成员表达式
              if (argPath.isMemberExpression()) {
                let currentPath = argPath;
                // 向上遍历找到以hello为对象的那一层成员表达式
                while (!currentPath.get('object').isIdentifier({ name: 'hello' })) {
                  currentPath = currentPath.get('object');
                }
                // 取出hello.后面的部分（也就是world.name）
                const targetNode = currentPath.get('property').node;
                // 用目标节点替换整个someOtherFunction调用
                path.replaceWith(targetNode);
              }
            }
          }
        }
      }
    },
  ]
})

逻辑说明 #

1. 先找到someOtherFunction的调用节点，锁定需要处理的目标代码段；
2. 提取调用的第一个参数（即hello.world.name），确认它是成员表达式类型；
3. 向上遍历这个成员表达式的层级，定位到以hello为对象的那一层（也就是hello.world）；
4. 取出这一层里hello后面的world.name节点，用它替换掉整个someOtherFunction(...)调用；
5. 一步完成移除外层函数调用和去掉hello.前缀两个核心需求。

内容的提问来源于stack exchange，提问作者Wally Jose