如何实现bundleFunction？将函数及其外部依赖打包为字符串

要实现bundleFunction()，核心思路是提取目标函数的源码，识别它依赖的外部变量/函数，再把这些依赖的定义或值内联到函数代码中，最终拼接成完整的字符串。下面分简单场景和健壮方案两种情况说明：

一、简单场景的实现（适配示例中的基础情况） #

针对你给出的示例，可以用正则匹配+eval获取依赖的方式快速实现：

function bundleFunction(fn) {
  // 1. 获取目标函数的源码字符串
  const fnSource = fn.toString();

  // 2. 提取函数中用到的外部变量（简单正则匹配，仅适用于基础场景）
  const usedVars = [...new Set(fnSource.match(/\b(add|f1|f2)\b/g))];

  // 3. 收集每个依赖的实际值/源码
  const depMap = {};
  usedVars.forEach(varName => {
    const depValue = eval(varName);
    if (typeof depValue === 'function') {
      depMap[varName] = depValue.toString();
    } else {
      depMap[varName] = JSON.stringify(depValue);
    }
  });

  // 4. 替换函数中的依赖引用为内联代码
  let bundledSource = fnSource;
  for (const [varName, depStr] of Object.entries(depMap)) {
    if (typeof eval(varName) === 'function') {
      // 函数调用直接替换为自执行匿名函数
      bundledSource = bundledSource.replace(
        new RegExp(`${varName}\\((.*?)\\)`, 'g'),
        `(${depStr})($1)`
      );
    } else {
      // 变量直接替换为对应值
      bundledSource = bundledSource.replace(
        new RegExp(`\\b${varName}\\b`, 'g'),
        depStr
      );
    }
  }

  return bundledSource;
}

// 测试示例
const f1 = 1;
const f2 = 2;
function add(a, b) { return a + b; }

console.log(bundleFunction(() => {
  const result = add(f1, f2);
  return result;
}));
// 输出："() => { const result = ((a, b) => { return a + b; })(1, 2); return result; }"

注意：这个简单版本的局限 #

• 正则匹配不严谨，无法处理变量名与关键字冲突、嵌套函数中的变量、复合表达式中的依赖等复杂情况；
• eval存在安全风险，若作用域中有不可控变量，可能引发注入问题；
• 只能处理当前作用域下的直接依赖，无法识别闭包中捕获的动态变量或更深层作用域的依赖。

二、健壮方案（适配复杂场景） #

如果要处理更复杂的函数（比如嵌套作用域、动态依赖、复杂表达式），需要借助**AST（抽象语法树）**解析函数代码，精准识别自由变量并处理依赖：

1. 使用AST解析库（如acorn、espree）将函数源码转换为AST；
2. 遍历AST，标记函数内部定义的变量（如const result），剩下的即为外部依赖；
3. 收集这些依赖在当前作用域中的定义或值；
4. 将依赖的定义内联到目标函数的AST结构中；
5. 将修改后的AST转换回字符串代码。

示例（基于acorn和escodegen）：

// 先引入依赖：npm install acorn escodegen
const acorn = require('acorn');
const escodegen = require('escodegen');

function bundleFunction(fn) {
  const fnSource = fn.toString();
  // 解析函数为AST
  const ast = acorn.parse(fnSource, { ecmaVersion: 'latest' });
  
  // 遍历AST，收集自由变量（此处简化处理，仅识别顶层箭头函数的依赖）
  const usedVars = new Set();
  function traverse(node) {
    if (node.type === 'Identifier' && node.name !== 'arguments') {
      // 检查变量是否在函数内部定义
      let isLocal = false;
      let current = node;
      while (current.parent) {
        if (current.parent.type === 'VariableDeclaration' || 
            current.parent.type === 'FunctionDeclaration' ||
            current.parent.type === 'FunctionExpression') {
          const decls = current.parent.declarations || [current.parent.id];
          if (decls.some(d => d.name === node.name)) {
            isLocal = true;
            break;
          }
        }
        current = current.parent;
      }
      if (!isLocal) usedVars.add(node.name);
    }
    // 递归遍历子节点
    for (const key in node) {
      if (node[key] && typeof node[key] === 'object') {
        node[key].parent = node;
        traverse(node[key]);
      }
    }
  }
  traverse(ast);

  // 收集依赖的AST节点或值
  const depNodes = {};
  usedVars.forEach(varName => {
    const depValue = eval(varName);
    if (typeof depValue === 'function') {
      depNodes[varName] = acorn.parse(depValue.toString()).body[0];
    } else {
      depNodes[varName] = { type: 'Literal', value: depValue };
    }
  });

  // 将依赖内联到函数头部（简化处理，直接添加变量声明）
  const fnBody = ast.body[0].expression.body;
  if (fnBody.type === 'BlockStatement') {
    const declarations = Object.entries(depNodes).map(([name, node]) => ({
      type: 'VariableDeclarator',
      id: { type: 'Identifier', name },
      init: node.type === 'FunctionDeclaration' ? node : node
    }));
    fnBody.body.unshift({
      type: 'VariableDeclaration',
      kind: 'const',
      declarations
    });
  }

  // 转换回代码字符串
  return escodegen.generate(ast);
}

优势 #

• 精准识别依赖，避免正则的误判；
• 支持复杂作用域和函数结构；
• 更灵活的依赖处理方式（比如变量声明内联而非直接替换）。

总结 #

完全可以实现你需要的bundleFunction()，简单场景用正则+eval就能快速搞定，复杂场景则需要借助AST解析来保证准确性和健壮性。

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