qiankun 是一個基于 single-spa 的微前端實現(xiàn)庫
umi 插件号枕，提供了 @umijs/plugin-qiankun 供 umi 應(yīng)用一鍵切換成微前端架構(gòu)系統(tǒng)亡脑。
搭建主應(yīng)用
yarn create umi
yarn add @umijs/plugin-qiankun -D
注冊qiankun
config.js 添加qiankun配置項
qiankun: {
master: {
// 注冊子應(yīng)用信息
apps: [
{
name: 'app1', // 唯一 id
entry: '//localhost:8081', // html entry
},
],
// jsSandbox: true, // 是否啟用 js 沙箱邀跃，默認為 false
// prefetch: true, // 是否啟用 prefetch 特性蛙紫，默認為 true
},
},
引用子應(yīng)用
- 使用路由的方式
config.js 的 router 配置中添加
{
name: 'app1',
path: '/app1',
microApp: 'app1', // 對應(yīng)上一步注冊中的name
},
- 使用組件的方式
在組件中
import { MicroApp } from 'umi';
export function MyPage() {
return (
<div>
<div>
<MicroApp name="app1" />
</div>
</div>
)
}
搭建子應(yīng)用
yarn create umi
yarn add @umijs/plugin-qiankun -D
注冊qiankun
config.js 添加qiankun配置項
qiankun: {
slave: {}
}
注冊鉤子 src/app.ts
export const qiankun = {
// 應(yīng)用加載之前
async bootstrap(props) {
console.log('app1 bootstrap', props);
},
// 應(yīng)用 render 之前觸發(fā)
async mount(props) {
console.log('app1 mount', props);
},
// 應(yīng)用卸載之后觸發(fā)
async unmount(props) {
console.log('app1 unmount', props);
},
};
排坑
在config.js 中注冊qiankun后運行項目坑傅，觀察到react項目被渲染到了id為root-master/root-slave 的DOM節(jié)點，而非antdpro默認的id為root的DOM節(jié)點唁毒，然而在最新版本的antdpro中，#root節(jié)點已經(jīng)被寫了一些預(yù)設(shè)樣式粉私，如height:100% 近零，會將開啟qiankun后的真正的應(yīng)用試圖“擠”到視窗下方，影響體驗久信。
所以需要將相關(guān)的預(yù)設(shè)樣式清除，需要調(diào)整的地方有src/document.ejs裙士，src/global.less
然后便可以繼續(xù)愉快的玩耍了。
通信
主項目
- 使用路由方式引用的
主項目新建 src/app.ts
// src/app.ts
export function useQiankunStateForSlave() {
const [masterState, setMasterState] = useState({});
return {
masterState,
setMasterState,
}
}
其中state的值可以自己定義桌硫。但是酥诽，由于app.ts 沒有在<Provider> 內(nèi)部皱埠，所以無法通過useSelector和useDispatch來獲取主應(yīng)用model中的值和dispatch方法。
- 使用組件方式引用的
通過props傳值
function MyPage() {
const [name, setName] = useState(null);
return <MicroApp name={name} onNameChange={newName => setName(newName)} />
}
子項目
import { connectMaster } from 'umi';
function MyPage(props) {
return <div>{ JSON.strigify(props) }</div>;
}
export default connectMaster(MyPage);
思考
- 在實際業(yè)務(wù)中训枢，子項目承擔什么角色忘巧？ 一整套應(yīng)用 or 僅展示層？
- 基礎(chǔ)配置如何共享（如鑒權(quán)/用戶信息）
for umi2
使用上個版本的qiankun插件
https://github.com/umijs/umi-plugin-qiankun
