Skip to content
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 25 additions & 1 deletion website/docs/en/guide/advanced/module-federation.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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
Expand All @@ -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)
Expand Down
26 changes: 25 additions & 1 deletion website/docs/zh/guide/advanced/module-federation.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ export default defineConfig({

在上面的例子中,我们添加了一个新的 `format: 'mf'` ,它将添加一个额外的模块联邦产物,同时还配置了 `cjs` 和 `esm` 的格式,它们是不冲突的。

但是,如果你希望此 Rslib 模块同时消费其他生产者,请不要使用构建配置 `remote` 参数,因为在其他格式下,这可能会导致错误,请参考下面使用 Module Federation 运行时的示例
但是,如果你希望此 Rslib 模块同时消费其他生产者,请不要使用构建配置 `remote` 参数,因为在其他格式下,这可能会导致错误,请参考下面使用 Module Federation 运行时的示例

## 开发 MF 远程模块

Expand Down Expand Up @@ -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) 来解决这个问题,这需要你确保已经完全理解了这个配置。

Expand All @@ -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)
Expand Down
Loading