使用Rollup.js打包IIFE模块遇问题，寻求技术指导

我之前也碰到过类似的情况，这种同时兼容浏览器全局变量和Node.js CommonJS的IIFE模块，确实容易让Rollup的自动识别机制“卡壳”。先帮你拆解下你的模块逻辑：它会判断环境，如果是浏览器（exports不存在）就把sax对象挂载到全局this上，如果是Node环境就挂载到exports，本质是个兼容写法的模块，但Rollup默认可能没法直接解析它的导出。

下面是具体的配置调整方案，一步步来：

1. 替换成最新的Rollup插件（可选但推荐） #

你原来用的rollup-plugin-commonjs和rollup-plugin-node-resolve是旧版插件，现在官方推荐使用@rollup/plugin-commonjs和@rollup/plugin-node-resolve，功能更稳定，兼容性更好。先安装它们：

npm install @rollup/plugin-commonjs @rollup/plugin-node-resolve --save-dev

2. 调整rollup.config.js配置 #

核心是告诉Rollup如何识别这个IIFE模块的导出，以及指定全局变量名和输出格式：

import commonjs from '@rollup/plugin-commonjs';
import { nodeResolve } from '@rollup/plugin-node-resolve';

export default {
  // 替换成你的IIFE模块入口路径（如果是node_modules里的sax包，就是'node_modules/sax/lib/sax.js'）
  input: 'path/to/your/sax-module.js',
  output: {
    file: 'dist/sax.bundle.js',
    format: 'iife', // 浏览器环境用iife格式，若要兼容Node和浏览器可以用umd
    name: 'sax', // 必须和模块里挂载的全局变量名一致（你的模块里是this.sax = {}）
    sourcemap: true // 方便调试，可选
  },
  plugins: [
    nodeResolve({
      browser: true, // 开启浏览器环境适配，处理模块的浏览器兼容逻辑
      preferBuiltins: false // 禁用Node内置模块优先，避免浏览器环境报错
    }),
    commonjs({
      // 指定要处理的模块路径，如果是node_modules里的就写'node_modules/sax/**'
      include: 'path/to/your/sax-module.js',
      // 手动指定模块的导出成员——因为你的IIFE模块没有明确的export语句，Rollup没法自动识别
      namedExports: {
        'path/to/your/sax-module.js': ['parser', 'SAXParser', 'SAXStream', 'createStream']
      }
    })
  ]
};

3. 关键配置解释 #

• output.name: 这个必须和你的IIFE模块里挂载的全局变量名完全一致（也就是this.sax = {}里的sax），这样Rollup打包后会把模块正确挂载到浏览器全局对象上。
• commonjs.namedExports: 由于你的模块是通过修改exports或全局对象来暴露成员，不是标准的module.exports写法，Rollup无法自动识别导出的内容，所以需要手动列出所有要导出的成员。
• nodeResolve.browser: 开启后，插件会优先选择模块的浏览器兼容版本，避免引入Node环境特有的代码。

4. 测试打包结果 #

运行Rollup打包后，在浏览器里引入生成的dist/sax.bundle.js，打开控制台输入sax.parser，如果能看到对应的函数，就说明打包成功了！

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