从零开始打造微前端世界：Hello，10 分钟带你实现微前端！

2024-02-14 11:17:48

在当今快速发展的数字世界中，微前端架构正逐渐成为构建复杂且可维护的前端应用程序的首选方法。微前端允许我们将应用程序分解为较小的、独立的功能模块，称为微前端。这些微前端可以独立开发、部署和维护，从而提高敏捷性、可扩展性和可重用性。

在本篇文章中，我们将踏上微前端之旅的第一步，以 10 分钟为目标，手把手带你构建一个简单的 "Hello，World！" 微前端应用程序。我们将使用流行的 umi3 框架和 qiankun 微前端库。做好准备，让我们一起开启这段激动人心的探索吧！

1. 初始化主应用

首先，我们创建一个主应用，它将作为微前端应用程序的容器。

npx create-umi-app --type=pc

安装 qiankun：

npm install --save qiankun

2. 创建子应用

接下来，创建一个子应用，它将负责显示 "Hello，World！" 消息。

npx create-umi-app --type=library --name=sub-app

3. 配置主应用

在主应用的 src/app.tsx 文件中，导入 qiankun 并注册子应用：

import { registerMicroApps } from 'qiankun';

registerMicroApps([
  {
    name: 'sub-app',
    entry: '//localhost:7100',
    container: '#sub-app-container',
  },
]);

4. 配置子应用

在子应用的 src/app.tsx 文件中，导出一个组件：

export default function SubApp() {
  return <h1>Hello，World！</h1>;
}

5. 通信

为了实现通信，我们在主应用中创建一个 event-bus 服务：

import { useEffect } from 'react';

export const useEventBus = () => {
  const [eventBus, setEventBus] = useState<EventBus | null>(null);

  useEffect(() => {
    const listener = qiankun.onGlobalStateChange(({ event, sender }) => {
      console.log(`[qiankun] ${sender} dispatched ${event.type} event`);
    });

    setEventBus({
      on: qiankun.onGlobalStateChange,
      off: qiankun.offGlobalStateChange,
    });

    return () => {
      listener();
      setEventBus(null);
    };
  }, []);

  return eventBus;
};

在子应用中，我们可以使用 useEventBus 钩子来向主应用发送事件：

import { useEventBus } from '../app';

export default function SubApp() {
  const eventBus = useEventBus();

  useEffect(() => {
    eventBus.on('test-event', ({ payload }) => {
      console.log('Received "test-event" from main app with payload:', payload);
    });

    return () => {
      eventBus.off('test-event');
    };
  }, [eventBus]);

  return <h1>Hello，World！</h1>;
}

6. 上线

要将子应用部署到生产环境，我们需要在 nginx 配置中启用跨域请求：

location /sub-app {
  proxy_pass http://localhost:7100;
  proxy_set_header X-Forwarded-Host $host;
  proxy_set_header X-Forwarded-Proto $scheme;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}