Skip to content
Merged
Show file tree
Hide file tree
Changes from all 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
5 changes: 5 additions & 0 deletions .changeset/giant-falcons-tie.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@module-federation/enhanced': patch
---

feat(enhanced): runtimePlugins support pass params
2 changes: 1 addition & 1 deletion apps/website-new/docs/en/configure/_meta.json
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
{
"type": "file",
"name": "runtimeplugins",
"label": "Runtime Plugins"
"label": "runtimePlugins"
},
{
"type": "file",
Expand Down
58 changes: 56 additions & 2 deletions apps/website-new/docs/en/configure/runtimeplugins.mdx
Original file line number Diff line number Diff line change
@@ -1,15 +1,20 @@
# runtimePlugins

- Type: `string[]`
- Type: `string[] | Array<[string, object]>`
- Required: No
- Default: `undefined`

The `runtimePlugins` configuration is used to add additional plugins needed at runtime. The value should be the path to the specific plugin, which can be an absolute/relative path or a package name. You can learn more about how to develop `runtimePlugin` details by visiting the [Plugin System](../plugin/dev/index).
The `runtimePlugins` configuration is used to add additional plugins needed at runtime. The value can be:
- A string representing the path to the specific plugin (absolute/relative path or package name)
- An array where each element can be either a string or a tuple with [string path, object options]

You can learn more about how to develop `runtimePlugin` details by visiting the [Plugin System](../plugin/dev/index).

Once set, runtime plugins will be automatically injected and used during the build process.

- Examples

**Basic usage:**
To create a runtime plugin file, you can name it `custom-runtime-plugin.ts`:

```ts title="custom-runtime-plugin.ts"
Expand Down Expand Up @@ -47,3 +52,52 @@ module.exports = {
],
};
```

**With options:**
You can also provide options to runtime plugins by using a tuple format:

```ts title="rspack.config.ts"
const path = require('path');
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: 'host',
remotes: {
'manifest-provider':
'manifest_provider@http://localhost:3011/mf-manifest.json',
},
runtimePlugins: [
path.resolve(__dirname, './custom-runtime-plugin.ts'),
[
path.resolve(__dirname, './another-plugin.ts'),
{
debug: true,
timeout: 5000,
customConfig: 'value'
}
]
],
}),
],
};
```

The plugin can then access these options:

```ts title="another-plugin.ts"
import { ModuleFederationRuntimePlugin } from '@module-federation/enhanced/runtime';

export default function (options: any): ModuleFederationRuntimePlugin {
console.log('Plugin options:', options);

return {
name: 'another-plugin',
beforeInit(args) {
if (options.debug) {
console.log('[debug] beforeInit: ', args);
}
return args;
},
};
}
```
61 changes: 58 additions & 3 deletions apps/website-new/docs/zh/configure/runtimeplugins.mdx
Original file line number Diff line number Diff line change
@@ -1,15 +1,20 @@
# runtimePlugins

- 类型:`string[]`
- 类型:`string[] | Array<[string, object]>`
- 是否必填:否
- 默认值:`undefined`

用于添加运行时需要的额外插件,值为具体插件的路径,支持绝对/相对路径、包名,通过「[插件系统](../plugin/dev/index)」了解更多关于如何开发 runtimePlugin 细节。
用于添加运行时需要的额外插件。值可以是:
- 表示具体插件路径的字符串(支持绝对/相对路径、包名)
- 一个数组,其中每个元素可以是字符串或元组 [字符串路径, 对象配置]

通过「[插件系统](../plugin/dev/index)」了解更多关于如何开发 runtimePlugin 细节。

设置后,运行时插件会自动在构建时注入并使用。

- examples
- 示例

**基础用法:**
创建运行时插件文件: `custom-runtime-plugin.ts`

```ts title="custom-runtime-plugin.ts"
Expand Down Expand Up @@ -48,3 +53,53 @@ module.exports = {
],
};
```

**带参数用法:**
你还可以通过使用元组格式为运行时插件提供配置选项:

```ts title="rspack.config.ts"
const path = require('path');
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: 'host',
remotes: {
'manifest-provider':
'manifest_provider@http://localhost:3011/mf-manifest.json',
},
runtimePlugins: [
path.resolve(__dirname, './custom-runtime-plugin.ts'),
[
path.resolve(__dirname, './another-plugin.ts'),
{
debug: true,
timeout: 5000,
customConfig: 'value'
}
]
],
}),
],
};

```

插件可以访问这些配置选项:

```ts title="another-plugin.ts"
import { ModuleFederationRuntimePlugin } from '@module-federation/enhanced/runtime';

export default function (options: any): ModuleFederationRuntimePlugin {
console.log('插件配置:', options);

return {
name: 'another-plugin',
beforeInit(args) {
if (options.debug) {
console.log('[调试] beforeInit: ', args);
}
return args;
},
};
}
```
Original file line number Diff line number Diff line change
Expand Up @@ -82,19 +82,30 @@ class FederationRuntimePlugin {
);

let runtimePluginTemplates = '';
const runtimePluginNames: string[] = [];
const runtimePluginCalls: string[] = [];

if (Array.isArray(runtimePlugins)) {
runtimePlugins.forEach((runtimePlugin, index) => {
if (!runtimePlugin) {
return;
}
const runtimePluginName = `plugin_${index}`;
const runtimePluginEntry = Array.isArray(runtimePlugin)
? runtimePlugin[0]
: runtimePlugin;
const runtimePluginPath = normalizeToPosixPath(
path.isAbsolute(runtimePlugin)
? runtimePlugin
: path.join(process.cwd(), runtimePlugin),
path.isAbsolute(runtimePluginEntry)
? runtimePluginEntry
: path.join(process.cwd(), runtimePluginEntry),
);

const paramsStr =
Array.isArray(runtimePlugin) && runtimePlugin.length > 1
? JSON.stringify(runtimePlugin[1])
: 'undefined';
runtimePluginTemplates += `import ${runtimePluginName} from '${runtimePluginPath}';\n`;
runtimePluginNames.push(runtimePluginName);
runtimePluginCalls.push(
`${runtimePluginName} ? (${runtimePluginName}.default || ${runtimePluginName})(${paramsStr}) : false`,
);
});
}
const embedRuntimeLines = Template.asString([
Expand All @@ -118,13 +129,11 @@ class FederationRuntimePlugin {
embedRuntimeLines,
`if(!${federationGlobal}.instance){`,
Template.indent([
runtimePluginNames.length
runtimePluginCalls.length
? Template.asString([
`var pluginsToAdd = [`,
Template.indent(
runtimePluginNames.map(
(item) => `${item} ? (${item}.default || ${item})() : false,`,
),
Template.indent(runtimePluginCalls.map((call) => `${call},`)),
),
`].filter(Boolean);`,
`${federationGlobal}.initOptions.plugins = ${federationGlobal}.initOptions.plugins ? `,
Expand Down
Loading