feat(bundler-webpack): webpack export mf v2 dependencies (#12547)

* feat(bundler-webpack): webpack export mf v2 dependencies

* chore(bundler-webpack): update generateWebpackPackages

examples/mf-v2-host/.gitignore

@@ -0,0 +1,11 @@
+/.env.local
+/.umirc.local.ts
+/.umirc.local.js
+/config/config.local.ts
+/config/config.local.js
+/src/.umi
+/.umi
+
+/cypress/screenshots
+/cypress/videos
+/@mf-types

examples/mf-v2-host/.umirc.ts

@@ -0,0 +1,28 @@
+import { ModuleFederationPlugin } from '@module-federation/enhanced/webpack';
+import { defineConfig } from '@umijs/max';
+
+const shared = {
+  react: {
+    singleton: true,
+    eager: true,
+  },
+  'react-dom': {
+    singleton: true,
+    eager: true,
+  },
+};
+
+export default defineConfig({
+  mfsu: false,
+  chainWebpack(memo) {
+    memo.plugin('mf-v2').use(ModuleFederationPlugin, [
+      {
+        name: 'mf-v2-host',
+        remotes: {
+          remote: 'remote@http://localhost:8010/mf-manifest.json',
+        },
+        shared,
+      },
+    ]);
+  },
+});

examples/mf-v2-host/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@example/mf-v2-host",
+  "private": true,
+  "scripts": {
+    "build": "max build",
+    "dev": "max dev",
+    "preview": "max preview --port 8000",
+    "start": "npm run dev"
+  },
+  "dependencies": {
+    "@umijs/max": "workspace:*",
+    "react": "18.1.0",
+    "react-dom": "18.1.0"
+  },
+  "devDependencies": {
+    "@module-federation/enhanced": "^0.2.5"
+  }
+}

examples/mf-v2-host/plugin.ts

@@ -0,0 +1,64 @@
+import type { IApi } from '@umijs/max';
+import { chalk, winPath } from '@umijs/utils';
+import path from 'path';
+
+const LOGGER_LABEL = chalk.bold.blue('[module-federation-v2]');
+
+export default (api: IApi) => {
+  let bundlerWebpackPath: string | undefined;
+  try {
+    bundlerWebpackPath = path.dirname(
+      require.resolve('@umijs/bundler-webpack/package.json'),
+    );
+  } catch {}
+
+  api.onStart(() => {
+    if (!bundlerWebpackPath) {
+      throw new Error(
+        `Not found '@umijs/bundler-webpack', please check dependencies`,
+      );
+    }
+    const infoMsg = `Using module federation v2`;
+    console.log(`${LOGGER_LABEL} ${chalk.gray(infoMsg)}`);
+    process.env.FEDERATION_WEBPACK_PATH = path.join(
+      api.paths.absTmpPath,
+      `plugin-${api.plugin.key}`,
+      'webpack/lib/index.js',
+    );
+  });
+
+  api.onGenerateFiles(({ isFirstTime }) => {
+    if (!isFirstTime || !bundlerWebpackPath) {
+      return;
+    }
+
+    const webpackPath = path.join(bundlerWebpackPath, 'compiled/webpack');
+    const deepImportPath = path.join(webpackPath, 'deepImports.json');
+    const deepImports = require(deepImportPath) as string[];
+
+    deepImports.forEach((p) => {
+      const content = `
+module.exports = require('${p}')
+`.trimStart();
+
+      // write file
+      api.writeTmpFile({
+        path: `${p}.js`,
+        content,
+      });
+    });
+
+    // write webpack entry file
+    const entryContent = `module.exports = require('webpack')`;
+    api.writeTmpFile({
+      path: 'webpack/lib/index.js',
+      content: entryContent,
+    });
+  });
+
+  api.modifyTSConfig((memo) => {
+    const typesDir = winPath(path.join(api.cwd, './@mf-types/*'));
+    memo.compilerOptions.paths['*'] = [typesDir];
+    return memo;
+  });
+};

examples/mf-v2-host/src/pages/index.tsx

@@ -0,0 +1,9 @@
+import Counter from 'remote/Counter';
+
+export default function Page() {
+  return (
+    <div>
+      <Counter init={1} />
+    </div>
+  );
+}

examples/mf-v2-host/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./src/.umi/tsconfig.json"
+}

examples/mf-v2-remote/.env

@@ -0,0 +1 @@
+PORT=8010

examples/mf-v2-remote/.gitignore

@@ -0,0 +1,10 @@
+/.env.local
+/.umirc.local.ts
+/.umirc.local.js
+/config/config.local.ts
+/config/config.local.js
+/src/.umi
+/.umi
+
+/cypress/screenshots
+/cypress/videos

examples/mf-v2-remote/.umirc.ts

