使用Rollup打包React+TS组件库后出现'fs'模块解析失败问题求助

核心原因 #

直接使用本地src组件正常，但打包后出现fs错误，本质是Rollup将Node.js内置模块（如fs）打包进了产物，而浏览器环境不支持这类模块。组件库依赖的部分包可能在Node环境下调用了fs，但打包时未正确处理其浏览器兼容逻辑。

解决方案 #

1. 配置Rollup排除Node内置模块 #

在rollup.config.js中添加如下配置，明确排除fs等无需打包的内置模块：

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

export default {
  // ...其他基础配置
  plugins: [
    resolve({
      browser: true, // 优先使用依赖包的浏览器兼容版本
      preferBuiltins: false, // 禁用Node内置模块的自动polyfill
    }),
    commonjs(),
  ],
  external: ['fs', 'path'], // 标记fs为外部依赖，不打包进产物
};

2. 调整package.json依赖声明 #

• 将Node环境专用工具（如构建、测试类包）放在devDependencies中，避免生产依赖引入Node专属模块
• 若某个生产依赖确实用到fs，确认它是否有浏览器兼容分支，或在打包时替换为浏览器可用版本

3. 适配引入方的Webpack配置（针对Create React App项目） #

如果引入方使用CRA，通过config-overrides.js添加fs的空解析规则：

const webpack = require('webpack');

module.exports = function override(config) {
  config.resolve.fallback = {
    ...config.resolve.fallback,
    fs: false, // 将fs解析为空模块，规避编译错误
    path: false,
  };
  config.plugins.push(
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
    })
  );
  return config;
};

4. 修正TypeScript配置 #

确保tsconfig.json的编译目标适配浏览器环境：

{
  "compilerOptions": {
    "target": "ES5",
    "module": "ESNext",
    "lib": ["DOM", "ESNext"],
    "moduleResolution": "node",
    "skipLibCheck": true
    // ...其他配置
  }
}

验证流程 #

1. 重新打包组件库：执行rollup -c
2. 本地测试：重新运行npm link并重启引入方项目
3. 线上测试：发布新版本后重新安装，确认编译正常

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