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

blueju 等级 297 0 0

关键词:

  • 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);
  },
};

效果

主应用效果

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

子应用效果

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

Github源代码

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

结语

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

TODO

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

首发于语雀文档

收藏
评论区

相关推荐

vue.config.js配置前端代理
// vue.config.js 配置说明 //官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/cssloaderoptions // 这里只列一部分,具体配置参考文档 module.exports { // 部署生产环境和开发环境下的URL。 // 默认情况下,Vue CLI
巨大提升!更快的 async 函数和 promises
(https://imghelloworld.osscnbeijing.aliyuncs.com/669a1c8f7203559afa4621628303674c.png) 翻译自:Faster async functions and promises(https://v8.dev/blog/fastasync) JavaScript
React Hook实战项目(含axios封装,双层路由的使用,redux的使用)
好久没写文章了,今天就来介绍下最近写的react hook的练手项目,用到相关的技术有以下: antd,reactrouterdom,reduxthunk,axios,hook,下面就开始介绍自己的项目了。项目比较简单,只是把架子搭好了,后面会继续完善。这是我的项目地址 https://github.com/Hongguobin/createa
基于Vue3+TypeScript+ Vue-Cli4.0构建手机端模板脚手架
vue3h5template基于 Vue3TypeScript VueCli4.0 vant ui sass rem 适配方案axios 封装 jssdk 配置 vconsole 移动端调试,构建手机端模板脚手架项目地址: 建议手机端查看 Node 版本要求Vue CLI 需要 Node.js 8.9 或更高版本
搭建 umi + qiankun + antd 的微前端平台
<a name"f5444d4a"</a 关键词: umi qiankun ant design pro 非动态注册子应用 非动态装载子应用(路由)<a name"Lxdp4"</a 背景银行项目,需要一个前端中台,承载各项目组开发的应用,本篇文章是在工作实践后所写,还是具有一定可借鉴性的,至于官网已经有相关内容还专门写这么一篇,还
umi 项目多环境打包配置
参考:1. 1. 1. <br /我的需求: 在不同环境(dvl、sit)下打包,请求基础地址也需要随环境的变化而改变<br /遇到的困难: umi v3 文档不完善 未知bug<a name"K770H"</a 1. 创建不同环境的配置文件此部分可参考:2. <br /需要 dvl、sit 两个环境,因此创建两个配置文件,如图:<br
umi + qiankun 动态注册子应用解决方案
前言 首发于 <br /本篇文章可以被视为上一篇文章()的延续,上一篇文章大致讲述了搭建一个简易微前端平台的过程,其中关于子应用注册的配置是通过硬编码的方式,在构建打包前写入的。<br /<br /但是真实项目中,更需要的是动态注册子应用,比如说我正参与的这个项目。<br /<br /本篇文章的示例代码是基于上一篇文章示例代码改动的,上一篇文
umi +qiankun 主应用动态装载子应用(路由)解决方案
<a name"p1boA"</a 前言接上一篇(),上一篇中使用的都是运行时动态注册子应用,子应用路由仍然是写死的、非动态获取。<br /<br /然后真实项目中除了需要动态注册子应用,还很有可能需要动态装载子应用(路由),比如说:不同权限的用户需要给予他们不同的路由。<br /<br /此篇 blog 的代码是基于上一篇进行改动的,上一篇
使用 umi 3 创建子应用并接入主应用
使用 umi 3 创建子应用并接入主应用前言:<br /umi 3 更新频繁,文档不完善,时效性不定,因此前提条件很重要,今天是2020年8月21日。<br /<br /创建子应用使用的脚手架是:umi 3<br /创建主应用使用的脚手架是:um 2,但是本篇文章暂时不介绍创建主应用的过程及在主应用中的配置过程。<br /<a name"Yd
在微前端中,antd icon createFormIconfontCN 的本地化问题
首发于 <a name"tCbT2"</a 前言用过 antd icon 的朋友们可能知道,对于 createFormIconfontCN,其中介绍的用法是: 使用的是外链的方式javascriptimport { createFromIconfontCN } from '@antdesign/icons';const IconFon
antd table input 失焦的问题
<a name"UYeEu"</a 背景隔壁 zym 同事遇到了一个问题,在编辑表格时,每输入一个字符后都会失去焦点,需要重新点击聚焦后才能继续输入,如图:<br /<br /​<br /<a name"xKS8Z"</a 原因归根结底,是关于 key 的问题。<br /原先的代码中,components 在 render 中,然而在每次 setState
JavaScript 和 Node.js 中事件循环
1.JavaScript中事件循环可以参考《JavaScript忍者秘籍第二版》第十三章,讲解的很好。JavaScript中事件循环,主要就在理解宏任务和微任务这两种异步任务。宏任务(macrotask): setTimeOut 、 setInterval 、 setImmediate 、 I/O 、 各种callback、 UI渲染 、messageCh
https://cloud.tencent.com/developer/article/write/1830331
一、目标今天的目标是这个sign和appcode 二、步骤 Jadx没法上了app加了某梆的企业版,Jadx表示无能为力了。 FRIDADEXDumpDexDump出来,木有找到有效的信息。 Wallbreaker葫芦娃的Wallbreaker可以做些带壳分析,不过这个样本,用Frida的Spawn模式可以载入,Attach模式会失败。而直接用Objecti
vue项目无配置文件解决方案
问题在开发vue项目时,需要重新设置项目的启动端口,发现项目目录中并没有相关的配置文件【config目录】vue脚手架版本【通过vue version查询】:@vue/cli 4.5.13解决方案在vue项目根目录下创建vue.config.js配置文件vue.config.jsmodule.exports devServer: d
Ory Kratos 用户认证
为用户认证与管理系统。本文将动手实现浏览器(React+AntD)的完整流程,实际了解下它的 API 。 代码: https://github.com/ikuokuo/startorykratos 了解 Kratos 获取代码bashgit clone b v0.7.0alpha.1 depth 1 https://github.com/ory/kratos