使用 UmiJS+@umijs/plugin-qiankun 搭建微前端应用

3,331 阅读2分钟

欢迎关注微信公众号:前端阅读室

什么是 UmiJS

Umi,中文可发音为乌米,是可扩展的企业级前端应用框架。Umi 以路由为基础的,同时支持配置式路由和约定式路由,保证路由的功能完备,并以此进行功能扩展。然后配以生命周期完善的插件体系,覆盖从源码到构建产物的每个生命周期,支持各种功能扩展和业务需求。

什么是 qiankun

Qiankun enables you and your teams to build next-generation and enterprise-ready web applications leveraging Micro Frontends. It is inspired by and based on single-spa.

A quick recap about the concept of Micro Frontends:

Techniques, strategies and recipes for building a modern web app with multiple teams using different JavaScript frameworks. — Micro Frontends

新建 Umi 工程

快速上手

我们一共需要新建 3 个 Umi 工程:1 个主应用和 2 个子应用 app1、app2。

开发主应用

编写 Layout 代码

新建 src/layouts/index.tsx,编写代码如下:

import React from "react";
import { Link } from "umi";

const Layout: React.FC = ({ children }) => {
  return (
    <div>
      <div>
        <div>
          <Link to="/app1">app1</Link>
        </div>
        <div>
          <Link to="/app2">app2</Link>
        </div>
      </div>
      {children}
    </div>
  );
};

export default Layout;

安装 @umijs/plugin-qiankun

yarn add @umijs/plugin-qiankun -D

配置主应用

在 .umirc.ts 中添加配置如下:

qiankun: {
  master: {
    // 注册子应用信息
    apps: [
      {
        name: 'app1',
        entry: 'http://localhost:8001',
      },
      {
        name: 'app2',
        entry: 'http://localhost:8002',
      },
    ],
    // 配置微应用关联的路由
    routes: [
      {
        path: '/app1',
        microApp: 'app1',
      },
      {
        path: '/app2',
        microApp: 'app2',
      },
    ],
  },
},

开发子应用

修改 index page 代码

为了方便区分 app1 和 app2,我们将 app1 和 app2 工程的 src/pages/index.tsx 分别修改为:

// app1/src/pages/index.tsx
import React from "react";
import styles from "./index.less";

const Index: React.VFC = () => {
  return (
    <div>
      <h1 className={styles.title}>App1</h1>
    </div>
  );
};

export default Index;
// app2/src/pages/index.tsx
import React from "react";
import styles from "./index.less";

const Index: React.VFC = () => {
  return (
    <div>
      <h1 className={styles.title}>App2</h1>
    </div>
  );
};

export default Index;

安装 @umijs/plugin-qiankun

yarn add @umijs/plugin-qiankun -D

配置子应用

给 .umirc.ts 增加 qiankun 配置即可:

qiankun: {
  slave: {},
},

效果演示

效果演示

参考

欢迎关注微信公众号:前端阅读室