Rollup插件中多模块项目构建问题的解决方案

问题背景

在使用Rollup构建工具进行多模块项目开发时，开发者可能会遇到一个奇怪的现象：在watch模式下，需要多次保存文件才能使代码变更正确编译。这种现象特别容易出现在使用monorepo结构的项目中，其中包含多个相互依赖的子模块。

问题现象

具体表现为：

1. 开发者修改源代码后保存
2. 第一次保存后，构建输出没有包含所有变更
3. 需要第二次保存才能使所有变更生效
4. 这种现象严重影响了开发效率

问题根源分析

经过深入排查，发现问题主要与以下因素有关：

1. 项目结构问题：项目采用了monorepo结构，包含多个相互依赖的子模块
2. TypeScript配置不当：项目中存在多个tsconfig.json文件，且配置了composite和outDir选项
3. 插件使用问题：@rollup/plugin-node-resolve插件的使用方式不当

解决方案

要彻底解决这个问题，需要进行以下调整：

1. 简化TypeScript配置

移除项目中所有子模块的tsconfig.json文件，仅在项目根目录保留一个全局的tsconfig.json。这个全局配置中不应包含composite和outDir选项。

2. 调整Rollup配置

在rollup.config.js中，通过rollup插件直接指定输出目录，而不是在TypeScript配置中设置。对于@rollup/plugin-node-resolve插件，可以这样配置：

nodeResolve({
    resolveOnly: (module) => !module.includes('@project'),
})

3. 构建流程优化

确保构建流程遵循以下原则：

• 单一配置源：TypeScript配置集中在根目录
• 明确输出目录：在Rollup配置中指定输出位置
• 简化模块解析：合理配置node-resolve插件

实施效果

经过上述调整后：

• 构建过程变得稳定可靠
• watch模式下变更能够立即生效
• 构建输出包含所有依赖模块
• 开发体验显著提升

经验总结

这个案例告诉我们，在复杂项目结构中，构建工具的配置需要特别注意以下几点：

1. 避免配置分散：配置信息应该尽可能集中管理
2. 明确职责划分：TypeScript负责类型检查，Rollup负责打包
3. 插件合理使用：理解每个插件的功能边界和最佳实践

通过这种结构化的配置方式，可以避免许多构建过程中的奇怪问题，提高开发效率。