From 5920bbbe2dd2ff5d56914026d19368c98d2566f0 Mon Sep 17 00:00:00 2001 From: Timeless0911 <1604889533@qq.com> Date: Sat, 14 Jun 2025 19:50:52 +0800 Subject: [PATCH 1/5] docs: how to generate esm outputs for mf format --- .../en/guide/advanced/module-federation.mdx | 26 ++++++++++++++++++- .../zh/guide/advanced/module-federation.mdx | 26 ++++++++++++++++++- 2 files changed, 50 insertions(+), 2 deletions(-) diff --git a/website/docs/en/guide/advanced/module-federation.mdx b/website/docs/en/guide/advanced/module-federation.mdx index b441cb33b..b3a7280a2 100644 --- a/website/docs/en/guide/advanced/module-federation.mdx +++ b/website/docs/en/guide/advanced/module-federation.mdx @@ -87,7 +87,7 @@ In this way, we have completed the integration of Rslib Module as a producer. Af In the above example we added a new `format: 'mf'` , which will help you add an additional Module Federation product, while also configuring the format of `cjs` and `esm` , which does not conflict. -However, if you want this Rslib Module to consume other producers at the same time, do not use the build configuration `remote` parameter, because in other formats, this may cause errors, please refer to the example below using the Module Federation runtime +However, if you want this Rslib Module to consume other producers at the same time, do not use the build configuration `remote` parameter, because in other formats, this may cause errors, please refer to the example below using the Module Federation runtime. ## Develop MF remote module @@ -313,6 +313,8 @@ This ensures that modules can be loaded as expected in multiple formats. ## FAQs +### How to control the loading strategy of shared dependencies when the producer and consumer build patterns are different + If the Rslib producer is built with build, this means that the `process.env.NODE_ENV` of the producer is `production` . If the consumer is started in dev mode at this time, due to the shared loading strategy of Module Federation being `version-first` by default, there may be problems loading into different modes of react and react-dom (e.g. react in development mode, react-dom in production mode). You can set up [shareStrategy](https://module-federation.io/configure/sharestrategy) at the consumer to solve this problem, but make sure you fully understand this configuration @@ -324,6 +326,28 @@ pluginModuleFederation({ }), ``` +### How to make module federated outputs generate export of ES Modules + +If you want Rslib producers' module federated outputs to generate the export of ES Modules, you can additionally configure as follows: + +```ts title='rslib.config.ts' +export default defineConfig({ + lib: [ + { + format: 'mf', + // ... + tools: { + rspack(config) { + config.experiments = { + outputModule: true, + }; + }, + }, + }, + ], +}); +``` + ## Examples [Rslib Module Federation Example](https://github.com/web-infra-dev/rslib/tree/main/examples/module-federation) diff --git a/website/docs/zh/guide/advanced/module-federation.mdx b/website/docs/zh/guide/advanced/module-federation.mdx index 7fead5cf3..587bacd55 100644 --- a/website/docs/zh/guide/advanced/module-federation.mdx +++ b/website/docs/zh/guide/advanced/module-federation.mdx @@ -87,7 +87,7 @@ export default defineConfig({ 在上面的例子中，我们添加了一个新的 `format: 'mf'` ，它将添加一个额外的模块联邦产物，同时还配置了 `cjs` 和 `esm` 的格式，它们是不冲突的。 -但是，如果你希望此 Rslib 模块同时消费其他生产者，请不要使用构建配置 `remote` 参数，因为在其他格式下，这可能会导致错误，请参考下面使用 Module Federation 运行时的示例 +但是，如果你希望此 Rslib 模块同时消费其他生产者，请不要使用构建配置 `remote` 参数，因为在其他格式下，这可能会导致错误，请参考下面使用 Module Federation 运行时的示例。 ## 开发 MF 远程模块 @@ -313,6 +313,8 @@ export const Counter: React.FC = () => { ## FAQs +### 生产者与消费者构建模式不同时如何控制共享依赖的加载策略 + 如果 Rslib 生产者是用 build 构建的， 这意味着生产者中的 `process.env.NODE_ENV` 是 `production` 。如果这时消费者是使用的开发模式启动，由于模块联邦默认使用共享的加载策略，可能会有 react 和 react-dom 加载模式不一致的问题 (比如 react 在 development mode, react-dom 在 production mode)。 你可以在消费者设置 [shareStrategy](https://module-federation.io/zh/configure/sharestrategy) 来解决这个问题，这需要你确保已经完全理解了这个配置。 @@ -323,6 +325,28 @@ pluginModuleFederation({ }), ``` +### 如何让模块联邦产物生成 ES Modules 的导出 + +如果你希望 Rslib 生产者的模块联邦产物生成 ES Modules 的导出，可以额外配置如下： + +```ts title='rslib.config.ts' +export default defineConfig({ + lib: [ + { + format: 'mf', + // ... + tools: { + rspack(config) { + config.experiments = { + outputModule: true, + }; + }, + }, + }, + ], +}); +``` + ## 示例 [Rslib 模块联邦示例](https://github.com/web-infra-dev/rslib/tree/main/examples/module-federation) From b2606f39bf699aa0bd1be71fbc68e4783c6b23b5 Mon Sep 17 00:00:00 2001 From: Timeless0911 <1604889533@qq.com> Date: Sat, 14 Jun 2025 20:03:25 +0800 Subject: [PATCH 2/5] chore: update --- website/docs/en/guide/advanced/module-federation.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/docs/en/guide/advanced/module-federation.mdx b/website/docs/en/guide/advanced/module-federation.mdx index b3a7280a2..299f6feba 100644 --- a/website/docs/en/guide/advanced/module-federation.mdx +++ b/website/docs/en/guide/advanced/module-federation.mdx @@ -326,7 +326,7 @@ pluginModuleFederation({ }), ``` -### How to make module federated outputs generate export of ES Modules +### How to make module federated outputs generate export of ES modules If you want Rslib producers' module federated outputs to generate the export of ES Modules, you can additionally configure as follows: From a5388992c9b6b6e4cfb83b7545e8056bea680015 Mon Sep 17 00:00:00 2001 From: Timeless0911 <50201324+Timeless0911@users.noreply.github.com> Date: Sat, 14 Jun 2025 20:11:17 +0800 Subject: [PATCH 3/5] Update website/docs/zh/guide/advanced/module-federation.mdx --- website/docs/zh/guide/advanced/module-federation.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/docs/zh/guide/advanced/module-federation.mdx b/website/docs/zh/guide/advanced/module-federation.mdx index 587bacd55..a2911d9e4 100644 --- a/website/docs/zh/guide/advanced/module-federation.mdx +++ b/website/docs/zh/guide/advanced/module-federation.mdx @@ -325,7 +325,7 @@ pluginModuleFederation({ }), ``` -### 如何让模块联邦产物生成 ES Modules 的导出 +### 如何让模块联邦产物生成 ES modules 的导出 如果你希望 Rslib 生产者的模块联邦产物生成 ES Modules 的导出，可以额外配置如下： From 8b79565e0e3b9de48f46c2b36c4fc7221ff750f6 Mon Sep 17 00:00:00 2001 From: Timeless0911 <50201324+Timeless0911@users.noreply.github.com> Date: Mon, 16 Jun 2025 12:13:54 +0800 Subject: [PATCH 4/5] Update website/docs/zh/guide/advanced/module-federation.mdx Co-authored-by: Wei --- website/docs/zh/guide/advanced/module-federation.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/website/docs/zh/guide/advanced/module-federation.mdx b/website/docs/zh/guide/advanced/module-federation.mdx index a2911d9e4..b489f8a81 100644 --- a/website/docs/zh/guide/advanced/module-federation.mdx +++ b/website/docs/zh/guide/advanced/module-federation.mdx @@ -335,6 +335,7 @@ export default defineConfig({ { format: 'mf', // ... + // [!code highlight:7] tools: { rspack(config) { config.experiments = { From 4d491f99661477e882ab79e4bb337681c76e9813 Mon Sep 17 00:00:00 2001 From: Timeless0911 <50201324+Timeless0911@users.noreply.github.com> Date: Mon, 16 Jun 2025 12:14:05 +0800 Subject: [PATCH 5/5] Update website/docs/en/guide/advanced/module-federation.mdx Co-authored-by: Wei --- website/docs/en/guide/advanced/module-federation.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/website/docs/en/guide/advanced/module-federation.mdx b/website/docs/en/guide/advanced/module-federation.mdx index 299f6feba..de538c15f 100644 --- a/website/docs/en/guide/advanced/module-federation.mdx +++ b/website/docs/en/guide/advanced/module-federation.mdx @@ -336,6 +336,7 @@ export default defineConfig({ { format: 'mf', // ... + // [!code highlight:7] tools: { rspack(config) { config.experiments = {