umijs + qiankun
本文档是记录站长为长沙一家医疗公司做技术升级改造，采用umijs + antd + qiankun 技术栈时遇到的一些问题，以及解决这些问题的方案。
🚀概述
Umi，中文发音为「乌米」，是可扩展的企业级前端应用框架。Umi 以路由为基础，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。 🐳
静态配置在config/config.ts，运行时配置在src/app.tsx。config.ts开启对应的插件才会注入相应的依赖。如：
// 开启qiankun依赖
{
qiankun: {
master: {},
}
};
运行时接入qiankun配置
/**
* 乾坤配置 加载微应用数据
* @returns
*/
export function qiankun() {
const config: QiankunConfigType & { master: { prefetch: boolean } } = {
master: {
apps: [],
prefetch: false,//这里实际是有用的
},
}
fetchAppData().then((res) => {
if (res.data) {
const microData = res.data;
microData.map((item: AppAPI.AppItemType) => {
config.master.apps.push({
name: item.number,
entry: item.url || '',
})
})
}
})
return config;
}
父子应用通信，如果父子应用采用的都是umijs，是可以按官网的做法，比较简单的进行数据交互和响应式处理。然此次微应用是用vue写的，也考虑到后续接入的应用会有各种架构，所以采用的方案是更加通用的做法，并且由于业务的要求，进行了一些特殊处理
/**
* const { micro,kp } = useModel('@@qiankunStateForSlave');
* 父子应用通信 该函数的返回值将传递给子应用
* @returns
*/
export function useQiankunStateForSlave() {
//API函数
const [api, setApi] = useState({
...microUtil
})
//响应式API
const [respApi, setRespApi] = useState({})
//响应式数据
const [state, doSetState]: UseStateType<MicroGlobalStateType> = useState({
callback: {}
})
//回调函数
kpSetCallback({ useEffect, state });
// 实际给子应用调用修改state的方法
// 传参和实现可以自定义，子应用直接调用setState是不生效的，所以才需要这个额外的方法，这是一个坑
const setState = (state: any) => {
doSetState(state)
}
return {
micro: { api, respApi, state, setState },
kp: { setApi, setRespApi, doSetState }
}
}
在加载子应用的方案时，采用umijs提供的组件<MicroApp/>，相较于<MicroAppWithMemoHistory/> ， 不需要指定url，这个和后续的一个坑有关。
代码过多，这里只贴出关键代码
const element = React.useMemo(() => {
let cachedElement = getCachedElement(url);
if (cachedElement) {
return cachedElement;
}
cachedElement = <MicroApp
settings={settings}
wrapperClassName={cns('microContainer')}
name={name}
url={url}
autoCaptureError
autoSetLoading
loader={loaderHadler}
errorBoundary={ErrorComponent}
{...microData}
loadingState
base={base}
pageContext={pageContext}
/>
saveElement(url, cachedElement);
return cachedElement;
}, [name, url, microData.data.userLayout.component]);
🚀开始踩坑
坑1 子应用找不到
子应用数据举例如下
const microList = [
{
name: 'app1',
entry: '//localhost:5556',
},
];
情况一：不要开启代理，找问题能找疯掉。跟踪到底层，你会发现load的地址是代理前的地址。跨域问题组件本身已处理，不需要我们考虑，虽然前端可能报的是跨域的错，但实际是加载地址错误。
情况二：Application died in status LOADING_SOURCE_CODE: You need to export the functional lifecycles in xxx entry
/**
* bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。
* 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
*/
export async function bootstrap() {
console.log('react app bootstraped');
}
/**
* 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
*/
export async function mount(props) {
ReactDOM.render(<App />, props.container ? props.container.querySelector('#root') : document.getElementById('root'));
}
/**
* 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
*/
export async function unmount(props) {
ReactDOM.unmountComponentAtNode(
props.container ? props.container.querySelector('#root') : document.getElementById('root'),
);
}
/**
* 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
*/
export async function update(props) {
console.log('update props', props);
}
找不到这几个函数，原因可能是子应用的webpack配置问题
output: {
library: `${name}-[name]`,
libraryTarget: 'umd', // 把微应用打包成 umd 库格式
jsonpFunction: `webpackJsonp_${name}`,
// chunkLoadingGlobal: `webpackJsonp_${name}`,
// globalObject: 'window',
}
其他原因可到官网看看：qiankun常见问题
坑2 父子应用通信，数据要区分局部的/全局的，全局的都是响应式的数据,响应式的数据要考虑如何提供对应的回调处理,或者说怎么通知子应用数据变更
//qiankun fun state
const { kp } = useModel('@@qiankunStateForSlave');
//set函数
const { doSetState, setRespApi } = kp;
//简单数据
const microData = kpGetMicroData(initialState!, name, component);
//响应式函数
const respApi = kpGetMicroRespApi(setInitialState);
useEffect(() => {
//追加响应式数据
kpSetMicroState({ doSetState, initialState, antdToken });
//追加响应式函数
setRespApi((pre: any) => ({
...pre,
...respApi,
}))
}, [initialState!.currentUser!, antdToken])
子应用中我采用了callback方式
/**
* 加载
*/
export async function mount(props) {
//1.存储props为全局方便其他地方使用
await store.dispatch('micro/setMicroProps', props);
//事件
const onSettingsChange = (settings) => {
console.log('onSettingsChange settings', settings)
}
const onCurrentUserChange = (currentUser) => {
console.log('onCurrentUserChange currentUser', currentUser)
}
const onAntdTokenChange = (antdToken) => {
console.log('onAntdTokenChange antdToken', antdToken)
}
//2.设置回调函数
props.micro.setState((pre) => ({
...pre,
callback: {
onSettingsChange,
onCurrentUserChange,
onAntdTokenChange,
}
}))
//3.渲染目标页面
render(props);
//4.关闭加载动画
props.setLoading(false)
}
坑3 子应用的路由拦截导致无限循环加载
一般应用都会有路由拦截，判断用户是否登录，访问路径是否合法等。由于主应用传过来的path是属于主应用的路由规则的path，子应用的路由规则不一定和主应用一致，也不应该一致。比如我有2个应用，都有个路由叫/home，这在主应用无法区分，我的做法是每个应用前增加表示该应用的前缀，如:/app1/home
此时，子应用不该存在路由，因为主应用的路由已经可以告诉子应用该加载哪个页面了，直接load即可。
function render(props = {}) {
if (window.__POWERED_BY_QIANKUN__ && props.data.userLayout.component) {
const component = props.data.userLayout.component;
let path = component.replace('@/', './');
import(path + '/index.vue').then((module) => {
const container = module.default;
instance = createApp(MicroLayout);
instance
.use(store)
.use(Antd)
.use(Print)
.mount(props.container ? props.container.querySelector('#root') : '#root');
}).catch((error) => {
console.error('Failed to load component:', error);
});
} else {
instance = createApp(App);
instance
.use(store)
.use(router)
.use(Antd)
.use(Print)
.mount(props.container ? props.container.querySelector('#root') : '#root');
}
}
坑4 子应用使用了antd，主应用也是用antd，子应用弹窗样式丢失
一开始以为是样式冲突问题，在主应用配置了统一前缀config.ts
antd: {
//设置class前缀 避免和微应用冲突
configProvider:{
prefixCls: 'kp-ant',
iconPrefixCls: 'kp-anticon',
}
}
事实上不是这个原因，但是这一步还是有必要的，可以避免antd组件的class冲突。
这里不得不提antd的弹窗会把元素追加到最外层的最下面，直接在qiankun包裹之外，这就是原因。解决方案是指定挂载的容器：
<a-drawer :get-container="$el"
:title="title"
:width="720"
:visible="visible"
:body-style="{ paddingBottom: '80px' }"
@close="onClose"
>...<a-drawer/>
不同的组件写法不同，可以看组件的官方文档
🚀最后
上述列举的都是笔者印象比较深刻的问题，且笔者在处理过程中，这些问题大多无法面向百度解决，至于其他问题一般都可在百度找到答案。
上述所有写法或解决方案，仅为笔者个人摸索出来，不代表权威的解决方案，仅供参考。