UmiJS 从 v3 升级到 v4 时 useModel 问题的解决方案

问题背景

在将项目从 UmiJS v3 升级到 v4 版本时，开发者可能会遇到一个常见问题：控制台报错提示"No matching export in 'src/.umi/exports.ts' for import 'useModel'"。这个错误表明项目无法正确识别和使用 useModel 这个重要的状态管理功能。

问题根源

UmiJS v4 版本对架构进行了重大调整，将核心功能进行了模块化拆分：

1. umi 包现在是一个轻量级核心，默认不包含任何额外功能
2. @umijs/max 包则继承了原先 v3 版本的大部分内置功能

这种架构变化意味着：

• 如果直接使用 umi 命令，需要手动配置所需插件
• 使用 @umijs/max 则可以获得开箱即用的完整功能体验

解决方案

方案一：使用 @umijs/max（推荐）

最简单的解决方案是将项目迁移到 @umijs/max：

1. 安装依赖：

npm install @umijs/max

2. 修改 package.json 中的 scripts 部分：

{
  "scripts": {
    "dev": "max dev",
    "build": "max build"
  }
}

这种方式无需额外配置即可使用 useModel 等全套功能。

方案二：手动配置插件

如果希望保持轻量级配置，可以手动添加所需插件：

1. 安装插件包：

npm install @umijs/plugins

2. 在配置文件中启用 model 插件：

// .umirc.ts 或 config/config.ts
export default {
  plugins: ['@umijs/plugins/dist/model'],
  model: {}
}

注意事项

1. 清除缓存：在修改配置后，建议执行以下命令清除缓存：

rm -rf node_modules && rm -rf src/.umi && npm install

2. 其他功能迁移：如果项目还使用了其他 UmiJS 功能（如国际化 useIntl），也需要相应配置或迁移到 @umijs/max。

3. 配置验证：修改配置后，建议运行开发服务器验证功能是否正常。

总结

UmiJS v4 的模块化设计提供了更大的灵活性，但也带来了配置上的变化。对于从 v3 升级的项目，推荐使用 @umijs/max 以获得平滑的升级体验。对于追求轻量化的项目，则可以通过手动配置插件的方式按需引入功能。理解这一架构变化，有助于开发者更好地利用 UmiJS v4 的新特性。