qiankun

介绍

qiankun 是阿里开源的一个微前端的框架，在阿里内部已经经过一批线上应用的充分检验及打磨了，所以可以放心使用。

• 基于 single-spa 封装的，提供了更加开箱即用的 API。
• 技术栈无关，任意技术栈的应用均可使用/接入，不论是 Reactue/Angular/jQuery 还是其他等框架。
• HTML Entry 的方式接入，像使用 iframe 一样简单。
• 实现了 single-spa 不具备的样式隔离和 js 隔离。
• 资源预加载，在浏览器空闲时间预加载未打开的微应用资源，加速微应用打开速度。

常见问题

样式隔离

qiankun 实现了各个子应用之间的样式隔离，但是基座和子应用之间的样式隔离没有实现，所以基座和子应用之前的样式还会有冲突和覆盖的情况。

解决方法:

• 每个应用的样式使用固定的格式。
• 通过 css-module 的方式给每个应用自动加上前缀。

子应用之间跳转

如果是 history 模式，可以通过 window.history.pushState 的方式进行跳转。

window.history.pushState(null, '', '/app2/home')

如果是 hash 模式，可以通过修改 location.hash 的方式进行跳转。

window.location.hash = '#/app2/home'

全局状态管理

基座应用

import { initGlobalState } from 'qiankun'

const initialState = { user: 'zhangsan' }
const actions = initGlobalState(initialState)
actions.onGlobalStateChange((state, prev) => {
  console.log('基座应用监听到全局状态变化:', state, prev)
})

// 修改全局状态
actions.setGlobalState({ user: 'lisi' })

子应用

import { initGlobalState } from 'qiankun'

const actions = initGlobalState()
actions.onGlobalStateChange((state, prev) => {
  console.log('子应用监听到全局状态变化:', state, prev)
})
// 修改全局状态
actions.setGlobalState({ user: 'wangwu' })