fix: mf-dev should apply correct config (#609)

Author: Timeless0911

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

@@ -24,7 +24,6 @@ export default defineConfig({
     },
     {
       format: 'mf',
-      dts: true,
       output: {
         distPath: {
           root: './dist/mf',
@@ -52,6 +51,9 @@ export default defineConfig({
       ],
     },
   ],
+  source: {
+    tsconfigPath: './tsconfig.build.json',
+  },
   // just for dev
   server: {
     port: 3001,

examples/module-federation/mf-react-component/tsconfig.build.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["src"]
+}

packages/core/package.json

@@ -42,6 +42,7 @@
     "tinyglobby": "^0.2.10"
   },
   "devDependencies": {
+    "@module-federation/rsbuild-plugin": "^0.8.5",
     "@rslib/tsconfig": "workspace:*",
     "@types/fs-extra": "^11.0.4",
     "chokidar": "^4.0.3",

packages/core/src/cli/mf.ts

@@ -46,17 +46,10 @@ async function initMFRsbuild(
       plugins: config.plugins,
       dev: {
         ...(config.dev ?? {}),
+        // TODO: remove this after Rsbuild fix that the environment config of writeToDisk not takes effect
         writeToDisk: true,
       },
       server: config.server,
-      tools: {
-        rspack: {
-          optimization: {
-            nodeEnv: 'development',
-            moduleIds: 'named',
-          },
-        },
-      },
       environments: selectedEnvironments,
     },
   });

packages/core/src/config.ts

@@ -616,17 +616,23 @@ const composeFormatConfig = ({
     }
     case 'mf':
       return {
+        dev: {
+          writeToDisk: true,
+        },
         tools: {
-          rspack: {
-            output: {
+          rspack: (config, { env }) => {
+            config.output = {
+              ...config.output,
               uniqueName: pkgJson.name as string,
-            },
-            // can not set nodeEnv to false, because mf format should build shared module.
-            // If nodeEnv is false, the process.env.NODE_ENV in third-party packages's will not be replaced
-            optimization: {
-              nodeEnv: 'production',
-              moduleIds: 'deterministic',
-            },
+            };
+
+            config.optimization = {
+              ...config.optimization,
+              // can not set nodeEnv to false, because mf format should build shared module.
+              // If nodeEnv is false, the process.env.NODE_ENV in third-party packages's will not be replaced
+              nodeEnv: env === 'development' ? 'development' : 'production',
+              moduleIds: env === 'development' ? 'named' : 'deterministic',
+            };
           },
         },
         output: {

packages/core/tests/__snapshots__/config.test.ts.snap

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Should compose create Rsbuild config correctly > Merge Rsbuild config 1`] = `
+exports[`Should compose create Rsbuild config correctly > Merge Rsbuild config in each format 1`] = `
 [
   {
     "config": {
@@ -696,5 +696,159 @@ exports[`Should compose create Rsbuild config correctly > Merge Rsbuild config 1
     },
     "format": "umd",
   },
+  {
+    "config": {
+      "dev": {
+        "progressBar": false,
+        "writeToDisk": true,
+      },
+      "output": {
+        "distPath": {
+          "css": "./",
+          "cssAsync": "./",
+          "js": "./",
+          "jsAsync": "./",
+        },
+        "filename": {
+          "js": "[name].js",
+        },
+        "filenameHash": false,
+        "minify": {
+          "css": false,
+          "js": true,
+          "jsOptions": {
+            "minimizerOptions": {
+              "compress": {
+                "dead_code": true,
+                "defaults": false,
+                "toplevel": false,
+                "unused": true,
+              },
+              "format": {
+                "comments": "some",
+                "preserve_annotations": true,
+              },
+              "mangle": false,
+              "minify": true,
+            },
+          },
+        },
+        "overrideBrowserslist": [
+          "last 1 Chrome versions",
+          "last 1 Firefox versions",
+          "last 1 Edge versions",
+          "last 1 Safari versions",
+          "last 1 ios_saf versions",
+          "not dead",
+        ],
+        "target": "web",
+      },
+      "performance": {
+        "chunkSplit": {
+          "strategy": "custom",
+        },
+      },
+      "plugins": [
+        {
+          "name": "rsbuild:lib-entry-chunk",
+          "setup": [Function],
+        },
+        {
+          "name": "rsbuild:module-federation-enhanced",
+          "setup": [Function],
+        },
+      ],
+      "resolve": {
+        "alias": {
+          "bar": "bar",
+          "foo": "foo",
+        },
+      },
+      "source": {
+        "entry": {},
+        "preEntry": "./a.js",
+      },
+      "tools": {
+        "htmlPlugin": false,
+        "rspack": [
+          {
+            "experiments": {
+              "rspackFuture": {
+                "bundlerInfo": {
+                  "force": false,
+                },
+              },
+            },
+            "optimization": {
+              "moduleIds": "named",
+              "nodeEnv": false,
+              "splitChunks": {
+                "chunks": "async",
+              },
+            },
+            "resolve": {
+              "extensionAlias": {
+                ".cjs": [
+                  ".cts",
+                  ".cjs",
+                ],
+                ".js": [
+                  ".ts",
+                  ".tsx",
+                  ".js",
+                  ".jsx",
+                ],
+                ".jsx": [
+                  ".tsx",
+                  ".jsx",
+                ],
+                ".mjs": [
+                  ".mts",
+                  ".mjs",
+                ],
+              },
+            },
+          },
+          [Function],
+          [Function],
+          {
+            "target": [
+              "web",
+            ],
+          },
+          {
+            "externalsType": "global",
+          },
+          {
+            "plugins": [
+              EntryChunkPlugin {
+                "enabledImportMetaUrlShim": false,
+                "reactDirectives": {},
+                "shebangChmod": 493,
+                "shebangEntries": {},
+                "shebangInjectedAssets": Set {},
+              },
+            ],
+          },
+          {
+            "resolve": {
+              "extensionAlias": {
+                ".js": [
+                  ".ts",
+                  ".tsx",
+                ],
+              },
+            },
+          },
+        ],
+        "swc": {
+          "jsc": {
+            "externalHelpers": false,
+          },
+        },
+      },
+    },
+    "format": "mf",
+  },
 ]
 `;

packages/core/tests/config.test.ts

@@ -1,4 +1,5 @@
 import { join } from 'node:path';
+import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';
 import { describe, expect, test, vi } from 'vitest';
 import {
   composeCreateRsbuildConfig,
@@ -148,7 +149,7 @@ describe('Should load config file correctly', () => {
 });
 
 describe('Should compose create Rsbuild config correctly', () => {
-  test('Merge Rsbuild config', async () => {
+  test('Merge Rsbuild config in each format', async () => {
     const rslibConfig: RslibConfig = {
       lib: [
         {
@@ -176,6 +177,10 @@ describe('Should compose create Rsbuild config correctly', () => {
         {
           format: 'umd',
         },
+        {
+          format: 'mf',
+          plugins: [pluginModuleFederation({})],
+        },
       ],
       source: {
         preEntry: './a.js',