微前端 Monorepo 中的共享包 — 完整指南

Source: Dev.to

你的微前端存在一个潜在的 bug，而你还未发现。
用户在 Auth MFE 上登录，认证 token 被保存到 Redux store。随后他们跳转到 Products —— 通过 Module Federation 加载的另一个 MFE。Products 页面却显示未登录。

为什么会这样？ 因为 Products MFE 创建了自己的 Redux store 实例。Auth MFE 则拥有另一个独立的实例。两个 store，两个状态，完全不同步。

这就是团队在构建没有共享包的微前端时遇到的头号问题。

什么是共享包？

位于 monorepo 中的内部库，所有 MFE 都会使用。与其让每个 MFE 各自构建自己的 API 层、Redux store 和 UI 组件，不如在 packages/ 里一次性构建好，然后在各处导入使用。

将生产环境 MFE monorepo 组合在一起的共享包

@myapp/api — 共享 API 层

• 完整的 axios 实例，包含请求拦截器（JWT token 附加）和响应拦截器（401 处理 + token 刷新）
• 失败请求队列 – 当 token 过期时，多个 API 调用会同时失败。队列会保存这些请求，刷新一次 token 后统一重试。
• 按业务域组织的 API 文件夹：Inventory-Apis/、Products-Apis/、Order-Apis/，每个文件夹内都有真实的 CRUD 方法
• 使用 FormData + 进度跟踪的文件上传处理
• 资源 URL 解析

@myapp/store — 共享 Redux Store

• configureStore() 包含 auth reducer
• 完整的 authSlice：7 个 reducer（setIsLoggedIn、setAuthToken、setSessionExpired、setUserInfo、setSellerProfile、setLoading、updateUser）+ 9 个 selector
• 为 TypeScript 准备的自定义 Hook（useAppDispatch、useAppSelector）
• Barrel export 模式 —— 所有内容统一通过一个导入路径
• Module Federation singleton: true 确保 所有 MFE 共享同一个 store 实例

@myapp/uicomponents — 共享 UI

• 使用 react-hot-toast 配置的 CustomToast
• 可复用的 Button 与 Card 组件
• 只需改动一次设计，所有 MFE 自动同步更新

关键的接线方式

• Webpack resolve.alias 在构建时将 @myapp/store 映射到 ./../packages/core/store。
• Module Federation shared: { singleton: true } 在运行时对该包进行去重。

两者缺一不可：

• 仅使用 Alias → 每个 MFE 都会打包自己的副本。
• 仅使用 Singleton → 导入路径未被解析，仍会产生重复的 bundle。

环境配置

• 本地：使用 localhost 端口。
• 生产：使用 Nginx 路径。

这两套配置在源码中并列展示。

进一步阅读

阅读完整的 15 段代码示例指南：
https://blog.srinudesetti.in/micro-frontend/react/shared-packages-micro-frontend-monorepo