1. 首页
  2. IT资讯

搭建 umi + qiankun + antd 的微前端平台

关键词:

  • umi
  • qiankun
  • ant design pro
  • 非动态注册子应用
  • 非动态装载子应用(路由)

背景

银行项目,需要一个前端中台,承载各项目组开发的应用,本篇文章是在工作实践后所写,还是具有一定可借鉴性的,至于官网已经有相关内容还专门写这么一篇,还是因为在实践中官网中的部分不完善,导致搭建过程异常坎坷。

搭建主应用工程

主应用一般都是类后管平台,因此我使用 ant-deisng-pro 做主应用,使用以下命令创建:

参考:https://pro.ant.design/index-cn(页面底部)

yarn create umi main-app

ant-design-pro
pro v4
ts
simple
antd@4

搭建子应用工程

使用以下命令创建:

yarn create @umijs/umi-app sub-app-1

主应用

安装qiankun

yarn add qiankun

安装@umijs/plugin-qiankun

yarn add @umijs/plugin-qiankun -D

注册子应用

参考:
https://umijs.org/zh-CN/plugins/plugin-qiankun#a-插件构建期配置子应用

在 config/config.ts 文件中,仿照以下代码进行添加:

子应用的工程名称是:sub-app-1
子应用的端口是:8001

{
  ...
  qiankun: {
    master: {
      apps: [
        {
          name: 'sub-app-1',
          entry: '//localhost:8001',
        },
      ],
    },
  },
}

装载子应用(路由)

现在还差个指向子应用的路由。
在 config/config.ts 文件中,仿照以下代码,在 routes 属性下进行添加:

{
  name: 'sub-app-1',
  icon: 'smile',
  path: '/sub-app-1',
  microApp: 'sub-app-1',
},

示例文件

担心大家不会,此处还提供一个在已经配置好了的 config/config.ts 文件。
config.ts

子应用

安装@umijs/plugin-qiankun

yarn add @umijs/plugin-qiankun -D

注册刚安装的插件

参考:
https://umijs.org/zh-CN/plugins/plugin-qiankun#第一步:插件注册(configjs)

在 .umirc.ts 文件中添加以下代码:

qiankun: {
slave: {}
}

添加后如下:

import { defineConfig } from 'umi';

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  routes: [
    { path: '/', component: '@/pages/index' },
  ],
  qiankun: {
   slave: {}
  }
});

修改工程名称

打开 package.json 文件,在第一行添加属性 name 及相应属性值。

导出相应生命周期钩子

参考:
https://umijs.org/zh-CN/plugins/plugin-qiankun#第二步:配置运行时生命周期钩子(可选)

在 src/app.ts 中添加以下代码,app.ts 如果不存在则需要自行创建:

export const qiankun = {
  // 应用加载之前
  async bootstrap(props) {
    console.log('app1 bootstrap', props);
  },
  // 应用 render 之前触发
  async mount(props) {
    console.log('app1 mount', props);
  },
  // 应用卸载之后触发
  async unmount(props) {
    console.log('app1 unmount', props);
  },
};

效果

主应用效果

image.png

子应用效果

image.png

Github源代码

https://github.com/blueju/umi-mirror-docs/tree/umi-micro-fe-platform

结语

以上配置均不是动态注册子应用、动态装载子应用(路由),但现实项目中更多需要的是动态注册子应用、动态装载子应用(路由)。

TODO

  • 写一篇如何动态注册子应用、动态装载子应用(路由)的blog

本文来自投稿,不代表程序员编程网立场,如若转载,请注明出处:http://www.cxybcw.com/202998.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code