基于Babel AST生成ES6代码及替换特定函数调用格式的技术问题

我最近碰到个需求：得把项目里所有S.<name>(<expr>, <expr>)格式的函数调用，替换成S.<name>(<expr>)(<expr>)的形式，而且要求生成ES6代码，不是ES5。最开始用Esprima做解析、Escodegen做代码生成，简单测试用例跑起来没问题，但一碰到包含JSX或者其他非标准语法的文件就直接失效了——毕竟这俩工具对扩展语法的支持实在有限。

后来我转用Babel插件来实现这个逻辑，毕竟Babel本身就是为处理各种JS扩展语法而生的。目前我写了插件的雏形，不过还没写完，先把现有代码和完善后的版本分享出来：

完善后的Babel插件代码 #

'use strict';

module.exports = function(babel) {
  const { types: t } = babel;
  
  return {
    visitor: {
      CallExpression: applyOneByOne
    }
  };

  function applyOneByOne(path) {
    // 精准匹配目标调用格式：S对象的方法调用，且恰好传入两个参数
    if (
      t.isMemberExpression(path.node.callee) &&
      t.isIdentifier(path.node.callee.object, { name: 'S' }) &&
      t.isIdentifier(path.node.callee.property) &&
      path.node.arguments.length === 2
    ) {
      // 构建嵌套调用的AST节点：先调用S.<name>(第一个参数)，再用返回值调用第二个参数
      const firstCall = t.callExpression(
        path.node.callee,
        [path.node.arguments[0]]
      );
      const newCall = t.callExpression(firstCall, [path.node.arguments[1]]);
      
      // 用新节点替换原有的调用节点
      path.replaceWith(newCall);
    }
  }
};

关键逻辑说明 #

1. 节点类型判断：借助Babel的types工具库，精准判断当前节点是否是我们要找的S.<name>调用——先确认是成员表达式，对象是名为S的标识符，属性也是标识符，并且恰好有两个参数。
2. AST节点重构：把原来的单次调用拆分成两次嵌套调用的AST节点，然后用新节点替换原节点。
3. 语法兼容性：只要配合对应的Babel预设（比如处理JSX用@babel/preset-react），这个插件就能完美处理各种非标准语法，不会像之前用Esprima那样直接报错。

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