介紹
qiankun 是基于 single-spa 做了二次封裝的微前端框架擦酌，通過解決了 single-spa 的一些弊端和不足富蓄，來幫助大家實(shí)現(xiàn)更簡(jiǎn)單像街、無痛的構(gòu)建一個(gè)生產(chǎn)可用的微前端架構(gòu)系統(tǒng)筹裕。
因?yàn)?qiankun 是基于 single-spa 做的二次封裝较鼓，主要解決了 single-spa 的一些痛點(diǎn)和不足椎木，所以最好對(duì) single-spa 有一個(gè)全面的了解和認(rèn)識(shí)，明白其原理博烂、了解它的不足和缺陷拓哺，然后帶著問題和目的去閱讀 qiankun 源碼，可以達(dá)到事半功倍的效果脖母，整個(gè)閱讀過程的思路也會(huì)更加清晰明了士鸥。
qiankun 解決了以下幾個(gè)問題：
- HTML Entry
qiankun 通過 HTML Entry 的方式來解決 JS Entry 帶來的問題，讓你接入微應(yīng)用像使用 iframe 一樣簡(jiǎn)單谆级。 - 樣式隔離
qiankun 實(shí)現(xiàn)了兩種樣式隔離
- 嚴(yán)格的樣式隔離模式烤礁，為每個(gè)微應(yīng)用的容器包裹上一個(gè) shadow dom 節(jié)點(diǎn)讼积，從而確保微應(yīng)用的樣式不會(huì)對(duì)全局造成影響
- 實(shí)驗(yàn)性的方式，通過動(dòng)態(tài)改寫 css 選擇器來實(shí)現(xiàn)脚仔，可以理解為 css scoped 的方式
運(yùn)行時(shí)沙箱
qiankun 的運(yùn)行時(shí)沙箱分為JS沙箱和樣式沙箱
JS 沙箱為每個(gè)微應(yīng)用生成單獨(dú)的window proxy對(duì)象勤众，配合HTML Entry提供的 JS 腳本執(zhí)行器 (execScripts) 來實(shí)現(xiàn) JS 隔離；
樣式沙箱通過重寫DOM操作方法鲤脏，來劫持動(dòng)態(tài)樣式和 JS 腳本的添加们颜，讓樣式和腳本添加到正確的地方，即主應(yīng)用的插入到主應(yīng)用模版內(nèi)猎醇，微應(yīng)用的插入到微應(yīng)用模版窥突，并且為劫持的動(dòng)態(tài)樣式做了scoped css的處理，為劫持的腳本做了 JS 隔離的處理硫嘶，更加具體的內(nèi)容可繼續(xù)往下閱讀或者直接閱讀 微前端專欄 中的qiankun 2.x 運(yùn)行時(shí)沙箱 源碼分析資源預(yù)加載
qiankun 實(shí)現(xiàn)預(yù)加載的思路有兩種阻问，一種是當(dāng)主應(yīng)用執(zhí)行start方法啟動(dòng) qiankun 以后立即去預(yù)加載微應(yīng)用的靜態(tài)資源，另一種是在第一個(gè)微應(yīng)用掛載以后預(yù)加載其它微應(yīng)用的靜態(tài)資源沦疾，這個(gè)是利用 single-spa 提供的single-spa:first-mount事件來實(shí)現(xiàn)的應(yīng)用間通信
qiankun 通過發(fā)布訂閱模式來實(shí)現(xiàn)應(yīng)用間通信称近，狀態(tài)由框架來統(tǒng)一維護(hù)，每個(gè)應(yīng)用在初始化時(shí)由框架生成一套通信方法哮塞，應(yīng)用通過這些方法來更改全局狀態(tài)和注冊(cè)回調(diào)函數(shù)刨秆，全局狀態(tài)發(fā)生改變時(shí)觸發(fā)各個(gè)應(yīng)用注冊(cè)的回調(diào)函數(shù)執(zhí)行，將新舊狀態(tài)傳遞到所有應(yīng)用
框架目錄結(jié)構(gòu)
從 github 克隆項(xiàng)目以后忆畅，執(zhí)行一下命令：
安裝
qiankun框架所需的包
yarn install安裝示例項(xiàng)目的包
yarn examples:install
以上命令執(zhí)行結(jié)束以后：
npm-run-all
一個(gè) CLI 工具衡未，用于并行或順序執(zhí)行多個(gè) npm 腳本father-build
基于 rollup 的庫構(gòu)建工具，father 更加強(qiáng)大多項(xiàng)目的目錄組織以及 scripts 部分的編寫
main 和 module 字段
標(biāo)識(shí)組件庫的入口邻眷，當(dāng)兩者同時(shí)存在時(shí)眠屎，module 字段的優(yōu)先級(jí)高于 main
示例項(xiàng)目中的主應(yīng)用
這里需要更改一下示例項(xiàng)目中主應(yīng)用的 webpack 配置
{
...
devServer: {
// 從 package.json 中可以看出剔交，啟動(dòng)示例項(xiàng)目時(shí)肆饶，主應(yīng)用執(zhí)行了兩條命令，其實(shí)就是啟動(dòng)了兩個(gè)主應(yīng)用岖常，但是卻只配置了一個(gè)端口驯镊，瀏覽器打開 localhost:7099 和你預(yù)想的有一些出入，這時(shí)顯示的是 loadMicroApp(手動(dòng)加載微應(yīng)用) 方式的主應(yīng)用竭鞍，基于路由配置的主應(yīng)用沒起來板惑，因?yàn)槎丝诒徽加昧? // port: '7099'
// 這樣配置，手動(dòng)加載微應(yīng)用的主應(yīng)用在 7099 端口偎快，基于路由配置的主應(yīng)用在 7088 端口
port: process.env.MODE === 'multiple' ? '7099' : '7088'
}
...
}
啟動(dòng)示例項(xiàng)目
yarn examples:start
示例項(xiàng)目
官方為我們準(zhǔn)備了兩種主應(yīng)用的實(shí)現(xiàn)方式冯乘，五種微應(yīng)用的接入示例，覆蓋面可以說是比較廣了晒夹，足以滿足大家的普遍需要了
主應(yīng)用
主應(yīng)用在 examples/main 目錄下裆馒，提供了兩種實(shí)現(xiàn)方式姊氓，基于路由配置的 registerMicroApps 和 手動(dòng)加載微應(yīng)用的 loadMicroApp。主應(yīng)用很簡(jiǎn)單喷好，就是一個(gè)從 0 通過 webpack 配置的一個(gè)同時(shí)支持 react 和 vue 的項(xiàng)目翔横，至于為什么同時(shí)支持 react 和 vue，繼續(xù)往下看
webpack.config.js
就是一個(gè)普通的 webpack 配置梗搅，配置了一個(gè)開發(fā)服務(wù)器 devServer禾唁、兩個(gè) loader (babel-loader、css loader)无切、一個(gè)插件 HtmlWebpackPlugin (告訴 webpack html 模版文件是哪個(gè))
通過 webpack 配置文件的 entry 字段得知入口文件分別為 index.js 和 multiple.js
基于路由配置
通用將微應(yīng)用關(guān)聯(lián)到一些 url 規(guī)則的方式荡短，實(shí)現(xiàn)當(dāng)瀏覽器 url 發(fā)生變化時(shí)，自動(dòng)加載相應(yīng)的微應(yīng)用的功能
