@@ -27,7 +27,7 @@ First install the Module Federation Rsbuild Plugin (Rslib is based on Rsbuild).
2727
2828import { PackageManagerTabs } from ' @theme' ;
2929
30- <PackageManagerTabs command = " install @module-federation/rsbuild-plugin -D" />
30+ <PackageManagerTabs command = " add @module-federation/rsbuild-plugin -D" />
3131
3232Add the plugin to the ` rslib.config.ts ` file:
3333
@@ -90,23 +90,39 @@ However, if you want this Rslib Module to consume other producers at the same ti
9090
9191Rslib support using Storybook to development Module Federation Rslib module.
9292
93- ### 1. Install Storybook and Rsbuild Storybook addon
93+ ### 1. Add Rslib ` mf dev ` command
9494
95- <PackageManagerTabs command = " install storybook storybook-addon-rslib @module-federation/storybook-addon -D" />
95+ ``` json title="package.json"
96+ {
97+ // ...
98+ "scripts" : {
99+ "dev" : " rslib mf dev"
100+ }
101+ }
102+ ```
103+
104+ <PackageManagerTabs command = " run dev" />
105+ Running the ` dev ` command can start the Module Federation development mode,
106+ enabling consumption by either your host app or the Storybook app, along with
107+ Hot Module Replacement (HMR).
108+
109+ ### 2. Install Storybook and Rsbuild Storybook addon
110+
111+ <PackageManagerTabs command = " add storybook storybook-addon-rslib @module-federation/storybook-addon -D" />
96112
97113` React App `
98114
99- <PackageManagerTabs command = " install storybook-react-rsbuild -D" />
115+ <PackageManagerTabs command = " add storybook-react-rsbuild -D" />
100116
101117` Vue App `
102118
103- <PackageManagerTabs command = " install storybook-vue-rsbuild -D" />
119+ <PackageManagerTabs command = " add storybook-vue-rsbuild -D" />
104120
105121This chapter will use ` React App ` as an example later.
106122
107- ### 2 . Create ` .storybook/main.ts ` and add addons
123+ ### 3 . Create ` .storybook/main.ts ` and add addons
108124
109- ``` ts title=".storybook/main.ts" {13-35 }
125+ ``` ts title=".storybook/main.ts" {13-38 }
110126import { dirname , join } from ' node:path' ;
111127import type { StorybookConfig } from ' storybook-react-rsbuild' ;
112128
@@ -151,9 +167,9 @@ const config: StorybookConfig = {
151167export default config ;
152168```
153169
154- ### 3 . Start writing stories
170+ ### 4 . Start writing stories
155171
156- ``` ts title="stories/index.stories.tsx" {1-2 }
172+ ``` ts title="stories/index.stories.tsx" {2-3 }
157173import React from ' react' ;
158174// Load your remote module here, Storybook will act as the host app.
159175import { Counter } from ' rslib-module' ;
@@ -168,7 +184,7 @@ export default {
168184export const Primary = {};
169185```
170186
171- ### 4 . Add Module Federation types and stories into ` tsconfig.json ` .
187+ ### 5 . Add Module Federation types and stories into ` tsconfig.json ` .
172188
173189``` json title="tsconfig.json"
174190{
@@ -182,19 +198,6 @@ export const Primary = {};
182198}
183199```
184200
185- ### 5. Add Rslib ` mf dev ` command
186-
187- ``` json title="package.json"
188- {
189- // ...
190- "scripts" : {
191- "dev" : " rslib mf dev"
192- }
193- }
194- ```
195-
196- And run ` npm run dev ` to start Module Federation development mode
197-
198201### 6. Start Storybook app
199202
200203There you go, start Storybook with ` npx storybook dev ` .
@@ -205,7 +208,7 @@ Because there are multiple formats in Rslib, if you configure the `remote` param
205208
206209First install the runtime dependencies
207210
208- <PackageManagerTabs command = " install @module-federation/enhanced -D" />
211+ <PackageManagerTabs command = " add @module-federation/enhanced -D" />
209212
210213Then consume other Module Federation modules at runtime, for example
211214
0 commit comments