Skip to content

Commit ac60d7a

Browse files
committed
docs: add command into cli
1 parent b07ceed commit ac60d7a

File tree

3 files changed

+44
-25
lines changed

3 files changed

+44
-25
lines changed

packages/core/src/cli/commands.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ export function runCli(): void {
112112
});
113113

114114
mfDevCommand
115-
.description(`dev format: 'mf' library`)
115+
.description('start Rsbuild dev server of Module Federation format')
116116
.action(async (options: CommonOptions) => {
117117
try {
118118
const rslibConfig = await loadConfig({

website/docs/en/guide/advanced/module-federation.mdx

Lines changed: 27 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ First install the Module Federation Rsbuild Plugin (Rslib is based on Rsbuild).
2727

2828
import { PackageManagerTabs } from '@theme';
2929

30-
<PackageManagerTabs command="install @module-federation/rsbuild-plugin -D" />
30+
<PackageManagerTabs command="add @module-federation/rsbuild-plugin -D" />
3131

3232
Add 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

9191
Rslib 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

105121
This 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}
110126
import { dirname, join } from 'node:path';
111127
import type { StorybookConfig } from 'storybook-react-rsbuild';
112128

@@ -151,9 +167,9 @@ const config: StorybookConfig = {
151167
export 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}
157173
import React from 'react';
158174
// Load your remote module here, Storybook will act as the host app.
159175
import { Counter } from 'rslib-module';
@@ -168,7 +184,7 @@ export default {
168184
export 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

200203
There 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

206209
First install the runtime dependencies
207210

208-
<PackageManagerTabs command="install @module-federation/enhanced -D" />
211+
<PackageManagerTabs command="add @module-federation/enhanced -D" />
209212

210213
Then consume other Module Federation modules at runtime, for example
211214

website/docs/en/guide/basic/cli.mdx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,3 +101,19 @@ Inspect config succeed, open following files to view the content:
101101
- Rspack Config (esm): /project/dist/.rsbuild/rspack.config.esm.mjs
102102
- Rspack Config (cjs): /project/dist/.rsbuild/rspack.config.cjs.mjs
103103
```
104+
105+
## rslib mf dev
106+
107+
The `rslib mf dev` command is utilized to start Rsbuild dev server of Module Federation format.
108+
This enables you to develop your mf format module within the host app more rapidly.
109+
110+
```text
111+
Usage: rslib mf dev [options]
112+
113+
start Rsbuild dev server of Module Federation format.
114+
115+
Options:
116+
-c --config <config> specify the configuration file, can be a relative or absolute path
117+
--env-mode <mode> specify the env mode to load the `.env.[mode]` file
118+
-h, --help display help for command
119+
```

0 commit comments

Comments
 (0)