介紹
乾坤這個名字取得很大氣，在中國傳統文化中，乾意味着天堂而坤代表地球，所以乾坤是宇宙。乾坤是一個阿里巴巴UMI基於single-spa而對Micro Frontens的實現，但是它更容易應用到開發！
Github
因為是基於single-spa，地址一並給出
https://github.com/CanopyTax/single-spa
https://github.com/umijs/qiankun
微框架
微框架的目標(Micro Frontends)：
使用不同JavaScript框架為多個團隊構建現代Web應用程序的技術，策略和方法。
獨立的開發經驗對於大型系統非常重要，尤其是對於企業應用程序。但是如果你試圖在這樣的系統中實現微前端架構，你通常會因為這些問題而傷害你的腦細胞：如何將你的獨立子應用程序組合到主系統中？如何保證您的子應用程序彼此隔離？因此，我們構建了一個庫來幫助你解決在構建微前端系統時可能遇到的這些故障問題，並將其命名為前端。可能是您遇到的最完整的微前端解決方案！實際上，筆者認為，微前端是將微服務的思想運用到前端的體現！
快速開始
安裝
npm i qiankun -S
范例
npm inpm run install:examplesnpm start
import { registerMicroApps, start } from 'qiankun';function render({ appContent, loading }) { const container = document.getElementById('container'); ReactDOM.render(, container);}function genActiveRule(routerPrefix) { return (location) => location.pathname.startsWith(routerPrefix);}registerMicroApps( [ { name: 'react app', entry: '//localhost:7100', render, activeRule: genActiveRule('/react') }, { name: 'vue app', entry: { scripts: [ '//localhost:7100/main.js' ] }, render, activeRule: genActiveRule('/vue') }, ], { beforeLoad: [async app => { console.log('before load', app); }], beforeMount: [async app => { console.log('before mount', app); }], afterMount: [async app => { console.log('before mount', app); }], afterUnmount: [async app => { console.log('after unload', app); }], },);start({ prefetch: true, jsSandbox: true });
API
注冊
function registerMicroApps(apps: Array>, lifeCycles?: LifeCycles): void;type RegistrableApp = { name: string; // app name entry: string | { scripts?: string[]; styles?: string[]; html?: string }; // app entry render: (props?: { appContent: string, loading: boolean }) => any; activeRule: (location: Location) => boolean; props?: object; // props pass through to app};type Lifecycle = (app: RegistrableApp) => Promise;type LifeCycles = { beforeLoad?: Lifecycle | Array>; beforeMount?: Lifecycle | Array>; afterMount?: Lifecycle | Array>; afterUnmount?: Lifecycle | Array>;};
start
function start({ prefetch: boolean, jsSandbox: boolean }): void;
集成
主框架
使用qiankun api注冊微型應用程序，如上面顯示的示例。
子應用
1、從入口中導出這些生命周期鈎子
export async function bootstrap() { console.log('react app bootstraped');}export async function mount(props) { ReactDOM.render(, document.getElementById('react15Root'));}export async function unmount() { ReactDOM.unmountComponentAtNode(document.getElementById('react15Root'));}
2、配置和打包，提供webpack和parcel的方式
webpack:
output: { library: packageName, libraryTarget: 'umd', jsonpFunction: `webpackJsonp_${packageName}`,}
parcel:
parcel serve entry.js --global myvariable
總結
在以往的文章中介紹過不少阿里的開源框架，不管是哪一個使用人都不少，阿里的前端團隊真的為前端做了很多貢獻，我相信大多數人都用過Antd，特別是國內的React開發者們，阿里提供了很多前端的解決方案，也就相應的為諸多開發者們提供了諸多簡便的開箱即用方案，這點值得我們學習!
————————————————
版權聲明：本文為CSDN博主「weixin_39863161」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_39863161/article/details/111374571