能否用Babel转译器将已知参数的字符串返回函数调用替换为字符串字面量？

如果函数的参数提前已知，能否使用Babel这类转译器，将返回字符串的函数调用替换为其返回值对应的字符串字面量？

示例函数如下：

function getColor(luminance) {
    return `hsl(100deg, 100%, ${luminance}%)`;
}

原调用代码：

var someCssValueToBeUsed = getColor(50);

期望转译后代码：

var someCssValueToBeUsed = "hsl(100deg, 100%, 50%)";

当然可以，这类操作属于编译期常量折叠的范畴，通过自定义Babel插件就能轻松实现。

具体的实现思路很清晰：

• 让Babel遍历代码生成的AST（抽象语法树），定位所有getColor的函数调用节点
• 校验调用时传入的参数是否是字面量常量（比如示例里的50）
• 如果参数是可确定的常量，就直接执行函数逻辑算出返回值，再把整个函数调用替换成对应的字符串字面量

这里给个简化版的Babel插件实现示例：

module.exports = function(babel) {
  const { types: t } = babel;

  return {
    visitor: {
      CallExpression(path) {
        // 匹配目标函数getColor的调用
        if (path.node.callee.name === 'getColor') {
          const argNode = path.node.arguments[0];
          // 检查参数是否为数字字面量
          if (t.isNumericLiteral(argNode)) {
            const luminance = argNode.value;
            // 计算出最终的颜色字符串
            const resultStr = `hsl(100deg, 100%, ${luminance}%)`;
            // 将函数调用节点替换为字符串字面量
            path.replaceWith(t.stringLiteral(resultStr));
          }
        }
      }
    }
  };
};

需要注意的是，这种替换只适合纯函数场景：函数的返回值完全由输入参数决定，不依赖任何运行时才能获取的变量或外部状态。如果getColor的逻辑涉及复杂分支、外部依赖或者动态值，编译期就没法准确计算出结果，这种替换也就不适用了。

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