微前端实践：使用 Umi 3.x、qiankun 和模块联邦构建可扩展应用

2023-10-11 08:16:49

引言

随着大型单体应用程序的复杂性和维护成本不断增加，微前端架构逐渐成为一种流行的解决方案。它将应用程序拆分为独立的微服务或模块，这些模块可以在单个界面中协同工作。这不仅可以提高可扩展性，还可以增强开发和维护的灵活性。

在本文中，我们将使用 Umi 3.x、qiankun 和模块联邦这三项领先的技术来构建一个微前端应用程序。

项目初始化

首先，让我们创建一个新的 Umi 项目。使用以下命令：

npx create-umi my-app

这将创建包含 Umi 3.x 配置和默认文件结构的新目录。接下来，我们需要安装 qiankun 和模块联邦包：

yarn add qiankun umi-plugin-qiankun

安装完成后，在 config/config.ts 文件中配置 qiankun 插件：

export default {
  // ...其他配置
  plugins: [
    // qiankun 插件配置
    ['umi-plugin-qiankun', {}],
  ],
};

配置模块联邦

模块联邦是一种 Webpack 特性，它允许在多个应用程序之间共享代码模块。这在微前端场景中非常有用，因为我们可以将共享模块打包到单独的模块中，然后由各个微服务按需加载。

在我们的项目中，需要在 package.json 文件中添加以下配置：

{
  // ...其他配置
  "webpack": {
    "externals": [
      {
        "window": "window",
        "document": "document",
        "React": "React",
        "ReactDOM": "ReactDOM",
      }
    ],
    "shared": {
      "react": {
        "singleton": true,
        "requiredVersion": "17.0.2",
        "eager": true
      },
      "react-dom": {
        "singleton": true,
        "requiredVersion": "17.0.2",
        "eager": true
      },
    }
  }
}

该配置告诉 Webpack 将 React 和 ReactDOM 作为共享模块打包。这意味着它们将在启动时加载，并可以被所有微服务使用。

构建微服务

现在，我们可以开始构建我们的微服务了。让我们创建一个新的微服务，称为 sub-app-1：

npx create-umi my-sub-app-1 --use-qiankun --qiankun-master

这将创建一个新的 Umi 项目，并自动配置 qiankun 作为主应用程序。我们需要在 sub-app-1 中安装共享模块：

yarn add react react-dom

接下来，在 sub-app-1/src/app.js 文件中，编写以下代码：

import React from 'react';

const App = () => {
  return (
    <div>
      <h1>Sub App 1</h1>
    </div>
  );
};

export default App;

注册微服务

要将微服务注册到主应用程序，我们需要在主应用程序的 qiankun.config.ts 文件中添加以下配置：

export default {
  master: {
    apps: [
      {
        name: 'sub-app-1',
        entry: '//localhost:8081',
        activeRule: '/sub-app-1',
        container: '#sub-app-1-container',
      },
    ],
  },
};

该配置告诉 qiankun 将 sub-app-1 微服务注册到主应用程序中，并将其加载到 #sub-app-1-container 元素中。

运行应用程序

现在，我们可以启动我们的应用程序了。在主应用程序目录中运行以下命令：