微前端中,为子应用配备开发环境临时导航菜单,提高开发效率

blueju
• 阅读 1471

首发于 语雀文档

场景

子应用开发过程中,势必需要频繁地切换菜单 ,但因为子应用打包后是要接入到基座的,因此不能有菜单等。但如此的话,日常的开发又会不方便,甚至影响开发效率。

但我的个人直觉,貌似更正确的做法是:将子应用直接接入到基座中开发调试,

因此目前场景下,我们需要的是:
在开发环境下,我们希望有菜单,方便我们开发人员进入及路由切换;
在生产环境下,我们希望没有菜单;

因此我们可以在打包里做手脚。

具体操作

一般能考虑到这种场景的,势必也是使用 umi 有一段时间了,因此操作这块的介绍不会详细到傻瓜式教学。

一、搭建 umi 脚手架

由于我们使用的 umi +qiankun 实现的微前端,因此请先搭建 umi 脚手架,具体操作请按照文档。

https://umijs.org/zh-CN/docs/getting-started#脚手架

二、创建 .umirc.local.ts
local 配置只会在本地开发环境的情况下生效,因此很符合我们想要的场景

https://umijs.org/zh-CN/docs/config#本地临时配置

三、配置导航菜单
利用现成已有的依赖 @umijs/plugin-layout,配置导航菜单

https://umijs.org/zh-CN/plugins/plugin-layout#扩展的路由配置

我是凭回忆写下此文章的,如果有不妥或缺失步骤之处,麻烦提醒,我会及时修改,谢谢。

Github

https://github.com/blueju/my-ideal-umi-subapp-boilerplate

参考:

  1. https://umijs.org/zh-CN/docs/config#本地临时配置
  2. https://umijs.org/zh-CN/plugins/plugin-layout
  3. https://umijs.org/zh-CN/plugins/plugin-layout#扩展的路由配置

点赞
收藏
评论区
推荐文章
blueju blueju
3年前
使用 umi 3 创建子应用并接入主应用
使用umi3创建子应用并接入主应用前言:<br/umi3更新频繁,文档不完善,时效性不定,因此前提条件很重要,今天是2020年8月21日。<br/<br/创建子应用使用的脚手架是:umi3<br/创建主应用使用的脚手架是:um2,但是本篇文章暂时不介绍创建主应用的过程及在主应用中的配置过程。<br/<aname"Yd
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Easter79 Easter79
3年前
SpringBoot自定义序列化的使用方式
场景及需求:项目接入了SpringBoot开发,现在需求是服务端接口返回的字段如果为空,那么自动转为空字符串。例如:\    {        "id":1,        "name":null    },    {        "id":2,        "name":"x
Wesley13 Wesley13
3年前
MySQL总结(十一)子查询
!(https://oscimg.oschina.net/oscnet/upa344f41e81d3568e3310b5da00c57ced8ea.png)子查询1\.什么是子查询需求:查询开发部中有哪些员工selectfromemp;通
Easter79 Easter79
3年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Wesley13 Wesley13
3年前
35岁,真的是程序员的一道坎吗?
“程序员35岁是道坎”,“程序员35岁被裁”……这些话咱们可能都听腻了,但每当触及还是会感到丝丝焦虑,毕竟每个人都会到35岁。而国内互联网环境确实对35岁以上的程序员不太友好:薪资要得高,却不如年轻人加班猛;虽说经验丰富,但大部分公司并不需要太资深的程序员。但35岁危机并不是不可避免的,比如你可以不断精进技术,将来做技术管理或者
Stella981 Stella981
3年前
SpringBoot自定义序列化的使用方式
场景及需求:项目接入了SpringBoot开发,现在需求是服务端接口返回的字段如果为空,那么自动转为空字符串。例如:\    {        "id":1,        "name":null    },    {        "id":2,        "name":"x
Wesley13 Wesley13
3年前
Java多线程导致的的一个事物性问题
业务场景我们现在有一个类似于文件上传的功能,各个子站点接受业务,业务上传文件,各个子站点的文件需要提交到总站点保存,文件是按批次提交到总站点的,也就是说,一个批次下面约有几百个文件。      考虑到白天提交这么多文件会影响到子站点其他系统带宽,我们将分站点的文件提交到总站点这个操作过程独立出来,放到晚上来做,具体时间是晚上7:00到早上7:00。