feat!: support --lib param of mf-dev command (#590)

Author: Timeless0911

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

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

examples/module-federation/mf-react-component/rslib.config.ts

@@ -34,10 +34,6 @@ export default defineConfig({
       dev: {
         assetPrefix: 'http://localhost:3001/mf',
       },
-      // just for dev
-      server: {
-        port: 3001,
-      },
       plugins: [
         pluginModuleFederation({
           name: 'rslib_provider',
@@ -56,5 +52,9 @@ export default defineConfig({
       ],
     },
   ],
+  // just for dev
+  server: {
+    port: 3001,
+  },
   plugins: [pluginReact()],
 });

packages/core/src/asset/assetConfig.ts

@@ -1,11 +1,11 @@
-import type { RsbuildConfig } from '@rsbuild/core';
+import type { EnvironmentConfig } from '@rsbuild/core';
 import type { Format } from '../types';
 
 // TODO: asset config document
 export const composeAssetConfig = (
   bundle: boolean,
   format: Format,
-): RsbuildConfig => {
+): EnvironmentConfig => {
   if (format === 'esm' || format === 'cjs') {
     if (bundle) {
       return {

packages/core/src/cli/build.ts

@@ -6,12 +6,15 @@ import { onBeforeRestart } from './restart';
 
 export async function build(
   config: RslibConfig,
-  options: Pick<BuildOptions, 'lib' | 'watch'> = {},
+  options: Pick<BuildOptions, 'lib' | 'watch' | 'root'> = {},
 ): Promise<RsbuildInstance> {
-  const environments = await composeRsbuildEnvironments(config);
+  const { environments } = await composeRsbuildEnvironments(config);
   const rsbuildInstance = await createRsbuild({
     rsbuildConfig: {
+      mode: 'production',
+      root: config.root,
       plugins: config.plugins,
+      dev: config.dev,
       server: config.server,
       environments: pruneEnvironments(environments, options.lib),
     },

packages/core/src/cli/commands.ts

@@ -39,7 +39,12 @@ const applyCommonOptions = (command: Command) => {
       '--env-mode <mode>',
       'specify the env mode to load the `.env.[mode]` file',
     )
-    .option('--env-dir <dir>', 'specify the directory to load `.env` files');
+    .option('--env-dir <dir>', 'specify the directory to load `.env` files')
+    .option(
+      '--lib <id>',
+      'specify the library (repeatable, e.g. --lib esm --lib cjs)',
+      repeatableOption,
+    );
 };
 
 const repeatableOption = (value: string, previous: string[]) => {
@@ -51,16 +56,11 @@ export function runCli(): void {
 
   const buildCommand = program.command('build');
   const inspectCommand = program.command('inspect');
-  const mfDevCommand = program.command('mf dev');
+  const mfDevCommand = program.command('mf-dev');
 
   [buildCommand, inspectCommand, mfDevCommand].forEach(applyCommonOptions);
 
   buildCommand
-    .option(
-      '--lib <id>',
-      'build the specified library (may be repeated)',
-      repeatableOption,
-    )
     .option('-w --watch', 'turn on watch mode, watch for changes and rebuild')
     .description('build the library for production')
     .action(async (options: BuildOptions) => {
@@ -87,11 +87,6 @@ export function runCli(): void {
 
   inspectCommand
     .description('inspect the Rsbuild / Rspack configs of Rslib projects')
-    .option(
-      '--lib <id>',
-      'inspect the specified library (may be repeated)',
-      repeatableOption,
-    )
     .option(
       '--output <output>',
       'specify inspect content output path',
@@ -121,8 +116,9 @@ export function runCli(): void {
       try {
         const cliMfDev = async () => {
           const { config, watchFiles } = await init(options);
-          // TODO: support lib option in mf dev server
-          await startMFDevServer(config);
+          await startMFDevServer(config, {
+            lib: options.lib,
+          });
 
           watchFilesForRestart(watchFiles, async () => {
             await cliMfDev();
@@ -131,7 +127,7 @@ export function runCli(): void {
 
         await cliMfDev();
       } catch (err) {
-        logger.error('Failed to start mf dev.');
+        logger.error('Failed to start mf-dev.');
         logger.error(err);
         process.exit(1);
       }

packages/core/src/cli/inspect.ts

@@ -7,10 +7,13 @@ export async function inspect(
   config: RslibConfig,
   options: Pick<InspectOptions, 'lib' | 'mode' | 'output' | 'verbose'> = {},
 ): Promise<RsbuildInstance> {
-  const environments = await composeRsbuildEnvironments(config);
+  const { environments } = await composeRsbuildEnvironments(config);
   const rsbuildInstance = await createRsbuild({
     rsbuildConfig: {
+      mode: 'production',
+      root: config.root,
       plugins: config.plugins,
+      dev: config.dev,
       server: config.server,
       environments: pruneEnvironments(environments, options.lib),
     },

packages/core/src/cli/mf.ts

@@ -1,42 +1,63 @@
-import { createRsbuild, mergeRsbuildConfig } from '@rsbuild/core';
-import type { RsbuildConfig, RsbuildInstance } from '@rsbuild/core';
-import { composeCreateRsbuildConfig } from '../config';
+import { createRsbuild } from '@rsbuild/core';
+import type { RsbuildInstance } from '@rsbuild/core';
+import { composeRsbuildEnvironments, pruneEnvironments } from '../config';
 import type { RslibConfig } from '../types';
+import type { CommonOptions } from './commands';
 import { onBeforeRestart } from './restart';
 
 export async function startMFDevServer(
   config: RslibConfig,
+  options: Pick<CommonOptions, 'lib'> = {},
 ): Promise<RsbuildInstance | undefined> {
-  const rsbuildInstance = await initMFRsbuild(config);
+  const rsbuildInstance = await initMFRsbuild(config, options);
   return rsbuildInstance;
 }
 
 async function initMFRsbuild(
-  rslibConfig: RslibConfig,
+  config: RslibConfig,
+  options: Pick<CommonOptions, 'lib'> = {},
 ): Promise<RsbuildInstance | undefined> {
-  const rsbuildConfigObject = await composeCreateRsbuildConfig(rslibConfig);
-  const mfRsbuildConfig = rsbuildConfigObject.find(
-    (config) => config.format === 'mf',
-  );
+  const { environments, environmentWithInfos } =
+    await composeRsbuildEnvironments(config);
 
-  if (!mfRsbuildConfig) {
-    // no mf format, return.
-    return;
+  const selectedEnvironmentIds = environmentWithInfos
+    .filter((env) => {
+      const isMf = env.format === 'mf';
+      if (!options?.lib) {
+        return isMf;
+      }
+      return env.id && options.lib.includes(env.id);
+    })
+    .map((env) => env.id);
+
+  if (!selectedEnvironmentIds.length) {
+    throw new Error('No mf format found, please check your config.');
   }
 
-  mfRsbuildConfig.config = changeEnvToDev(mfRsbuildConfig.config);
+  const selectedEnvironments = pruneEnvironments(
+    environments,
+    selectedEnvironmentIds,
+  );
 
   const rsbuildInstance = await createRsbuild({
     rsbuildConfig: {
-      ...mfRsbuildConfig.config,
-      plugins: [
-        ...(rslibConfig.plugins || []),
-        ...(mfRsbuildConfig.config.plugins || []),
-      ],
-      server: mergeRsbuildConfig(
-        rslibConfig.server,
-        mfRsbuildConfig.config.server,
-      ),
+      mode: 'development',
+      root: config.root,
+      plugins: config.plugins,
+      dev: {
+        ...(config.dev ?? {}),
+        writeToDisk: true,
+      },
+      server: config.server,
+      tools: {
+        rspack: {
+          optimization: {
+            nodeEnv: 'development',
+            moduleIds: 'named',
+          },
+        },
+      },
+      environments: selectedEnvironments,
     },
   });
 
@@ -45,20 +66,3 @@ async function initMFRsbuild(
   onBeforeRestart(devServer.server.close);
   return rsbuildInstance;
 }
-
-function changeEnvToDev(rsbuildConfig: RsbuildConfig) {
-  return mergeRsbuildConfig(rsbuildConfig, {
-    mode: 'development',
-    dev: {
-      writeToDisk: true,
-    },
-    tools: {
-      rspack: {
-        optimization: {
-          nodeEnv: 'development',
-          moduleIds: 'named',
-        },
-      },
-    },
-  });
-}