基于Webpack5 Module Federation的业务解耦实践示例

const federationConfig = {
     name: 'portal',
     filename: 'remoteEntry.js',
     // 当前组件需要暴露出去的组件
     exposes: {
         './AppMenus': './src/views/components/app-menus',
     },
     shared: {
         react: { 
            singleton: true,
            eager: true, 
            requiredVersion: deps.react
         },
         'react-dom': {
             singleton: true,
             eager: true,
             requiredVersion: deps['react-dom'],
         },
     },
 };

 const plugins = [
     ...baseKoConfig.plugins,
     {
         key: 'WebpackPlugin',
         action: 'add',
         opts: {
             name: 'ModuleFederationPlugin',
             fn: () => new ModuleFederationPlugin({ ...federationConfig }),
         },
     },
 ].filter(Boolean);

const federationConfig = {
name: 'xxx',
filename: 'remoteEntry.js',
// 关联需要引入的其他应用
remotes: {
    // 本地相互访问采取该方式
    portal: 'portal@http://127.0.0.1:8081/portal/remoteEntry.js',
},
shared: {
    antd: {
        singleton: true,
        eager: true,
        requiredVersion: deps.antd,
    },
    react: {
        singleton: true,
        eager: true,
        requiredVersion: deps.react,
    },
    'react-dom': {
        singleton: true,
        eager: true,
        requiredVersion: deps['react-dom'],
    },
},
};

const AppMenus = React.lazy(() => import('portal/AppMenus'));
<Navigator
{...this.props}
>
<React.Suspense fallback="loading">
    <AppMenus {...this.props} />
</React.Suspense>
</Navigator>

// 需要 ts 定义 
// typings/app.d.ts 文件
declare module 'portal/AppMenus' {
const AppMenus: React.ComponentType<any>;
export default AppMenus;
}

module.exports = {
proxy: {
    '/portal': {
        target: 'http://127.0.0.1:8081', // 本地
        //target: 'portal 对应的地址', 本地 -〉 devops 环境
        changeOrigin: true,
        secure: false,
        onProxyReq: ProxyReq,
   },
}
}

//remote.tsx 
import React from 'react';
function loadComponent(scope, module) {
    return async () => {
        // Initializes the share scope. This fills it with known provided modules from this build and all remotes
        await __webpack_init_sharing__('default');
        const container = window[scope]; // or get the container somewhere else
        // Initialize the container, it may provide shared modules
        await container.init(__webpack_share_scopes__.default);
        const factory = await window[scope].get(module);
        const Module = factory();
        return Module;
    };
}
const urlCache = new Set();
const useDynamicScript = (url) => {
    const [ready, setReady] = React.useState(false);
    const [errorLoading, setErrorLoading] = React.useState(false);
    React.useEffect(() => {
        if (!url) return;
        if (urlCache.has(url)) {
            setReady(true);
            setErrorLoading(false);
            return;
        }
        setReady(false);
        setErrorLoading(false);
        const element = document.createElement('script');
        element.src = url;
        element.type = 'text/javascript';
        element.async = true;
        element.onload = () => {
            console.log('onload');
            urlCache.add(url);
            setReady(true);
        };
        element.onerror = () => {
            console.log('error');
            setReady(false);
            setErrorLoading(true);
        };
        document.head.appendChild(element);
        return () => {
            urlCache.delete(url);
            document.head.removeChild(element);
        };
    }, [url]);
    return {
        errorLoading,
        ready,
    };
};
const componentCache = new Map();
export const useFederatedComponent = (remoteUrl, scope, module) => {
    const key = `${remoteUrl}-${scope}-${module}`;
    const [Component, setComponent] = React.useState(null);
    const { ready, errorLoading } = useDynamicScript(remoteUrl);
    React.useEffect(() => {
        if (Component) setComponent(null);
        // Only recalculate when key changes
    }, [key]);
    React.useEffect(() => {
        if (ready && !Component) {
            const Comp = React.lazy(loadComponent(scope, module));
            componentCache.set(key, Comp);
            setComponent(Comp);
        }
        // key includes all dependencies (scope/module)
    }, [Component, ready, key]);
    return { errorLoading, Component };
};
//layout header.tsx
const Header = () => {
    ....
    const url = `${window.APP_CONF?.remoteApp}/portal/remoteEntry.js`;
  const scope = 'portal';
  const module = './AppMenus'
    const { Component: FederatedComponent, errorLoading } = useFederatedComponent(
      url,
      scope,
      module
  );
    return (
        <Navigator logo={<Logo />} menuItems={menuItems} licenseApps={licenseApps} {...props}>
            {errorLoading ? (
                <WarningOutlined />
            ) : (
                FederatedComponent && (
                    <React.Suspense fallback={<Spin />}>
                        {<FederatedComponent {...props} top={64} showBackPortal />}
                    </React.Suspense>
                )
            )}
        </Navigator>
    );
}

// proxy -> 代理修改
// header 引用的远程地址 -> 修改
window.APP_CONF?.remoteApp = 'http://127.0.0.1:8081'
proxy: {
    '/portal': {
        target: 'http://127.0.0.1:8081'
    }
}

// proxy -> 代理修改
// header 引用的远程地址 -> 修改
window.APP_CONF?.remoteApp = 'xxx'
proxy: {
    '/portal': {
        target: 'xxx'
    }
}