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"
+}