Umi.js 项目中如何配置子包引用与热更新

在基于 Umi.js 构建的 monorepo 项目中，开发者经常会遇到需要引用其他子包的情况。本文将详细介绍如何正确配置 Umi.js 项目以支持子包引用，并实现热更新功能。

子包引用问题分析

当在 Umi.js 项目（如 packages/web）中引用其他子包（如 packages/react 或 packages/core）时，常见的错误提示是需要安装这些依赖包。这是因为默认情况下，Umi.js 的 MFSU（Module Federation Speed Up）功能会将这些子包视为外部依赖。

解决方案

1. 排除子包从 MFSU

通过在 .umirc.ts 配置文件中添加以下配置，可以告诉 Umi.js 不要将这些子包视为外部依赖：

mfsu: {
  exclude: ['@note/react']
}

这样配置后，Umi.js 将不再尝试从外部加载这些子包，而是直接从项目内部引用。

2. 启用 monorepo 重定向功能

对于 TypeScript 项目，还需要启用 monorepoRedirect 功能，它会自动为子包添加正确的 alias 路径：

monorepoRedirect: {}

这个配置会自动处理以下情况：

• 将子包的引用重定向到源码位置
• 支持 TypeScript 源码的热更新
• 自动处理子包之间的依赖关系

实现原理

Umi.js 的这套解决方案基于以下技术原理：

1. MFSU 排除机制：通过排除特定包，让构建系统知道这些是本地开发的包而非外部依赖。

2. 路径重定向：monorepoRedirect 功能会在底层自动创建正确的路径映射，确保引用的子包能够正确解析到源码位置。

3. 热更新支持：对于 TypeScript 项目，系统会监控子包的源码变化并触发相应的重新编译和热更新。

最佳实践

1. 对于 monorepo 项目，建议始终启用 monorepoRedirect 功能。

2. 确保所有子包都有正确的 package.json 配置，特别是 name 字段需要与引用时使用的名称完全一致。

3. 如果子包有 TypeScript 类型定义，确保它们被正确导出。

4. 在开发过程中，可以同时运行子包的 watch 命令和主项目的 dev 命令，以获得最佳的热更新体验。

通过以上配置和方法，开发者可以轻松地在 Umi.js 项目中管理和引用子包，同时享受完整的开发体验和热更新功能。