示例工程【免费下载链接】module-federation-examplesImplementation examples of module federation , by the creators of module federation项目地址https://gitcode.com/gh_mirrors/mo/module-federation-examples点击查看免费下载导读本指南围绕 module-federation-examples 仓库中的clo示例展开讲解如何基于 Rsbuild底层为 Rspack复刻一套经典的 Create React AppCRA风格模块联邦应用host作为宿主应用动态加载由独立应用remote暴露的组件。读完本文你将掌握 Rsbuild 环境下模块联邦的完整配置方式、宿主端异步加载远程组件的代码模式以及如何用 Playwright 对联邦应用做端到端验证。示例概览一个最基础的 Host-Remote 联邦应用clo是 module-federation-examples 仓库中的一个独立示例目录结构为典型的 pnpm workspace 布局clo/host宿主应用host基于 CRA 风格的项目结构负责在运行时加载远程组件clo/remote独立运行的应用remote对外暴露Button与ServiceComponent两个组件clo/e2ePlaywright 端到端测试clo/playwright.config.tsE2E 测试配置clo/package.json根级 workspace 脚本。从依赖声明可以看到两个子应用都使用 React 17.0.2见 clo/host/package.json 与 clo/remote/package.json而构建链则完全切换到 Rsbuildrsbuild/core1.7.3、rsbuild/plugin-react1.4.5、rspack/core1.7.6。README 标题中的 Create React App Example 指的是项目沿用了 CRA 的目录规范与开发习惯public/、src/、react-scripts风格的脚本入口但实际构建引擎已由 Rsbuild/Rspack 承担。环境准备与依赖安装示例采用 pnpm workspaces 管理host与remote两个子包见 clo/package.json 中的workspaces字段。安装依赖只需在示例目录内执行pnpm install该命令会同时为host和remote安装各自依赖。根级package.json提供了一系列统一入口脚本其中start、build通过pnpm --filter clo_*批量作用于两个子包子包名分别为clo_host与clo_remote。运行演示一键启动双应用在示例目录执行pnpm run start该命令会并行构建并启动host与remote端口分配如下应用端口角色host3000宿主应用消费远程组件remote3002独立远程应用提供组件对应访问地址http://localhost:3000/HOSThttp://localhost:3002/STANDALONE REMOTEremote 既是独立的完整应用可单独打开 3002 端口浏览其自带渲染效果又是 host 的联邦远程提供方这种独立可运行 可被联邦消费的双重身份是模块联邦示例的标准形态。如果希望先构建产物再用静态服务承载根级preview脚本会先执行构建随后通过concurrently同时拉起两个子应用的rsbuild previewpreview: pnpm run build concurrently \pnpm --filter clo_host preview\ \pnpm --filter clo_remote preview\核心配置深度解析rsbuild.config.ts端口、联邦选项与 React 插件host与remote的 rsbuild.config.ts 结构几乎一致仅端口与联邦配置不同。以 host 为例import { defineConfig } from rsbuild/core; import { pluginReact } from rsbuild/plugin-react; //ts-ignore import mfConfig from ./modulefederation.config; import rspack from rspack/core; export default defineConfig({ server: { port: 3000, }, moduleFederation: { options: mfConfig }, plugins: [pluginReact()], tools: { rspack: { output: { publicPath: auto, }, }, }, });关键点说明server.port开发服务器的监听端口remote 侧配置为 3002moduleFederation.options直接引用独立的modulefederation.config.js实现了配置与构建工具解耦——同一份联邦配置既可以喂给 Rsbuild也可以复用到其他基于 Rspack/Webpack 的构建链路plugins: [pluginReact()]启用 Rsbuild 的 React 支持JSX 转换等tools.rspack.output.publicPath: auto产物公共路径设为自动推断这是联邦远程入口能被任意部署路径正确加载的关键——remoteEntry.js及其内部资源引用会基于运行时 URL 自动解析。modulefederation.config.js宿主与远程的联邦契约remote 侧clo/remote/modulefederation.config.js负责暴露const { dependencies } require(./package.json); module.exports { name: remote, shareStrategy: loaded-first, experiments: { asyncStartup: true }, exposes: { ./Button: ./src/Button, ./ServiceComponent: ./src/ServiceComponent, }, filename: remoteEntry.js, shared: { react: { singleton: true, requiredVersion: dependencies[react], }, react-dom: { singleton: true, requiredVersion: dependencies[react-dom], }, }, };配置项解读name: remote联邦模块的唯一标识host 侧通过该名称引用exposes对外暴露的组件映射这里暴露./Button与./ServiceComponentfilename: remoteEntry.js远程入口文件名host 的 remotes 配置依赖此约定sharedsingleton: true将react、react-dom声明为单例共享依赖避免宿主与远程各自实例化一份 React 导致 hooks 状态错乱requiredVersion直接从本地package.json的 dependencies 读取保证版本声明与实际安装版本一致shareStrategy: loaded-first共享依赖的解析策略优先复用已加载的版本experiments.asyncStartup: true启用异步启动实验特性允许应用在远程模块就绪前异步完成初始化。host 侧clo/host/modulefederation.config.js负责消费const { dependencies } require(./package.json); module.exports { name: host, shareStrategy: loaded-first, experiments: { asyncStartup: true }, remotes: { remote: remotehttp://localhost:3002/remoteEntry.js, }, shared: { ...dependencies, react: { singleton: true, requiredVersion: dependencies[react], }, react-dom: { singleton: true, requiredVersion: dependencies[react-dom], }, }, };与 remote 相比host 侧的核心差异在于remotes字段remote键对应远程模块名值为remotehttp://localhost:3002/remoteEntry.js即名称远程入口地址的标准格式。host 的shared中...dependencies将全部依赖声明纳入共享候选再对 React 相关依赖做单例强化。应用代码实现宿主动态加载远程组件宿主侧React.lazy Suspense 消费远程组件clo/host/src/App.js 演示了宿主消费远程组件的标准姿势import React from react; const RemoteButton React.lazy(() import(remote/Button)); const ServiceComponent React.lazy(() import(remote/ServiceComponent)); const App () ( div h1Basic Host-Remote/h1 h2Host/h2 React.Suspense fallbackLoading Button RemoteButton / ServiceComponent / /React.Suspense /div ); export default App;注意这里import(remote/Button)的remote前缀并非 npm 包名而是对应modulefederation.config.js中remotes.remote声明的联邦远程名/Button则匹配远程exposes中暴露的./Button模块。React.lazy配合React.Suspense将远程模块的加载过程转化为声明式渲染加载期间展示 fallback 内容。入口文件 clo/host/src/index.js 使用 React 17 时代的ReactDOM.render挂载应用。远程侧组件即服务remote 暴露的两个组件各有侧重Button.js纯静态组件渲染 Hello from remote 12345 按钮用于验证联邦加载链路是否打通ServiceComponent.js演示组件内数据获取 Suspense它实现了一个手写的fetchData(url)缓存封装——首次调用发起fetch请求read()在请求未完成时抛出 Promise 使组件进入挂起态数据就绪后返回 JSON。组件从https://jsonplaceholder.typicode.com/todos/1拉取示例数据外层用Suspense提供 Loading... 回退。remote 自身也在 clo/remote/src/App.js 中本地渲染Button与ServiceComponent证明远程应用可脱离宿主独立运行这正是 3002 端口访问到完整页面的原因。从 CRA 到 Rsbuild构建链的迁移痕迹clo目录下保留了完整的 CRA 兼容层为理解示例来源提供了线索clo/host/scripts/start.js 仍以react-scripts/scripts/start作为启动入口clo/host/scripts/overrides/webpack-config.js 通过改写react-scripts/config/webpack.config的缓存导出向 CRA 的 webpack 配置注入module-federation/enhanced/webpack的ModuleFederationPlugin并强制config.output.publicPath auto其参数直接取自同级的modulefederation.config.jsconst { ModuleFederationPlugin } require(module-federation/enhanced/webpack); const override config { config.plugins.push(new ModuleFederationPlugin(require(../../modulefederation.config.js))); config.output.publicPath auto; return config; };remote 侧的scripts目录结构与此对称。从源码结构可以推断该示例的前身是标准的 CRAreact-scripts工程通过覆盖 webpack 配置接入模块联邦而当前子包的start/build脚本已切换为rsbuild dev/rsbuild build见 clo/host/package.jsonscripts目录成为保留的兼容层。这套同一份 modulefederation.config.js 同时服务 CRA webpack 链路与 Rsbuild 链路的设计正是 README 标题中 Rsbuild / Create React App 并置的用意。端到端验证Playwright 测试示例自带完整的 E2E 测试体系。测试用例位于 clo/e2e/checkCraApps.spec.ts对 host3000与 remote3002两个端口分别断言await expect(page.getByRole(heading, { level: 1 })).toContainText(Basic Host-Remote); await expect(page.getByRole(heading, { level: 2, name })).toBeVisible(); await expect(page.getByRole(button)).toContainText(Hello from remote);即页面须包含一级标题 Basic Host-Remote、与当前应用名Host/Remote一致的二级标题以及来自远程组件的 Hello from remote 按钮——最后一个断言在 host 侧恰好验证了联邦远程模块是否被正确加载。运行方式有两种见 clo/package.json# 交互式 UI 模式运行测试 pnpm test:e2e:ui # 构建应用、启动双服务器并以无头模式运行测试 pnpm e2e:cie2e:ci实际执行pnpm run build pnpm exec playwright test --reporterlist。Playwright 的webServer配置clo/playwright.config.ts会预先以pnpm --filter clo_host preview与pnpm --filter clo_remote preview分别拉起 3000 和 3002 端口的静态服务并设置 120 秒启动超时、失败时保留截图与视频便于 CI 环境排查。端口与脚本速查用途命令在clo目录执行说明安装依赖pnpm install安装 host/remote 全部依赖启动开发服务pnpm run starthost 3000、remote 3002构建产物pnpm run build批量构建两个子包构建并预览pnpm run preview构建后并发预览交互式 E2Epnpm test:e2e:uiPlaywright UI 模式无头 E2Epnpm e2e:ci构建 启动 无头测试小结clo示例用最精炼的代码量演示了模块联邦在 Rsbuild/Rspack 构建链下的完整闭环remote 通过exposes暴露组件并以remoteEntry.js对外提供host 通过remotes声明远程地址并用React.lazySuspense异步消费同时保留的 CRA 兼容层展示了modulefederation.config.js单一配置复用于 Webpack 与 Rsbuild 两种链路的能力。对希望从 CRA 平滑迁移到 Rsbuild 并引入模块联邦的团队而言这是一个结构清晰、可照搬的最小参考实现。赞分享示例工程【免费下载链接】module-federation-examplesImplementation examples of module federation , by the creators of module federation项目地址https://gitcode.com/gh_mirrors/mo/module-federation-examples点击查看免费下载相关推荐基于 Modern.js 的模块联邦入门实战basic-host-remote 单向 Host/Remote 集成示例基于 Modern.js 的模块联邦入门实战basic host remote 单向 Host/Remote 集成示例 本指南围绕 module federa示例工程module-federation-examples basic-host-remote用 Modern.js 搭建最小 Host-Remote 模块联邦示例module federation examples basic host remote用 Modern.js 搭建最小 Host Remote 模块联邦示例示例工程bi-directional 双向模块联邦实战以 Modern.js App2 为例构建同时暴露与消费联邦模块的 Host/Remote 应用bi directional 双向模块联邦实战以 Modern.js App2 为例构建同时暴露与消费联邦模块的 Host/Remote 应用 双向Bi示例工程上一篇洛雪音乐音源完全指南三步解锁全网无损音乐资源下一篇ImageJ终极指南免费开源的科学图像处理神器快速上手创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考