求Browserify转换插件：打包时执行IIFE并替换为执行结果

嘿，这个需求我之前刚好折腾过，跟你想要的完全匹配——不用替换原生函数调用，而是直接在打包阶段把指定IIFE的执行结果嵌到代码里。下面给你讲清楚怎么实现，还有现成的思路可以抄：

核心思路 #

Browserify的Transform本质就是个“源码转换器”：它接收要打包的源码字符串，你可以对它做任何修改，最后返回处理后的代码。我们要做的就是在Node环境里执行目标IIFE，把原IIFE代码直接替换成执行后的结果，跟brfs替换fs.readFileSync的路子差不多，但更灵活。

自定义Transform代码实现 #

我给你写个最小可用的版本，用AST解析来精准定位目标IIFE（比正则靠谱多了）：

首先安装依赖：

npm install acorn acorn-walk vm

然后写你的transform文件（比如iife-exec-transform.js）：

const acorn = require('acorn');
const walk = require('acorn-walk');
const vm = require('vm');
const fs = require('fs');

module.exports = function(file) {
  // 返回处理源码的函数
  return function(buf) {
    const sourceCode = buf.toString();
    const ast = acorn.parse(sourceCode, { ecmaVersion: 'latest', locations: true });
    let modifiedCode = sourceCode;

    // 遍历AST找目标IIFE
    walk.simple(ast, {
      CallExpression(node) {
        // 识别：自执行的函数表达式/声明，且函数名为thatWillBeRunIntoBrowserify
        const isTargetIIFE = node.callee.type === 'FunctionExpression' && 
                             node.callee.id?.name === 'thatWillBeRunIntoBrowserify';
        
        if (isTargetIIFE) {
          // 提取函数体的代码内容
          const funcBodyLines = node.callee.body.body.map(stmt => {
            return sourceCode.slice(stmt.start, stmt.end);
          }).join('\n');

          // 在隔离的Node环境里执行这个函数体（避免污染全局）
          const context = {
            // 给执行环境注入需要的依赖，比如fs
            fs: fs,
            require: require,
            module: module
          };
          try {
            // 把函数体包装成自执行函数执行，拿到结果
            const executionResult = vm.runInNewContext(
              `(() => { ${funcBodyLines} })()`,
              context,
              { filename: file } // 报错时能定位到原文件
            );

            // 把原IIFE调用替换成执行结果的JSON字符串
            const originalIIFECall = sourceCode.slice(node.start, node.end);
            modifiedCode = modifiedCode.replace(originalIIFECall, JSON.stringify(executionResult));
          } catch (err) {
            // 出错时给出明确提示，方便调试
            throw new Error(`执行IIFE出错（文件：${file}，位置：${node.loc.start.line}:${node.loc.start.column}）：${err.message}`);
          }
        }
      }
    });

    return modifiedCode;
  };
};

怎么用这个Transform？ #

有两种方式：

1. 命令行直接用：

browserify your-entry-file.js -t ./iife-exec-transform.js -o bundle.js

2. 在package.json里配置：

{
  "browserify": {
    "transform": ["./iife-exec-transform.js"]
  }
}

之后直接跑browserify your-entry-file.js -o bundle.js就会自动应用这个转换。

进阶优化建议 #

如果要用到生产环境，还可以加这些优化：

• 缓存机制：把已经执行过的IIFE结果缓存起来，避免每次打包重复执行，提升速度
• 更灵活的标记方式：比如用注释/* browserify-exec */标记要执行的IIFE，不用依赖函数名，更通用
• 异步支持：如果你的IIFE里有异步操作，可以用Browserify的异步Transform API（返回Promise）来处理
• 结果类型处理：比如如果执行结果是函数，JSON.stringify会变成null，这时候可以改成把函数源码直接保留，或者做特殊处理

现成工具参考 #

要是不想自己写轮子，可以看看static-module这个库，它支持把模块里的静态计算部分替换成结果，你可以自定义规则来匹配你的IIFE，配置好之后也能实现你要的效果。

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