chore(modern-js-plugin): use bundlerChain instead of tools.webpack or…

… tools.rspack
module-federation · Feb 19, 2025 · a2b5a7a · a2b5a7a
1 parent 8ba5afd
commit a2b5a7a
Show file tree

Hide file tree

Showing 12 changed files with 1,914 additions and 684 deletions.
diff --git a/.changeset/poor-mails-shave.md b/.changeset/poor-mails-shave.md
@@ -0,0 +1,7 @@
+---
+'@module-federation/rsbuild-plugin': patch
+'@module-federation/modern-js': patch
+'@module-federation/modernjsapp': patch
+---
+
+chore(modern-js-plugin): use bundlerChain instead of tools.webpack or tools.rspack
diff --git a/apps/modernjs/package.json b/apps/modernjs/package.json
@@ -6,6 +6,7 @@
     "reset": "npx rimraf ./**/node_modules",
     "dev": "modern dev",
     "build": "modern build",
+    "inspect": "modern inspect",
     "start": "modern start",
     "serve": "PORT=4001 modern serve",
     "new": "modern new",

diff --git a/apps/modernjs/project.json b/apps/modernjs/project.json
@@ -17,7 +17,7 @@
         ],
         "commands": [
           {
-            "command": "cd apps/modernjs; pnpm run build",
+            "command": "cd apps/modernjs; pnpm run inspect",
             "forwardAllArgs": true
           }
         ]

