使用Rollup打包依赖含Node条件require的UMD浏览器库问题

核心原因 #

@rollup/plugin-commonjs默认会将所有require调用视为静态依赖进行提升处理，哪怕它们处于条件分支中，这就导致原本只在Node环境下执行的require('os')等语句被提前处理，破坏了原有的条件逻辑。

解决方案 #

1. 让CommonJS插件忽略特定Node内置模块的require解析 #

修改rollup.config.js中@rollup/plugin-commonjs的配置，添加ignore选项指定需要忽略的Node内置模块，这样Rollup就不会对这些模块的require调用进行提升或解析：

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

export default {
  input: 'src/index.ts',
  output: {
    file: 'dist/your-library.umd.js',
    format: 'umd',
    name: 'YourLibraryName'
  },
  plugins: [
    nodeResolve({
      browser: true, // 优先解析适合浏览器环境的模块
      preferBuiltins: false // 禁用优先使用Node内置模块的行为
    }),
    commonjs({
      ignore: ['os', 'http', 'https'] // 忽略这些Node内置模块的require处理
    }),
    typescript()
  ]
};

2. 消除缺失内置模块的警告 #

如果配置后仍有关于缺失Node内置模块的警告，可以使用rollup-plugin-ignore插件将这些模块标记为忽略，避免Rollup尝试打包它们：
首先安装插件：

npm install rollup-plugin-ignore --save-dev

然后在配置中添加：

import ignore from 'rollup-plugin-ignore';

export default {
  // ...其他配置
  plugins: [
    ignore(['os', 'http', 'https']), // 提前忽略这些模块
    nodeResolve({ browser: true, preferBuiltins: false }),
    commonjs({ ignore: ['os', 'http', 'https'] }),
    typescript()
  ]
};

3. 验证效果 #

重新执行Rollup构建后，检查生成的bundle文件，原本处于Node环境检测条件内的require('os')等语句应该会保留原有的条件逻辑，不会被提前提升为require$$0之类的调用。

注意：因为这些require语句只在Node环境下执行，而你的库目标是浏览器环境，所以即使保留这些语句也不会在浏览器中触发，不会影响浏览器端的功能。

内容的提问来源于stack exchange，提问作者José Cabo