微前端架构

Module Federation (Webpack 5)

主应用配置

// webpack.config.js
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      remotes: {
        app1: 'app1@http://localhost:3001/remoteEntry.js',
        app2: 'app2@http://localhost:3002/remoteEntry.js'
      },
      shared: {
        react: { singleton: true },
        'react-dom': { singleton: true }
      }
    })
  ]
};

子应用配置

// webpack.config.js
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'app1',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/Button',
        './App': './src/App'
      },
      shared: {
        react: { singleton: true },
        'react-dom': { singleton: true }
      }
    })
  ]
};

使用远程组件

import React, { lazy, Suspense } from 'react';

const RemoteButton = lazy(() => import('app1/Button'));

function App() {
  return (
    <Suspense fallback="Loading...">
      <RemoteButton />
    </Suspense>
  );
}

Single-SPA

注册应用

import { registerApplication, start } from 'single-spa';

registerApplication({
  name: '@org/app1',
  app: () => System.import('@org/app1'),
  activeWhen: '/app1'
});

registerApplication({
  name: '@org/app2',
  app: () => System.import('@org/app2'),
  activeWhen: '/app2'
});

start();

React 应用适配

import React from 'react';
import ReactDOM from 'react-dom';
import singleSpaReact from 'single-spa-react';
import App from './App';

const lifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: App,
  errorBoundary(err, info, props) {
    return <div>Error: {err.message}</div>;
  }
});

export const { bootstrap, mount, unmount } = lifecycles;

通信方案

事件总线

class EventBus {
  private events: Map<string, Function[]> = new Map();

  on(event: string, callback: Function) {
    if (!this.events.has(event)) {
      this.events.set(event, []);
    }
    this.events.get(event)!.push(callback);
  }

  emit(event: string, data: any) {
    const callbacks = this.events.get(event);
    if (callbacks) {
      callbacks.forEach(cb => cb(data));
    }
  }

  off(event: string, callback: Function) {
    const callbacks = this.events.get(event);
    if (callbacks) {
      const index = callbacks.indexOf(callback);
      if (index > -1) callbacks.splice(index, 1);
    }
  }
}

export const eventBus = new EventBus();

共享状态

// 使用 Zustand 跨应用共享
import { create } from 'zustand';

export const useGlobalStore = create((set) => ({
  user: null,
  setUser: (user) => set({ user })
}));