umi+plugin-qiankun 微应用前端实践含源码

前端

2024-02-11 14:54:44

微应用

微应用是一种前端架构模式，它将一个大型单体应用分解成多个独立的、可复用的小应用，每个小应用都有自己的代码库、路由和状态管理。微应用可以独立开发、部署和维护，并且可以根据业务需要进行灵活组合。

umi

umi 是一个用于构建企业级前端应用的框架，它集成了路由、状态管理、数据请求、按需加载、热更新等多种功能，极大地简化了前端开发的复杂度。

plugin-qiankun

plugin-qiankun 是一个微应用框架，它提供了一套完整的微应用开发和管理解决方案。plugin-qiankun 可以将多个微应用集成到一个主应用中，并实现微应用之间的路由、状态管理和通信。

实践

初始化主应用

首先，使用 umi pro 来快速初始化主应用。umi pro 是一个命令行工具，它可以帮助我们快速生成一个开箱即用的 umi 项目。

npx umi new my-app --pro

创建子应用

接下来，使用 umi 来创建子应用。

cd my-app
npx umi g sub-app my-sub-app

实现路由嵌套

在主应用中，我们可以使用 <Route> 组件来配置路由。在子应用中，我们可以使用 <BrowserRouter> 组件来配置路由。

// 主应用的路由配置
import { Route } from 'react-router-dom';

export default () => (
  <div>
    <Route path="/" component={MainApp} />
    <Route path="/sub-app" component={SubApp} />
  </div>
);

// 子应用的路由配置
import { BrowserRouter, Route } from 'react-router-dom';

export default () => (
  <BrowserRouter>
    <Route path="/" component={SubApp} />
  </BrowserRouter>
);

实现通信

在主应用和子应用之间，我们可以使用 window.postMessage() 来实现通信。

// 主应用向子应用发送消息
window.postMessage({ type: 'message', data: 'hello from main app' }, '*');

// 子应用接收主应用的消息
window.addEventListener('message', (event) => {
  if (event.data.type === 'message') {
    console.log(`message from main app: ${event.data.data}`);
  }
});

// 子应用向主应用发送消息
window.postMessage({ type: 'message', data: 'hello from sub app' }, '*');

// 主应用接收子应用的消息
window.addEventListener('message', (event) => {
  if (event.data.type === 'message') {
    console.log(`message from sub app: ${event.data.data}`);
  }
});