diff --git a/website/docs/en/guide/advanced/module-federation.mdx b/website/docs/en/guide/advanced/module-federation.mdx index b441cb33b..de538c15f 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,29 @@ 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', + // ... + // [!code highlight:7] + 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..b489f8a81 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,29 @@ pluginModuleFederation({ }), ``` +### 如何让模块联邦产物生成 ES modules 的导出 + +如果你希望 Rslib 生产者的模块联邦产物生成 ES Modules 的导出,可以额外配置如下: + +```ts title='rslib.config.ts' +export default defineConfig({ + lib: [ + { + format: 'mf', + // ... + // [!code highlight:7] + tools: { + rspack(config) { + config.experiments = { + outputModule: true, + }; + }, + }, + }, + ], +}); +``` + ## 示例 [Rslib 模块联邦示例](https://github.com/web-infra-dev/rslib/tree/main/examples/module-federation)