feat: support dev command to dev mf format

Author: nyqykk

examples/module-federation/mf-react-component/README.md

@@ -12,7 +12,13 @@ Dev MF module
 nx run @examples/mf-remote:dev
 ```
 
-2. Use Storybook to development component.
+2. Start MF dev mode.
+
+```
+nx run @examples/mf-react-component:dev
+```
+
+3. Use Storybook to development component.
 
 ```
 nx run @examples/mf-react-component:storybook

examples/module-federation/mf-react-component/package.json

@@ -13,6 +13,7 @@
   "types": "./dist/cjs/index.d.ts",
   "scripts": {
     "build": "rslib build",
+    "dev": "rslib mf dev",
     "serve": "pnpm build & http-server -p 3001 ./dist/ --cors",
     "storybook": "storybook dev -p 6006"
   },

packages/core/src/cli/commands.ts

@@ -2,6 +2,7 @@ import type { RsbuildMode } from '@rsbuild/core';
 import { type Command, program } from 'commander';
 import { build } from '../build';
 import { initRsbuild, loadConfig } from '../config';
+import { startMFDevServer } from '../mf';
 import { logger } from '../utils/logger';
 
 export type CommonOptions = {
@@ -36,8 +37,9 @@ export function runCli(): void {
 
   const buildCommand = program.command('build');
   const inspectCommand = program.command('inspect');
+  const mfDevCommand = program.command('mf dev');
 
-  [buildCommand, inspectCommand].forEach(applyCommonOptions);
+  [buildCommand, inspectCommand, mfDevCommand].forEach(applyCommonOptions);
 
   buildCommand
     .option('-w --watch', 'turn on watch mode, watch for changes and rebuild')
@@ -85,5 +87,20 @@ export function runCli(): void {
       }
     });
 
+  mfDevCommand
+    .description(`dev format: 'mf' library`)
+    .action(async (options: CommonOptions) => {
+      try {
+        const rslibConfig = await loadConfig({
+          path: options.config,
+          envMode: options.envMode,
+        });
+        await startMFDevServer(rslibConfig);
+      } catch (err) {
+        logger.error('Failed to start mf dev.');
+        logger.error(err);
+        process.exit(1);
+      }
+    });
   program.parse();
 }

packages/core/src/mf.ts

@@ -0,0 +1,49 @@
+import { createRsbuild, mergeRsbuildConfig } from '@rsbuild/core';
+import { composeCreateRsbuildConfig } from './config';
+
+import type { RsbuildConfig, RsbuildInstance } from '@rsbuild/core';
+import type { RslibConfig } from './types';
+
+export async function startMFDevServer(
+  config: RslibConfig,
+): Promise<RsbuildInstance | undefined> {
+  const rsbuildInstance = await initMFRsbuild(config);
+  return rsbuildInstance;
+}
+
+async function initMFRsbuild(
+  rslibConfig: RslibConfig,
+): Promise<RsbuildInstance | undefined> {
+  const rsbuildConfigObject = await composeCreateRsbuildConfig(rslibConfig);
+  const mfRsbuildConfig = rsbuildConfigObject.find(
+    (config) => config.format === 'mf',
+  );
+
+  if (!mfRsbuildConfig) {
+    // no mf format, return.
+    return;
+  }
+
+  mfRsbuildConfig.config = changeEnvToDev(mfRsbuildConfig.config);
+  const rsbuildInstance = await createRsbuild({
+    rsbuildConfig: mfRsbuildConfig.config,
+  });
+  await rsbuildInstance.startDevServer();
+  return rsbuildInstance;
+}
+
+function changeEnvToDev(rsbuildConfig: RsbuildConfig) {
+  return mergeRsbuildConfig(rsbuildConfig, {
+    mode: 'development',
+    dev: {
+      writeToDisk: true,
+    },
+    tools: {
+      rspack: {
+        optimization: {
+          nodeEnv: 'development',
+        },
+      },
+    },
+  });
+}