Rollup插件中requireReturnsDefault配置的陷阱与解决方案

问题背景

在使用Rollup构建工具打包项目时，开发者经常会遇到CommonJS模块与ES模块混用的情况。@rollup/plugin-commonjs插件作为处理这类场景的关键工具，其requireReturnsDefault配置项本应智能地处理模块导出问题，但在某些特定情况下却会导致打包结果异常。

问题现象

当使用requireReturnsDefault: "auto"配置时，某些库（如Material UI）的打包结果会出现双重默认导出的问题。具体表现为：

1. 打包后的代码中，原本应该直接可用的函数变成了需要访问两层default属性才能调用
2. 运行时抛出TypeError: (0 , _createTheme.default) is not a function错误
3. 实际上需要调用_createTheme.default.default才能正常工作

技术原理分析

这个问题源于CommonJS模块与ES模块的互操作机制：

1. 模块导出差异：CommonJS使用module.exports，而ES模块使用export default
2. 互操作包装：Rollup会生成_interopRequireDefault辅助函数来处理这种差异
3. 双重包装：某些库的模块结构会导致默认导出被多次包装，形成default.default的嵌套结构

解决方案

临时解决方案

开发者可以通过显式指定哪些模块不需要默认导出包装来解决问题：

{
  requireReturnsDefault: (id) => 
    /createTheme|styled-engine|styleFunctionSx/.test(id) ? false : "auto"
}

根本解决方案

对于长期维护的项目，建议：

1. 检查依赖库的模块系统：确认问题库是否提供了ES模块版本
2. 升级依赖：查看是否有修复了此问题的较新版本
3. 模块系统统一：尽可能使用纯ES模块的依赖关系

最佳实践

1. 谨慎使用"auto"：虽然方便，但在复杂项目中可能不够可靠
2. 测试关键路径：确保所有重要功能在打包后都能正常工作
3. 监控构建结果：定期检查打包输出，特别是当更新依赖时

总结

Rollup的requireReturnsDefault: "auto"配置在大多数情况下工作良好，但在处理某些特定的库时可能会出现双重默认导出的问题。理解模块系统的差异和互操作机制对于解决这类问题至关重要。开发者应当根据项目实际情况选择合适的解决方案，并在构建流程中加入适当的验证步骤，确保打包结果的正确性。