@@ -0,0 +1,39 @@
+import { ModuleFederationPlugin } from '@module-federation/enhanced/webpack';
+import { defineConfig } from '@umijs/max';
+
+const shared = {
+  react: {
+    singleton: true,
+    eager: true,
+  },
+  'react-dom': {
+    singleton: true,
+    eager: true,
+  },
+};
+
+export default defineConfig({
+  mfsu: false,
+  // mf: {
+  //   name: 'remote',
+  //   version: 'v2',
+  //   shared,
+  //   library: { type: 'window', name: 'remote' },
+  // },
+  publicPath: 'auto',
+  esbuildMinifyIIFE: true,
+  chainWebpack(memo) {
+    memo.plugin('mf-v2').use(ModuleFederationPlugin, [
+      {
+        name: 'mf-v2-remote',
+        filename: 'remote.js',
+        exposes: {
+          // 设置需要导出的模块，default 导出为 .
+          './Counter': './src/exposes/Counter',
+        },
+        shared,
+        library: { type: 'window', name: 'remote' },
+      },
+    ]);
+  },
+});

examples/mf-v2-remote/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@example/mf-v2-remote",
+  "private": true,
+  "scripts": {
+    "build": "max build",
+    "dev": "max dev",
+    "preview": "max preview --port 8010",
+    "start": "npm run dev"
+  },
+  "dependencies": {
+    "@umijs/max": "workspace:*",
+    "react": "18.1.0",
+    "react-dom": "18.1.0"
+  },
+  "devDependencies": {
+    "@module-federation/enhanced": "^0.2.5"
+  }
+}

examples/mf-v2-remote/plugin.ts

@@ -0,0 +1,58 @@
+import type { IApi } from '@umijs/max';
+import { chalk } from '@umijs/utils';
+import path from 'path';
+
+const LOGGER_LABEL = chalk.bold.blue('[module-federation-v2]');
+
+export default (api: IApi) => {
+  let bundlerWebpackPath: string | undefined;
+  try {
+    bundlerWebpackPath = path.dirname(
+      require.resolve('@umijs/bundler-webpack/package.json'),
+    );
+  } catch {}
+
+  api.onStart(() => {
+    if (!bundlerWebpackPath) {
+      throw new Error(
+        `Not found '@umijs/bundler-webpack', please check dependencies`,
+      );
+    }
+    const infoMsg = `Using module federation v2`;
+    console.log(`${LOGGER_LABEL} ${chalk.gray(infoMsg)}`);
+    process.env.FEDERATION_WEBPACK_PATH = path.join(
+      api.paths.absTmpPath,
+      `plugin-${api.plugin.key}`,
+      'webpack/lib/index.js',
+    );
+  });
+
+  api.onGenerateFiles(({ isFirstTime }) => {
+    if (!isFirstTime || !bundlerWebpackPath) {
+      return;
+    }
+
+    const webpackPath = path.join(bundlerWebpackPath, 'compiled/webpack');
+    const deepImportPath = path.join(webpackPath, 'deepImports.json');
+    const deepImports = require(deepImportPath) as string[];
+
+    deepImports.forEach((p) => {
+      const content = `
+module.exports = require('${p}')
+`.trimStart();
+
+      // write file
+      api.writeTmpFile({
+        path: `${p}.js`,
+        content,
+      });
+    });
+
+    // write webpack entry file
+    const entryContent = `module.exports = require('webpack')`;
+    api.writeTmpFile({
+      path: 'webpack/lib/index.js',
+      content: entryContent,
+    });
+  });
+};

examples/mf-v2-remote/src/exposes/Counter/index.less

@@ -0,0 +1,9 @@
+.bg {
+  background-color: #f0f0f0;
+
+  button {
+    margin: 10px;
+    background-color: #fff;
+    border: 1px solid #ccc;
+  }
+}

examples/mf-v2-remote/src/exposes/Counter/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+// @ts-expect-error 233
+import styles from './index.less';
+
+export default (props: { init?: number }) => {
+  const [c, setC] = React.useState(props.init ?? 10);
+
+  return (
+    <div className={styles.bg}>
+      <h1> remote Counter</h1>
+      <div>
+        <button
+          data-testid="remote-button"
+          onClick={() => {
+            setC((c) => c + 1);
+          }}
+        >
+          click to add
+        </button>
+      </div>
+      <div>
+        remote hooks counter
+        <span data-testid="remote-counter">{c}</span>
+      </div>
+    </div>
+  );
+};

examples/mf-v2-remote/src/pages/index.tsx

@@ -0,0 +1,10 @@
+import Counter from '../exposes/Counter';
+
+export default () => {
+  return (
+    <div>
+      <h1> use exposed in local</h1>
+      <Counter />
+    </div>
+  );
+};

examples/mf-v2-remote/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./src/.umi/tsconfig.json"
+}