UMI的前世今生：从单体到微前端架构

2023-12-01 02:06:57

随着微前端架构日益完善，前端工程也不再局限于传统的巨石应用化开发，借鉴了后端微服务化的开发思想，前端开发也越发趋近于微前端的开发模式；那在当前最火热的react框架umi中，怎么样实现无缝对接qianku，本文将阐述umi体系中微前端框架的项目实战。

一、微前端框架的由来

在传统的单体架构中，前端代码是一个整体，所有的功能都集中在一个项目中。这种架构虽然简单易懂，但随着项目规模的增大，代码量也会不断膨胀，维护和管理起来变得越来越困难。

微前端架构是一种新的前端架构模式，它将前端代码拆分成多个独立的模块，每个模块都可以独立开发、部署和维护。这种架构可以有效地解决单体架构的痛点，让前端开发更加灵活、高效和可维护。

二、UMI与微前端框架的结合

UMI是一个流行的React框架，它提供了许多开箱即用的特性，可以帮助开发人员快速构建复杂的应用程序。UMI与微前端框架的结合，可以为开发人员提供一套完整的解决方案，帮助他们轻松地构建微前端应用程序。

UMI提供了两种微前端框架：

qiankun ：qiankun是一个独立的微前端框架，它可以与UMI无缝集成。qiankun提供了丰富的功能，可以帮助开发人员轻松地构建微前端应用程序。
umi-qiankun ：umi-qiankun是UMI团队开发的微前端框架，它是基于qiankun构建的。umi-qiankun提供了与UMI更紧密的集成，可以帮助开发人员更加轻松地构建微前端应用程序。

三、UMI体系中微前端框架的项目实战

下面，我们将通过一个项目实战，来演示如何在UMI体系中使用微前端框架。

1. 项目初始化

首先，我们需要创建一个新的UMI项目。我们可以使用以下命令来创建项目：

npx create-umi my-app

2. 安装微前端框架

接下来，我们需要安装微前端框架。我们可以使用以下命令来安装qiankun：

npm install --save qiankun

3. 配置微前端框架

在安装了微前端框架之后，我们需要在UMI项目中配置它。我们可以修改config/config.js文件，在plugins数组中添加以下配置：

{
  "id": "qiankun",
  "loader": {
    "lazy": true
  }
}

4. 创建微前端应用程序

现在，我们可以创建微前端应用程序了。我们可以使用以下命令来创建一个新的微前端应用程序：

npx create-umi my-app-1

5. 集成微前端应用程序

接下来，我们需要将微前端应用程序集成到UMI项目中。我们可以修改UMI项目的src/App.js文件，在其中添加以下代码：

import { Qiankun, registerMicroApps } from 'qiankun';

registerMicroApps([
  {
    name: 'app1',
    entry: '//localhost:8001',
    container: '#app1',
  },
]);

function App() {
  return (
    <div className="App">
      <Qiankun />
    </div>
  );
}

export default App;