diff --git a/package.json b/package.json
@@ -64,7 +64,8 @@
       }
     },
     "overrides": {
-      "@changesets/assemble-release-plan": "workspace:*"
+      "@changesets/assemble-release-plan": "workspace:*",
+      "@modern-js/app-tools": "2.64.3-alpha.0"
     }
   },
   "dependencies": {

diff --git a/packages/modernjs/src/cli/configPlugin.ts b/packages/modernjs/src/cli/configPlugin.ts
@@ -1,11 +1,5 @@
 import path from 'path';
-import type {
-  CliPluginFuture,
-  AppTools,
-  UserConfig,
-  Bundler,
-} from '@modern-js/app-tools';
-import type { BundlerConfig } from '../interfaces/bundler';
+import type { CliPluginFuture, AppTools } from '@modern-js/app-tools';
 import type { InternalModernPluginOptions } from '../types';
 import {
   patchBundlerConfig,
@@ -14,7 +8,6 @@ import {
   patchMFConfig,
   addMyTypes2Ignored,
 } from './utils';
-import { moduleFederationPlugin } from '@module-federation/sdk';
 
 export function setEnv(enableSSR: boolean) {
   if (enableSSR) {
@@ -23,34 +16,6 @@ export function setEnv(enableSSR: boolean) {
   }
 }
 
-export function modifyBundlerConfig<T extends Bundler>(options: {
-  bundlerType: Bundler;
-  mfConfig: moduleFederationPlugin.ModuleFederationPluginOptions;
-  config: BundlerConfig<T>;
-  isServer: boolean;
-  modernjsConfig: UserConfig<AppTools>;
-  remoteIpStrategy?: 'ipv4' | 'inherit';
-}) {
-  const {
-    mfConfig,
-    config,
-    isServer,
-    modernjsConfig,
-    remoteIpStrategy = 'ipv4',
-    bundlerType,
-  } = options;
-
-  patchMFConfig(mfConfig, isServer, remoteIpStrategy);
-
-  patchBundlerConfig({
-    bundlerType,
-    bundlerConfig: config,
-    isServer,
-    modernjsConfig,
-    mfConfig,
-  });
-}
-
 export const moduleFederationConfigPlugin = (
   userConfig: InternalModernPluginOptions,
 ): CliPluginFuture<AppTools> => ({
@@ -67,6 +32,31 @@ export const moduleFederationConfigPlugin = (
     userConfig.ssrConfig = ssrConfig;
     userConfig.csrConfig = csrConfig;
 
+    api.modifyBundlerChain((chain, { isProd, isServer }) => {
+      const bundlerType =
+        api.getAppContext().bundlerType === 'rspack' ? 'rspack' : 'webpack';
+
+      // @ts-expect-error chain type is not correct
+      addMyTypes2Ignored(chain, isServer ? ssrConfig : csrConfig);
+
+      const targetMFConfig = isServer ? ssrConfig : csrConfig;
+      patchMFConfig(
+        targetMFConfig,
+        isServer,
+        userConfig.remoteIpStrategy || 'ipv4',
+      );
+
+      patchBundlerConfig({
+        // @ts-expect-error chain type is not correct
+        chain,
+        isServer,
+        modernjsConfig,
+        mfConfig,
+      });
+
+      userConfig.distOutputDir =
+        chain.output.get('path') || path.resolve(process.cwd(), 'dist');
+    });
     api.config(() => {
       const bundlerType =
         api.getAppContext().bundlerType === 'rspack' ? 'rspack' : 'webpack';
@@ -86,34 +76,6 @@ export const moduleFederationConfigPlugin = (
 
       return {
         tools: {
-          bundlerChain(chain, { isServer }) {
-            addMyTypes2Ignored(chain, isServer ? ssrConfig : csrConfig);
-          },
-          rspack(config, { isServer }) {
-            modifyBundlerConfig({
-              bundlerType,
-              mfConfig: isServer ? ssrConfig : csrConfig,
-              config,
-              isServer,
-              modernjsConfig,
-              remoteIpStrategy: userConfig.remoteIpStrategy,
-            });
-            userConfig.distOutputDir =
-              config.output?.path || path.resolve(process.cwd(), 'dist');
-          },
-          webpack(config, { isServer }) {
-            modifyBundlerConfig({
-              bundlerType,
-              mfConfig: isServer ? ssrConfig : csrConfig,
-              config,
-              isServer,
-              modernjsConfig,
-              remoteIpStrategy: userConfig.remoteIpStrategy,
-            });
-
-            userConfig.distOutputDir =
-              config.output?.path || path.resolve(process.cwd(), 'dist');
-          },
           devServer: {
             headers: {
               'Access-Control-Allow-Origin': '*',

diff --git a/packages/modernjs/src/cli/index.ts b/packages/modernjs/src/cli/index.ts
@@ -8,7 +8,6 @@ import type { moduleFederationPlugin as MFPluginOptions } from '@module-federati
 import type { PluginOptions, InternalModernPluginOptions } from '../types';
 import { moduleFederationConfigPlugin } from './configPlugin';
 import { moduleFederationSSRPlugin } from './ssrPlugin';
-import { WebpackPluginInstance } from '@rspack/core';
 
 export const moduleFederationPlugin = (
   userConfig: PluginOptions = {},
@@ -27,46 +26,45 @@ export const moduleFederationPlugin = (
     name: '@modern-js/plugin-module-federation',
     setup: async (api) => {
       const modernjsConfig = api.getConfig();
-      api.config(() => {
-        return {
-          tools: {
-            rspack(config, { isServer }) {
-              const browserPluginOptions =
-                internalModernPluginOptions.csrConfig as MFPluginOptions.ModuleFederationPluginOptions;
-              if (!isServer) {
-                internalModernPluginOptions.browserPlugin =
-                  new RspackModuleFederationPlugin(browserPluginOptions);
-                config.plugins?.push(internalModernPluginOptions.browserPlugin);
-              }
-            },
-            webpack(config, { isServer }) {
-              const browserPluginOptions =
-                internalModernPluginOptions.csrConfig as MFPluginOptions.ModuleFederationPluginOptions;
-              if (!isServer) {
-                internalModernPluginOptions.browserPlugin =
-                  new WebpackModuleFederationPlugin(browserPluginOptions);
-                config.plugins?.push(
-                  internalModernPluginOptions.browserPlugin as WebpackPluginInstance,
-                );
-              }
-              const enableAsyncEntry = modernjsConfig.source?.enableAsyncEntry;
-              if (!enableAsyncEntry && browserPluginOptions.async !== false) {
-                const asyncBoundaryPluginOptions =
-                  typeof browserPluginOptions.async === 'object'
-                    ? browserPluginOptions.async
-                    : {
-                        eager: (module) =>
-                          module && /\.federation/.test(module?.request || ''),
-                        excludeChunk: (chunk) =>
-                          chunk.name === browserPluginOptions.name,
-                      };
-                config.plugins?.push(
-                  new AsyncBoundaryPlugin(asyncBoundaryPluginOptions) as any,
-                );
-              }
-            },
-          },
-        };
+
+      api.modifyBundlerChain((chain, { isProd, isServer }) => {
+        const bundlerType =
+          api.getAppContext().bundlerType === 'rspack' ? 'rspack' : 'webpack';
+
+        const browserPluginOptions =
+          internalModernPluginOptions.csrConfig as MFPluginOptions.ModuleFederationPluginOptions;
+
+        const MFPlugin =
+          bundlerType === 'webpack'
+            ? WebpackModuleFederationPlugin
+            : RspackModuleFederationPlugin;
+        if (!isServer) {
+          chain
+            .plugin('plugin-module-federation')
+            .use(MFPlugin, [browserPluginOptions])
+            .init((Plugin: typeof MFPlugin, args) => {
+              internalModernPluginOptions.browserPlugin = new Plugin(args[0]);
+              return internalModernPluginOptions.browserPlugin;
+            });
+        }
+
+        if (bundlerType === 'webpack') {
+          const enableAsyncEntry = modernjsConfig.source?.enableAsyncEntry;
+          if (!enableAsyncEntry && browserPluginOptions.async !== false) {
+            const asyncBoundaryPluginOptions =
+              typeof browserPluginOptions.async === 'object'
+                ? browserPluginOptions.async
+                : {
+                    eager: (module) =>
+                      module && /\.federation/.test(module?.request || ''),
+                    excludeChunk: (chunk) =>
+                      chunk.name === browserPluginOptions.name,
+                  };
+            chain
+              .plugin('async-boundary-plugin')
+              .use(AsyncBoundaryPlugin, [asyncBoundaryPluginOptions]);
+          }
+        }
       });
     },
     usePlugins: [

diff --git a/packages/modernjs/src/cli/ssrPlugin.ts b/packages/modernjs/src/cli/ssrPlugin.ts
@@ -45,44 +45,35 @@ export const moduleFederationSSRPlugin = (
       });
       return { entrypoint, plugins };
     });
+    api.modifyBundlerChain((chain, { isProd, isServer }) => {
+      const bundlerType =
+        api.getAppContext().bundlerType === 'rspack' ? 'rspack' : 'webpack';
+
+      const MFPlugin =
+        bundlerType === 'webpack'
+          ? ModuleFederationPlugin
+          : RspackModuleFederationPlugin;
+
+      if (isServer) {
+        if (!pluginOptions.nodePlugin) {
+          chain
+            .plugin('plugin-module-federation-server')
+            .use(MFPlugin, [pluginOptions.ssrConfig])
+            .init((Plugin: typeof MFPlugin, args) => {
+              pluginOptions.nodePlugin = new Plugin(args[0]);
+              return pluginOptions.nodePlugin;
+            });
+        }
+      } else {
+        pluginOptions.distOutputDir =
+          pluginOptions.distOutputDir ||
+          chain.output.get('path') ||
+          path.resolve(process.cwd(), 'dist');
+      }
+    });
     api.config(() => {
       return {
         tools: {
-          rspack(config, { isServer }) {
-            if (isServer) {
-              // throw new Error(
-              //   `${PLUGIN_IDENTIFIER} Not support rspack ssr mode yet !`,
-              // );
-              if (!pluginOptions.nodePlugin) {
-                pluginOptions.nodePlugin = new RspackModuleFederationPlugin(
-                  pluginOptions.ssrConfig,
-                );
-                // @ts-ignore
-                config.plugins?.push(pluginOptions.nodePlugin);
-              }
-            } else {
-              pluginOptions.distOutputDir =
-                pluginOptions.distOutputDir ||
-                config.output?.path ||
-                path.resolve(process.cwd(), 'dist');
-            }
-          },
-          webpack(config, { isServer }) {
-            if (isServer) {
-              if (!pluginOptions.nodePlugin) {
-                pluginOptions.nodePlugin = new ModuleFederationPlugin(
-                  pluginOptions.ssrConfig,
-                );
-                // @ts-ignore
-                config.plugins?.push(pluginOptions.nodePlugin);
-              }
-            } else {
-              pluginOptions.distOutputDir =
-                pluginOptions.distOutputDir ||
-                config.output?.path ||
-                path.resolve(process.cwd(), 'dist');
-            }
-          },
           devServer: {
             before: [
               (req, res, next) => {