- A+
所属分类：Web前端
新项目用 umi4-max 搭建，部分功能想要使用其他项目的功能，不想重新开发，想到了使用 webpack5 的联邦模块，可以直接引用其他项目代码来实现共享代码。
理想很美好，现实很残酷。直接按照 webpack5 联邦模块的使用方法，并不能成功，而官方文档没有明确说明如何使用。
webpack 联邦模块如何使用呢？
理解：
- 使用场景：项目A有一个功能，项目B也想用。此时可以用。
- 使用前提：依赖 webpack5，且主要依赖相同（如都依赖react)
说明：项目A需要用项目B的代码，项目A为导入项目，项目B为导出项目。
相关配置字段说明：
| 字段名 | 类型 | 含义 |
|---|---|---|
| name | string | 必传值，即输出的模块名，被远程引用时路径为 name/{name}/name/ |
| library | string | 声明全局变量的方式，name 为 umd 的 name |
| filename | string | 构建输出的文件名 |
| remotes | object | 远程引用的应用名及其别名的映射，使用时以 key 值作为 name |
| exposes | object | 被远程引用时可暴露的资源路径及其别名 |
| shared | object | 与其他应用之间可以共享的第三方依赖，使你的代码中不用重复加载同一份依赖 |
1. 普通项目
1.1 导出项目
配置要导出的功能模块
// 配置文件 const { ModuleFederationPlugin } = require("webpack").container; const packageDeps = require('../package.json').dependencies new ModuleFederationPlugin({ name: "app1", filename: "remoteEntry.js", // 表示导出的模块，只有在此申明的模块才可以作为远程依赖被使用。 exposes: { "./CounterAppOne": "./src/components/CounterAppOne", }, shared: { ...packageDeps, react: { singleton: true, eager: true, requiredVersion: deps.react }, "react-dom": { singleton: true, eager: true, requiredVersion: deps["react-dom"], }, "react-router-dom": { singleton: true, eager: true, requiredVersion: deps["react-router-dom"], }, }, }) 1.2 导入项目
配置要导入的功能模块的文件地址
// 配置文件 const { ModuleFederationPlugin } = require("webpack").container; const packageDeps = require('../package.json').dependencies new ModuleFederationPlugin({ name: "container", // 将其它项目的 name 映射到当前项目中 remotes: { app1: 'app1@http://localhost:3001/remoteEntry.js', }, // 是非常重要的参数，制定了这个参数，可以让远程加载的模块对应依赖改为使用本地项目的 React 或 ReactDOM。 shared: { ...packageDeps, react: { singleton: true, eager: true, requiredVersion: deps.react }, "react-dom": { singleton: true, eager: true, requiredVersion: deps["react-dom"], }, "react-router-dom": { singleton: true, eager: true, requiredVersion: deps["react-router-dom"], }, }, }) react 项目中使用
// 通过 webpack 关联其它应用，然后按需加载 const CounterAppOne = React.lazy(() => import("app1/CounterAppOne")) export default () => { return ( <React.Suspense fallback={<div>Loading</div>}> <CounterAppOne /> </React.Suspense> ) } 2. umi3 项目
2.1 导出项目
配置
// .umirc.ts publicPath:'http://127.0.0.1:5502/', webpack5: {}, // 开启 webpack5 chainWebpack: (config) => { config.output.publicPath('auto'); // 路径处理，保证导入项目路径正确 const { ModuleFederationPlugin } = require("webpack").container; const packageDeps = require('./package.json').dependencies config.plugin('mf').use(ModuleFederationPlugin, [{ name: "app1", filename: 'remoteEntry.js', exposes: { "./Test": '@/pages/test.tsx', }, shared: { react: { eager: true }, "react-dom": { eager: true } }, }]) return config; } 2.2 导入项目
安装插件：yarn install umi-plugin-mf-bootstrap 支持入口异步导入，以便支持使用 hooks。如果不安装，会报错 Uncaught Error: Shared module is not available for eager consumption。具体原因为：违背了 hooks 的使用规则，不能用两个 React 实例。
插件内容：
import { IApi } from 'umi'; import { resolve } from 'path'; import { readFileSync } from 'fs'; export default (api: IApi) => { api.onGenerateFiles(() => { const buffer= readFileSync(resolve('./src/.umi/umi.ts')) const c = String(buffer) // console.log() api.writeTmpFile({ path: 'index.ts', content: c, }); api.writeTmpFile({ path: 'umi.ts', content: 'import("./index")', }); }); }; 配置
// .umirc.ts dynamicImport:{}, webpack5: {}, // 开启 webpack5 chainWebpack: (config) => { const { ModuleFederationPlugin } = require("webpack").container; config.plugin('mf').use(ModuleFederationPlugin, [{ name: "app2", remotes: { "app1": "app1@http://127.0.0.1:5502/dist/remoteEntry.js", }, shared: { react: { eager: true }, "react-dom": { eager: true } }, }]) return config; } 使用和普通项目一致
3. umi4-max 项目
按照 umi3 的方案，没有成功。多方查阅摸索后，最终通过查阅官方 github 代码，看到有个插件中有个 mf 的文件，阅读代码后，摸索出最终的方案了。
导出项目配置和 umi3 的一致，而导入项目只需按照下面的配置即可，使用和普通项目一致。
// .umirc.ts mf: { name: 'app2', remotes: [ { name: 'app1', entry: 'http://127.0.0.1:5502/dist/remoteEntry.js' }, ], shared: { react: { eager: true }, "react-dom": { eager: true } }, } 关于 mf 插件的详细使用：可参考官方 github 代码 Module Federation 插件，后来找到的。
其他相关实现：
4. vite 项目
4.1 导出项目
配置
// vite.config.js 或 rollup.config.js import federation from "@originjs/vite-plugin-federation"; export default { plugins: [ federation({ name: "remote-app", filename: "remoteEntry.js", // 需要暴露的模块 exposes: { "./Button": "./src/Button.vue", }, shared: ["vue"], }), ], }; 4.2 导入项目
配置
// vite.config.js 或 rollup.config.js import federation from "@originjs/vite-plugin-federation"; export default { plugins: [ federation({ name: "host-app", remotes: { remote_app: "http://localhost:5001/assets/remoteEntry.js", }, shared: ["vue"], }), ], }; react 项目中使用
// dynamic import const myButton = React.lazy(() => import('remote/myButton')) // static import import myButton from 'remote/myButton' 备注：React 使用 federation 问题解决：
建议查看这个 Issue，里面包含了大多数 React 相关的问题
常见问题：远程模块加载本地模块的共享依赖失败，报错:
localhost/:1 Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: http:your url 原因：Vite 在启动服务时对于 IP、Port 有自动获取逻辑，在 Plugin 中还没有找到完全对应的获取逻辑，在部分情况下可能会出现获取失败。
解决：
在本地模块显式到声明 IP、Port、cacheDir，保证我们的 Plugin 可以正确的获取和传递依赖的地址。
// 本地模块的 vite.config.ts export default defineConfig({ server:{ https: "http", host: "192.168.56.1", port: 5100, }, cacheDir: "node_modules/.cacheDir", } 建议阅读：
- vite-plugin-federation 详细设计
- Webpack 5 Module Federation: JavaScript 架构的变革者
- 三大应用场景调研，Webpack 新功能 Module Federation 深入解析
参考：
- 问题解决 Webpack 模块联合不适用于急切的共享库
- 实现案例 webpack-module-fedaration-sandbox
- umi3 使用联邦模块 Umi使用webpack5 Module Federation
