當學習成為了習慣，知識也就變成了常識。 感謝各位的 點贊、收藏和評論。
新視頻和文章會第一時間在微信公眾號發送，歡迎關注：李永寧lyn
文章已收錄到 github 倉庫 liyongning/blog，歡迎 Watch 和 Star。
簡介
從 single-spa 的缺陷講起 -> qiankun 是如何從框架層面解決 single-spa 存在的問題 -> qiankun 源碼解讀，帶你全方位刨析 qiankun 框架。
介紹
qiankun 是基于 single-spa 做了二次封裝的微前端框架，通過解決了 single-spa 的一些弊端和不足，來幫助大家實現更簡單、無痛的構建一個生產可用的微前端架構系統。
微前端框架 之 single-spa 從入門到精通 通過從 基本使用 -> 部署 -> 框架源碼分析 -> 手寫框架，帶你全方位刨析 single-spa 框架。
因為 qiankun 是基于 single-spa 做的二次封裝，主要解決了 single-spa 的一些痛點和不足，所以最好對 single-spa 有一個全面的了解和認識，明白其原理、了解它的不足和缺陷，然后帶著問題和目的去閱讀 qiankun 源碼，可以達到事半功倍的效果，整個閱讀過程的思路也會更加清晰明了。
為什么不是 single-spa
如果你很了解 single-spa 或者閱讀過 微前端框架 之 single-spa 從入門到精通 ，你會發現 single-spa 就做了兩件事，加載微應用（加載方法還是用戶自己提供的）、維護微應用狀態（初始化、掛載、卸載）。了解多了會發現 single-spa 雖好，但是卻存在一些比較嚴重的問題
-
對微應用的侵入性太強
single-spa 采用 JS Entry 的方式接入微應用。微應用改造一般分為三步：
- 微應用路由改造，添加一個特定的前綴
- 微應用入口改造，掛載點變更和生命周期函數導出
- 打包工具配置更改
侵入型強其實說的就是第三點，更改打包工具的配置，使用 single-spa 接入微應用需要將微應用整個打包成一個 JS 文件，發布到靜態資源服務器，然后在主應用中配置該 JS 文件的地址告訴 single-spa 去這個地址加載微應用。
不說其它的，就現在這個改動就存在很大的問題，將整個微應用打包成一個 JS 文件，常見的打包優化基本上都沒了，比如：按需加載、首屏資源加載優化、css 獨立打包等優化措施。
項目發布以后出現了 bug ，修復之后需要更新上線，為了清除瀏覽器緩存帶來的影響，一般文件名會帶上 chunkcontent，微應用發布之后文件名都會發生變化，這時候還需要更新主應用中微應用配置，然后重新編譯主應用然后發布，這套操作簡直是不能忍受的，這也是 微前端框架 之 single-spa 從入門到精通 這篇文章中示例項目中微應用發布時的環境配置選擇 development 的原因。
-
樣式隔離問題
single-spa 沒有做這部分的工作。一個大型的系統會有很的微應用組成，怎么保證這些微應用之間的樣式互不影響？微應用和主應用之間的樣式互不影響？這時只能通過約定命名規范來實現，比如應用樣式以自己的應用名稱開頭，以應用名構造一個獨立的命名空間，這個方式新系統還好說，如果是一個已有的系統，這個改造工作量可不小。
-
JS 隔離
這部分工作 single-spa 也沒有做。 JS 全局對象污染是一個很常見的現象，比如：微應用 A 在全局對象上添加了一個自己特有的屬性，
window.A，這時候切換到微應用 B，這時候如何保證window對象是干凈的呢？ -
資源預加載
這部分的工作 single-spa 更沒做了，畢竟將微應用整個打包成一個 js 文件。現在有個需求，比如為了提高系統的用戶體驗，在第一個微應用掛載完成后，需要讓瀏覽器在后臺悄悄的加載其它微應用的靜態資源，這個怎么實現呢？
-
應用間通信
這部分工作 single-spa 沒做，它只在注冊微應用時給微應用注入一些狀態信息，后續就不管了，沒有任何通信的手段，只能用戶自己去實現
以上 5 個問題中第 2、3、5 還好說，可以通過一些方式來解決，比如采用命名空間的方式解決樣式隔離問題， 通過備份全局對象，每次微應用切換時初始化全局對象的方式來解決 JS 隔離的問題，通信問題可以通過傳遞一些通信方法，這點依賴了 JS 對象本身的特性（傳遞的是引用）來實現；但是第一個和第四個就不好解決了，這是 JS Entry 方式帶來的問題，要解決這個問題，難度相對就會大很多，工作量也會更大。況且這些通用的臟活累活就不應該由用戶（框架使用者）來解決，而是由框架來解決。
為什么是 qiankun
上面說到，通用的臟活累活應該在框架層面去做，qiankun 基于 single-spa 做了二次封裝，很好的解決了上面提到的幾個問題。
-
HTML Entry
qiankun 通過 HTML Entry 的方式來解決 JS Entry 帶來的問題，讓你接入微應用像使用 iframe 一樣簡單。
-
樣式隔離
qiankun 實現了兩種樣式隔離
- 嚴格的樣式隔離模式，為每個微應用的容器包裹上一個
shadow dom節點，從而確保微應用的樣式不會對全局造成影響 - 實驗性的方式，通過動態改寫
css選擇器來實現，可以理解為css scoped的方式
- 嚴格的樣式隔離模式，為每個微應用的容器包裹上一個
-
**運行時沙箱 **
qiankun 的運行時沙箱分為
JS沙箱和樣式沙箱JS 沙箱為每個微應用生成單獨的window proxy對象，配合HTML Entry提供的 JS 腳本執行器 (execScripts) 來實現 JS 隔離；樣式沙箱通過重寫DOM操作方法，來劫持動態樣式和 JS 腳本的添加，讓樣式和腳本添加到正確的地方，即主應用的插入到主應用模版內，微應用的插入到微應用模版，并且為劫持的動態樣式做了scoped css的處理，為劫持的腳本做了 JS 隔離的處理，更加具體的內容可繼續往下閱讀或者直接閱讀 微前端專欄 中的qiankun 2.x 運行時沙箱 源碼分析 -
資源預加載
qiankun 實現預加載的思路有兩種，一種是當主應用執行
start方法啟動 qiankun 以后立即去預加載微應用的靜態資源，另一種是在第一個微應用掛載以后預加載其它微應用的靜態資源，這個是利用 single-spa 提供的single-spa:first-mount事件來實現的 -
應用間通信
qiankun 通過發布訂閱模式來實現應用間通信，狀態由框架來統一維護，每個應用在初始化時由框架生成一套通信方法，應用通過這些方法來更改全局狀態和注冊回調函數，全局狀態發生改變時觸發各個應用注冊的回調函數執行，將新舊狀態傳遞到所有應用
說明
文章基于 qiankun 2.0.26 版本做了完整的源碼分析，目前網上好像還沒有 qiankun 2.x 版本的完整源碼分析，簡單搜了下好像都是 1.x 版本的
由于框架代碼比較多的，博客有字數限制，所以將全部內容拆成了三篇文章，每一篇都可獨立閱讀：
-
微前端框架 之 qiankun 從入門到精通
，文章由以下三部分組成
-
為什么不是 single-spa，詳細介紹了 single-spa 存在的問題 -
為什么是 qiankun，詳細介紹了 qiankun 是怎么從框架層面解決 single-spa 存在的問題的 -
源碼解讀，完整解讀了 qiankun 2.x 版本的源碼
-
qiankun 2.x 運行時沙箱 源碼分析，詳細解讀了 qiankun 2.x 版本的沙箱實現
HTML Entry 源碼分析，詳細解讀了 HTML Entry 的原理以及在 qiankun 中的應用
源碼解讀
這里沒有單獨編寫示例代碼，因為 qiankun 源碼中提供了完整的示例項目，這也是 qiankun 做的很好的一個地方，提供完整的示例，避免大家在使用時重復踩坑。
微前端實現和改造時面臨的第一個困難就是主應用的設置、微應用的接入，single-spa 官方沒有提供一個很好的示例項目，所以大家在使用 single-spa 接入微應用時還是需要踩不少坑的，甚至有些問題需要去閱讀源碼才能解決
框架目錄結構
從 github 克隆項目以后，執行一下命令：
-
安裝
qiankun框架所需的包yarn install -
安裝示例項目的包
yarn examples:install
以上命令執行結束以后：
image-20220202220056482
有料的 package.json
-
一個 CLI 工具，用于并行或順序執行多個 npm 腳本
-
基于 rollup 的庫構建工具，father 更加強大
多項目的目錄組織以及 scripts 部分的編寫
-
main 和 module 字段
標識組件庫的入口，當兩者同時存在時，module 字段的優先級高于 main
示例項目中的主應用
這里需要更改一下示例項目中主應用的 webpack 配置
{
...
devServer: {
// 從 package.json 中可以看出，啟動示例項目時，主應用執行了兩條命令，其實就是啟動了兩個主應用，但是卻只配置了一個端口，瀏覽器打開 localhost:7099 和你預想的有一些出入，這時顯示的是 loadMicroApp(手動加載微應用) 方式的主應用，基于路由配置的主應用沒起來，因為端口被占用了
// port: '7099'
// 這樣配置，手動加載微應用的主應用在 7099 端口，基于路由配置的主應用在 7088 端口
port: process.env.MODE === 'multiple' ? '7099' : '7088'
}
...
}
啟動示例項目
yarn examples:start
命令執行結束以后，訪問 localhost:7099 和 localhost:7088 兩個地址，可以看到如下內容：
image-20220202220258551
image-20220202220401608
到這一步，就證明項目正式跑起來了，所有準備工作就緒
示例項目
官方為我們準備了兩種主應用的實現方式，五種微應用的接入示例，覆蓋面可以說是比較廣了，足以滿足大家的普遍需要了
主應用
主應用在 examples/main 目錄下，提供了兩種實現方式，基于路由配置的 registerMicroApps 和 手動加載微應用的 loadMicroApp。主應用很簡單，就是一個從 0 通過 webpack 配置的一個同時支持 react 和 vue 的項目，至于為什么同時支持 react 和 vue，繼續往下看
webpack.config.js
就是一個普通的 webpack 配置，配置了一個開發服務器 devServer、兩個 loader (babel-loader、css loader)、一個插件 HtmlWebpackPlugin (告訴 webpack html 模版文件是哪個)
通過 webpack 配置文件的 entry 字段得知入口文件分別為 index.js 和 multiple.js
基于路由配置
通用將微應用關聯到一些 url 規則的方式，實現當瀏覽器 url 發生變化時，自動加載相應的微應用的功能
index.js
// qiankun api 引入
import { registerMicroApps, runAfterFirstMounted, setDefaultMountApp, start, initGlobalState } from '../../es';
// 全局樣式
import './index.less';
// 專門針對 angular 微應用引入的一個庫
import 'zone.js';
/**
* 主應用可以使用任何技術棧，這里提供了 react 和 vue 兩種，可以隨意切換
* 最終都導出了一個 render 函數，負責渲染主應用
*/
// import render from './render/ReactRender';
import render from './render/VueRender';
// 初始化主應用，其實就是渲染主應用
render({ loading: true });
// 定義 loader 函數，切換微應用時由 qiankun 框架負責調用顯示一個 loading 狀態
const loader = loading => render({ loading });
// 注冊微應用
registerMicroApps(
// 微應用配置列表
[
{
// 應用名稱
name: 'react16',
// 應用的入口地址
entry: '//localhost:7100',
// 應用的掛載點，這個掛載點在上面渲染函數中的模版里面提供的
container: '#subapp-viewport',
// 微應用切換時調用的方法，顯示一個 loading 狀態
loader,
// 當路由前綴為 /react16 時激活當前應用
activeRule: '/react16',
},
{
name: 'react15',
entry: '//localhost:7102',
container: '#subapp-viewport',
loader,
activeRule: '/react15',
},
{
name: 'vue',
entry: '//localhost:7101',
container: '#subapp-viewport',
loader,
activeRule: '/vue',
},
{
name: 'angular9',
entry: '//localhost:7103',
container: '#subapp-viewport',
loader,
activeRule: '/angular9',
},
{
name: 'purehtml',
entry: '//localhost:7104',
container: '#subapp-viewport',
loader,
activeRule: '/purehtml',
},
],
// 全局生命周期鉤子，切換微應用時框架負責調用
{
beforeLoad: [
app => {
// 這個打印日志的方法可以學習一下，第三個參數會替換掉第一個參數中的 %c%s，并且第三個參數的顏色由第二個參數決定
console.log('[LifeCycle] before load %c%s', 'color: green;', app.name);
},
],
beforeMount: [
app => {
console.log('[LifeCycle] before mount %c%s', 'color: green;', app.name);
},
],
afterUnmount: [
app => {
console.log('[LifeCycle] after unmount %c%s', 'color: green;', app.name);
},
],
},
);
// 定義全局狀態，并返回兩個通信方法
const { onGlobalStateChange, setGlobalState } = initGlobalState({
user: 'qiankun',
});
// 監聽全局狀態的更改，當狀態發生改變時執行回調函數
onGlobalStateChange((value, prev) => console.log('[onGlobalStateChange - master]:', value, prev));
// 設置新的全局狀態，只能設置一級屬性，微應用只能修改已存在的一級屬性
setGlobalState({
ignore: 'master',
user: {
name: 'master',
},
});
// 設置默認進入的子應用，當主應用啟動以后默認進入指定微應用
setDefaultMountApp('/react16');
// 啟動應用
start();
// 當第一個微應用掛載以后，執行回調函數，在這里可以做一些特殊的事情，比如開啟一監控或者買點腳本
runAfterFirstMounted(() => {
console.log('[MainApp] first app mounted');
});
VueRender.js
/**
* 導出一個由 vue 實現的渲染函數，渲染了一個模版，模版里面包含一個 loading 狀態節點和微應用容器節點
*/
import Vue from 'vue/dist/vue.esm';
// 返回一個 vue 實例
function vueRender({ loading }) {
return new Vue({
template: `
<div id="subapp-container">
<h4 v-if="loading" class="subapp-loading">Loading...</h4>
<div id="subapp-viewport"></div>
</div>
`,
el: '#subapp-container',
data() {
return {
loading,
};
},
});
}
// vue 實例
let app = null;
// 渲染函數
export default function render({ loading }) {
// 單例，如果 vue 實例不存在則實例化主應用，存在則說明主應用已經渲染，需要更新主營應用的 loading 狀態
if (!app) {
app = vueRender({ loading });
} else {
app.loading = loading;
}
}
ReactRender.js
/**
* 同 vue 實現的渲染函數，這里通過 react 實現了一個一樣的渲染函數
*/
import React from 'react';
import ReactDOM from 'react-dom';
// 渲染主應用
function Render(props) {
const { loading } = props;
return (
<>
{loading && <h4 className="subapp-loading">Loading...</h4>}
<div id="subapp-viewport" />
</>
);
}
// 將主應用渲染到指定節點下
export default function render({ loading }) {
const container = document.getElementById('subapp-container');
ReactDOM.render(<Render loading={loading} />, container);
}
手動加載微應用
通常這種場景下的微應用是一個不帶路由的可獨立運行的業務組件，這種使用方式的情況比較少見
multiple.js
/**
* 調用 loadMicroApp 方法注冊了兩個微應用
*/
import { loadMicroApp } from '../../es';
const app1 = loadMicroApp(
// 應用配置，名稱、入口地址、容器節點
{ name: 'react15', entry: '//localhost:7102', container: '#react15' },
// 可以添加一些其它的配置，比如：沙箱、樣式隔離等
{
sandbox: {
// strictStyleIsolation: true,
},
},
);
const app2 = loadMicroApp(
{ name: 'vue', entry: '//localhost:7101', container: '#vue' },
{
sandbox: {
// strictStyleIsolation: true,
},
},
);
vue
vue 微應用在 examples/vue 目錄下，就是一個通過 vue-cli 創建的 vue demo 應用，然后對 vue.config.js 和 main.js 做了一些更改
vue.config.js
一個普通的 webpack 配置，需要注意的地方就三點
{
...
// publicPath 沒在這里設置，是通過 webpack 提供的全局變量 __webpack_public_path__ 來即時設置的，webpackjs.com/guides/public-path/
devServer: {
...
// 設置跨域，因為主應用需要通過 fetch 去獲取微應用引入的靜態資源的，所以必須要求這些靜態資源支持跨域
headers: {
'Access-Control-Allow-Origin': '*',
},
},
output: {
// 把子應用打包成 umd 庫格式
library: `${name}-[name]`, // 庫名稱，唯一
libraryTarget: 'umd',
jsonpFunction: `webpackJsonp_${name}`,
}
...
}
main.js
// 動態設置 __webpack_public_path__
import './public-path';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';
// 路由配置
import routes from './router';
import store from './store';
Vue.config.productionTip = false;
Vue.use(ElementUI);
let router = null;
let instance = null;
// 應用渲染函數
function render(props = {}) {
const { container } = props;
// 實例化 router，根據應用運行環境設置路由前綴
router = new VueRouter({
// 作為微應用運行，則設置 /vue 為前綴，否則設置 /
base: window.__POWERED_BY_QIANKUN__ ? '/vue' : '/',
mode: 'history',
routes,
});
// 實例化 vue 實例
instance = new Vue({
router,
store,
render: h => h(App),
}).$mount(container ? container.querySelector('#app') : '#app');
}
// 支持應用獨立運行
if (!window.__POWERED_BY_QIANKUN__) {
render();
}
/**
* 從 props 中獲取通信方法，監聽全局狀態的更改和設置全局狀態，只能操作一級屬性
* @param {*} props
*/
function storeTest(props) {
props.onGlobalStateChange &&
props.onGlobalStateChange(
(value, prev) => console.log(`[onGlobalStateChange - ${props.name}]:`, value, prev),
true,
);
props.setGlobalState &&
props.setGlobalState({
ignore: props.name,
user: {
name: props.name,
},
});
}
/**
* 導出的三個生命周期函數
*/
// 初始化
export async function bootstrap() {
console.log('[vue] vue app bootstraped');
}
// 掛載微應用
export async function mount(props) {
console.log('[vue] props from main framework', props);
storeTest(props);
render(props);
}
// 卸載、銷毀微應用
export async function unmount() {
instance.$destroy();
instance.$el.innerHTML = '';
instance = null;
router = null;
}
public-path.js
/**
* 在入口文件中使用 ES6 模塊導入，則在導入后對 __webpack_public_path__ 進行賦值。
* 在這種情況下，必須將公共路徑(public path)賦值移至專屬模塊，然后將其在最前面導入
*/
// qiankun 設置的全局變量，表示應用作為微應用在運行
if (window.__POWERED_BY_QIANKUN__) {
// eslint-disable-next-line no-undef
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
jQuery
這是一個使用了 jQuery 的項目，在 examples/purehtml 目錄下，展示了如何接入使用 jQuery 開發的應用
package.json
為了達到演示效果，使用 http-server 在起了一個本地服務器，并且支持跨域
{
...
"scripts": {
"start": "cross-env PORT=7104 http-server . --cors",
"test": "echo \"Error: no test specified\" && exit 1"
},
...
}
entry.js
// 渲染函數
const render = $ => {
$('#purehtml-container').html('Hello, render with jQuery');
return Promise.resolve();
};
// 在全局對象上導出三個生命周期函數
(global => {
global['purehtml'] = {
bootstrap: () => {
console.log('purehtml bootstrap');
return Promise.resolve();
},
mount: () => {
console.log('purehtml mount');
// 調用渲染函數
return render($);
},
unmount: () => {
console.log('purehtml unmount');
return Promise.resolve();
},
};
})(window);
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Purehtml Example</title>
<script src="http://cdn.bootcss.com/jquery/3.4.1/jquery.min.js">
</script>
</head>
<body>
<div style="display: flex; justify-content: center; align-items: center; height: 200px;">
Purehtml Example
</div>
<div id="purehtml-container" style="text-align:center"></div>
<!-- 引入 entry.js，相當于 vue 項目的 publicPath 配置 -->
<script src="http://localhost:7104/entry.js" entry></script>
</body>
</html>
angular 9、react 15、react 16
這三個實例項目就不一一分析了，和 vue 項目類似，都是配置打包工具將微應用打包成一個 umd 格式，然后配置應用入口文件 和 路由前綴
小結
好了，讀到這里，系統改造（可以開始干活了）基本上就已經可以順利進行了，從主應用的開發到微應用接入，應該是不會有什么問題了。
當然如果你想繼續深入了解，比如：
- 上面用到那些 API 的原理是什么？
- qiankun 是怎么解決我們之前提到的 single-spa 未解決的問題的？
- ...
接下來就帶著我們的疑問和目的去全面深入的了解 qiankun 框架的內部實現
框架源碼
整個框架的源碼目錄是 src，入口文件是 src/index.ts
入口 src/index.ts
/**
* 在示例或者官網提到的所有 API 都在這里統一導出
*/
// 最關鍵的三個，手動加載微應用、基于路由配置、啟動 qiankun
export { loadMicroApp, registerMicroApps, start } from './apis';
// 全局狀態
export { initGlobalState } from './globalState';
// 全局的未捕獲異常處理器
export * from './errorHandler';
// setDefaultMountApp 設置主應用啟動后默認進入哪個微應用、runAfterFirstMounted 設置當第一個微應用掛載以后需要調用的一些方法
export * from './effects';
// 類型定義
export * from './interfaces';
// prefetch
export { prefetchImmediately as prefetchApps } from './prefetch';
registerMicroApps
/**
* 注冊微應用，基于路由配置
* @param apps = [
* {
* name: 'react16',
* entry: '//localhost:7100',
* container: '#subapp-viewport',
* loader,
* activeRule: '/react16'
* },
* ...
* ]
* @param lifeCycles = { ...各個生命周期方法對象 }
*/
export function registerMicroApps<T extends object = {}>(
apps: Array<RegistrableApp<T>>,
lifeCycles?: FrameworkLifeCycles<T>,
) {
// 防止微應用重復注冊，得到所有沒有被注冊的微應用列表
const unregisteredApps = apps.filter(app => !microApps.some(registeredApp => registeredApp.name === app.name));
// 所有的微應用 = 已注冊 + 未注冊的(將要被注冊的)
microApps = [...microApps, ...unregisteredApps];
// 注冊每一個微應用
unregisteredApps.forEach(app => {
// 注冊時提供的微應用基本信息
const { name, activeRule, loader = noop, props, ...appConfig } = app;
// 調用 single-spa 的 registerApplication 方法注冊微應用
registerApplication({
// 微應用名稱
name,
// 微應用的加載方法，Promise<生命周期方法組成的對象>
app: async () => {
// 加載微應用時主應用顯示 loading 狀態
loader(true);
// 這句可以忽略，目的是在 single-spa 執行這個加載方法時讓出線程，讓其它微應用的加載方法都開始執行
await frameworkStartedDefer.promise;
// 核心、精髓、難點所在，負責加載微應用，然后一大堆處理，返回 bootstrap、mount、unmount、update 這個幾個生命周期
const { mount, ...otherMicroAppConfigs } = await loadApp(
// 微應用的配置信息
{ name, props, ...appConfig },
// start 方法執行時設置的配置對象
frameworkConfiguration,
// 注冊微應用時提供的全局生命周期對象
lifeCycles,
);
return {
mount: [async () => loader(true), ...toArray(mount), async () => loader(false)],
...otherMicroAppConfigs,
};
},
// 微應用的激活條件
activeWhen: activeRule,
// 傳遞給微應用的 props
customProps: props,
});
});
}
start
/**
* 啟動 qiankun
* @param opts start 方法的配置對象
*/
export function start(opts: FrameworkConfiguration = {}) {
// qiankun 框架默認開啟預加載、單例模式、樣式沙箱
frameworkConfiguration = { prefetch: true, singular: true, sandbox: true, ...opts };
// 從這里可以看出 start 方法支持的參數不止官網文檔說的那些，比如 urlRerouteOnly，這個是 single-spa 的 start 方法支持的
const { prefetch, sandbox, singular, urlRerouteOnly, ...importEntryOpts } = frameworkConfiguration;
// 預加載
if (prefetch) {
// 執行預加載策略，參數分別為微應用列表、預加載策略、{ fetch、getPublicPath、getTemplate }
doPrefetchStrategy(microApps, prefetch, importEntryOpts);
}
// 樣式沙箱
if (sandbox) {
if (!window.Proxy) {
console.warn('[qiankun] Miss window.Proxy, proxySandbox will degenerate into snapshotSandbox');
// 快照沙箱不支持非 singular 模式
if (!singular) {
console.error('[qiankun] singular is forced to be true when sandbox enable but proxySandbox unavailable');
// 如果開啟沙箱，會強制使用單例模式
frameworkConfiguration.singular = true;
}
}
}
// 執行 single-spa 的 start 方法，啟動 single-spa
startSingleSpa({ urlRerouteOnly });
frameworkStartedDefer.resolve();
}
預加載 - doPrefetchStrategy
/**
* 執行預加載策略，qiankun 支持四種
* @param apps 所有的微應用
* @param prefetchStrategy 預加載策略，四種 =》
* 1、true，第一個微應用掛載以后加載其它微應用的靜態資源，利用的是 single-spa 提供的 single-spa:first-mount 事件來實現的
* 2、string[]，微應用名稱數組，在第一個微應用掛載以后加載指定的微應用的靜態資源
* 3、all，主應用執行 start 以后就直接開始預加載所有微應用的靜態資源
* 4、自定義函數，返回兩個微應用組成的數組，一個是關鍵微應用組成的數組，需要馬上就執行預加載的微應用，一個是普通的微應用組成的數組，在第一個微應用掛載以后預加載這些微應用的靜態資源
* @param importEntryOpts = { fetch, getPublicPath, getTemplate }
*/
export function doPrefetchStrategy(
apps: AppMetadata[],
prefetchStrategy: PrefetchStrategy,
importEntryOpts?: ImportEntryOpts,
) {
// 定義函數，函數接收一個微應用名稱組成的數組，然后從微應用列表中返回這些名稱所對應的微應用，最后得到一個數組[{name, entry}, ...]
const appsName2Apps = (names: string[]): AppMetadata[] => apps.filter(app => names.includes(app.name));
if (Array.isArray(prefetchStrategy)) {
// 說明加載策略是一個數組，當第一個微應用掛載之后開始加載數組內由用戶指定的微應用資源，數組內的每一項表示一個微應用的名稱
prefetchAfterFirstMounted(appsName2Apps(prefetchStrategy as string[]), importEntryOpts);
} else if (isFunction(prefetchStrategy)) {
// 加載策略是一個自定義的函數，可完全自定義應用資源的加載時機（首屏應用、次屏應用)
(async () => {
// critical rendering apps would be prefetch as earlier as possible，關鍵的應用程序應該盡可能早的預取
// 執行加載策略函數，函數會返回兩個數組，一個關鍵的應用程序數組，會立即執行預加載動作，另一個是在第一個微應用掛載以后執行微應用靜態資源的預加載
const { criticalAppNames = [], minorAppsName = [] } = await prefetchStrategy(apps);
// 立即預加載這些關鍵微應用程序的靜態資源
prefetchImmediately(appsName2Apps(criticalAppNames), importEntryOpts);
// 當第一個微應用掛載以后預加載這些微應用的靜態資源
prefetchAfterFirstMounted(appsName2Apps(minorAppsName), importEntryOpts);
})();
} else {
// 加載策略是默認的 true 或者 all
switch (prefetchStrategy) {
case true:
// 第一個微應用掛載之后開始加載其它微應用的靜態資源
prefetchAfterFirstMounted(apps, importEntryOpts);
break;
case 'all':
// 在主應用執行 start 以后就開始加載所有微應用的靜態資源
prefetchImmediately(apps, importEntryOpts);
break;
default:
break;
}
}
}
// 判斷是否為弱網環境
const isSlowNetwork = navigator.connection
? navigator.connection.saveData ||
(navigator.connection.type !== 'wifi' &&
navigator.connection.type !== 'ethernet' &&
/(2|3)g/.test(navigator.connection.effectiveType))
: false;
/**
* prefetch assets, do nothing while in mobile network
* 預加載靜態資源，在移動網絡下什么都不做
* @param entry
* @param opts
*/
function prefetch(entry: Entry, opts?: ImportEntryOpts): void {
// 弱網環境下不執行預加載
if (!navigator.onLine || isSlowNetwork) {
// Don't prefetch if in a slow network or offline
return;
}
// 通過時間切片的方式去加載靜態資源，在瀏覽器空閑時去執行回調函數，避免瀏覽器卡頓
requestIdleCallback(async () => {
// 得到加載靜態資源的函數
const { getExternalScripts, getExternalStyleSheets } = await importEntry(entry, opts);
// 樣式
requestIdleCallback(getExternalStyleSheets);
// js 腳本
requestIdleCallback(getExternalScripts);
});
}
/**
* 在第一個微應用掛載之后開始加載 apps 中指定的微應用的靜態資源
* 通過監聽 single-spa 提供的 single-spa:first-mount 事件來實現，該事件在第一個微應用掛載以后會被觸發
* @param apps 需要被預加載靜態資源的微應用列表，[{ name, entry }, ...]
* @param opts = { fetch , getPublicPath, getTemplate }
*/
function prefetchAfterFirstMounted(apps: AppMetadata[], opts?: ImportEntryOpts): void {
// 監聽 single-spa:first-mount 事件
window.addEventListener('single-spa:first-mount', function listener() {
// 已掛載的微應用
const mountedApps = getMountedApps();
// 從預加載的微應用列表中過濾出未掛載的微應用
const notMountedApps = apps.filter(app => mountedApps.indexOf(app.name) === -1);
// 開發環境打印日志，已掛載的微應用和未掛載的微應用分別有哪些
if (process.env.NODE_ENV === 'development') {
console.log(`[qiankun] prefetch starting after ${mountedApps} mounted...`, notMountedApps);
}
// 循環加載微應用的靜態資源
notMountedApps.forEach(({ entry }) => prefetch(entry, opts));
// 移除 single-spa:first-mount 事件
window.removeEventListener('single-spa:first-mount', listener);
});
}
/**
* 在執行 start 啟動 qiankun 之后立即預加載所有微應用的靜態資源
* @param apps 需要被預加載靜態資源的微應用列表，[{ name, entry }, ...]
* @param opts = { fetch , getPublicPath, getTemplate }
*/
export function prefetchImmediately(apps: AppMetadata[], opts?: ImportEntryOpts): void {
// 開發環境打印日志
if (process.env.NODE_ENV === 'development') {
console.log('[qiankun] prefetch starting for apps...', apps);
}
// 加載所有微應用的靜態資源
apps.forEach(({ entry }) => prefetch(entry, opts));
}
應用間通信 initGlobalState
// 觸發全局監聽，執行所有應用注冊的回調函數
function emitGlobal(state: Record<string, any>, prevState: Record<string, any>) {
// 循環遍歷，執行所有應用注冊的回調函數
Object.keys(deps).forEach((id: string) => {
if (deps[id] instanceof Function) {
deps[id](cloneDeep(state), cloneDeep(prevState));
}
});
}
/**
* 定義全局狀態，并返回通信方法，一般由主應用調用，微應用通過 props 獲取通信方法。
* @param state 全局狀態，{ key: value }
*/
export function initGlobalState(state: Record<string, any> = {}) {
if (state === globalState) {
console.warn('[qiankun] state has not changed！');
} else {
// 方法有可能被重復調用，將已有的全局狀態克隆一份，為空則是第一次調用 initGlobalState 方法，不為空則非第一次次調用
const prevGlobalState = cloneDeep(globalState);
// 將傳遞的狀態克隆一份賦值為 globalState
globalState = cloneDeep(state);
// 觸發全局監聽，當然在這個位置調用，正常情況下沒啥反應，因為現在還沒有應用注冊回調函數
emitGlobal(globalState, prevGlobalState);
}
// 返回通信方法，參數表示應用 id，true 表示自己是主應用調用
return getMicroAppStateActions(`global-${+new Date()}`, true);
}
/**
* 返回通信方法
* @param id 應用 id
* @param isMaster 表明調用的應用是否為主應用，在主應用初始化全局狀態時，initGlobalState 內部調用該方法時會傳遞 true，其它都為 false
*/
export function getMicroAppStateActions(id: string, isMaster?: boolean): MicroAppStateActions {
return {
/**
* 全局依賴監聽，為指定應用（id = 應用id）注冊回調函數
* 依賴數據結構為：
* {
* {id}: callback
* }
*
* @param callback 注冊的回調函數
* @param fireImmediately 是否立即執行回調
*/
onGlobalStateChange(callback: OnGlobalStateChangeCallback, fireImmediately?: boolean) {
// 回調函數必須為 function
if (!(callback instanceof Function)) {
console.error('[qiankun] callback must be function!');
return;
}
// 如果回調函數已經存在，重復注冊時給出覆蓋提示信息
if (deps[id]) {
console.warn(`[qiankun] '${id}' global listener already exists before this, new listener will overwrite it.`);
}
// id 為一個應用 id，一個應用對應一個回調
deps[id] = callback;
// 克隆全局狀態
const cloneState = cloneDeep(globalState);
// 如果需要，立即出發回調執行
if (fireImmediately) {
callback(cloneState, cloneState);
}
},
/**
* setGlobalState 更新 store 數據
*
* 1. 對新輸入 state 的第一層屬性做校驗，如果是主應用則可以添加新的一級屬性進來，也可以更新已存在的一級屬性，
* 如果是微應用，則只能更新已存在的一級屬性，不可以新增一級屬性
* 2. 觸發全局監聽，執行所有應用注冊的回調函數，以達到應用間通信的目的
*
* @param state 新的全局狀態
*/
setGlobalState(state: Record<string, any> = {}) {
if (state === globalState) {
console.warn('[qiankun] state has not changed！');
return false;
}
// 記錄舊的全局狀態中被改變的 key
const changeKeys: string[] = [];
// 舊的全局狀態
const prevGlobalState = cloneDeep(globalState);
globalState = cloneDeep(
// 循環遍歷新狀態中的所有 key
Object.keys(state).reduce((_globalState, changeKey) => {
if (isMaster || _globalState.hasOwnProperty(changeKey)) {
// 主應用 或者 舊的全局狀態存在該 key 時才進來，說明只有主應用才可以新增屬性，微應用只可以更新已存在的屬性值，且不論主應用微應用只能更新一級屬性
// 記錄被改變的key
changeKeys.push(changeKey);
// 更新舊狀態中對應的 key value
return Object.assign(_globalState, { [changeKey]: state[changeKey] });
}
console.warn(`[qiankun] '${changeKey}' not declared when init state！`);
return _globalState;
}, globalState),
);
if (changeKeys.length === 0) {
console.warn('[qiankun] state has not changed！');
return false;
}
// 觸發全局監聽
emitGlobal(globalState, prevGlobalState);
return true;
},
// 注銷該應用下的依賴
offGlobalStateChange() {
delete deps[id];
return true;
},
};
}
全局未捕獲異常處理器
/**
* 整個文件的邏輯一眼明了，整個框架提供了兩種全局異常捕獲，一個是 single-spa 提供的，另一個是 qiankun 自己的，你只需提供相應的回調函數即可
*/
// single-spa 的異常捕獲
export { addErrorHandler, removeErrorHandler } from 'single-spa';
// qiankun 的異常捕獲
// 監聽了 error 和 unhandlerejection 事件
export function addGlobalUncaughtErrorHandler(errorHandler: OnErrorEventHandlerNonNull): void {
window.addEventListener('error', errorHandler);
window.addEventListener('unhandledrejection', errorHandler);
}
// 移除 error 和 unhandlerejection 事件監聽
export function removeGlobalUncaughtErrorHandler(errorHandler: (...args: any[]) => any) {
window.removeEventListener('error', errorHandler);
window.removeEventListener('unhandledrejection', errorHandler);
}
setDefaultMountApp
/**
* 設置主應用啟動后默認進入的微應用，其實是規定了第一個微應用掛載完成后決定默認進入哪個微應用
* 利用的是 single-spa 的 single-spa:no-app-change 事件，該事件在所有微應用狀態改變結束后（即發生路由切換且新的微應用已經被掛載完成）觸發
* @param defaultAppLink 微應用的鏈接，比如 /react16
*/
export function setDefaultMountApp(defaultAppLink: string) {
// 當事件觸發時就說明微應用已經掛載完成，但這里只監聽了一次，因為事件被觸發以后就移除了監聽，所以說是主應用啟動后默認進入的微應用，且只執行了一次的原因
window.addEventListener('single-spa:no-app-change', function listener() {
// 說明微應用已經掛載完成，獲取掛載的微應用列表，再次確認確實有微應用掛載了，其實這個確認沒啥必要
const mountedApps = getMountedApps();
if (!mountedApps.length) {
// 這個是 single-spa 提供的一個 api，通過觸發 window.location.hash 或者 pushState 更改路由，切換微應用
navigateToUrl(defaultAppLink);
}
// 觸發一次以后，就移除該事件的監聽函數，后續的路由切換（事件觸發）時就不再響應
window.removeEventListener('single-spa:no-app-change', listener);
});
}
// 這個 api 和 setDefaultMountApp 作用一致，官網也提到，兼容老版本的一個 api
export function runDefaultMountEffects(defaultAppLink: string) {
console.warn(
'[qiankun] runDefaultMountEffects will be removed in next version, please use setDefaultMountApp instead',
);
setDefaultMountApp(defaultAppLink);
}
runAfterFirstMounted
/**
* 第一個微應用 mount 后需要調用的方法，比如開啟一些監控或者埋點腳本
* 同樣利用的 single-spa 的 single-spa:first-mount 事件，當第一個微應用掛載以后會觸發
* @param effect 回調函數，當第一個微應用掛載以后要做的事情
*/
export function runAfterFirstMounted(effect: () => void) {
// can not use addEventListener once option for ie support
window.addEventListener('single-spa:first-mount', function listener() {
if (process.env.NODE_ENV === 'development') {
console.timeEnd(firstMountLogLabel);
}
effect();
// 這里不移除也沒事，因為這個事件后續不會再被觸發了
window.removeEventListener('single-spa:first-mount', listener);
});
}
手動加載微應用 loadMicroApp
/**
* 手動加載一個微應用，是通過 single-spa 的 mountRootParcel api 實現的，返回微應用實例
* @param app = { name, entry, container, props }
* @param configuration 配置對象
* @param lifeCycles 還支持一個全局生命周期配置對象，這個參數官方文檔沒提到
*/
export function loadMicroApp<T extends object = {}>(
app: LoadableApp<T>,
configuration?: FrameworkConfiguration,
lifeCycles?: FrameworkLifeCycles<T>,
): MicroApp {
const { props } = app;
// single-spa 的 mountRootParcel api
return mountRootParcel(() => loadApp(app, configuration ?? frameworkConfiguration, lifeCycles), {
domElement: document.createElement('div'),
...props,
});
}
qiankun 的核心 loadApp
接下來介紹
loadApp方法，個人認為qiankun的核心代碼可以說大部分都在這里，當然這也是整個框架的精髓和難點所在
/**
* 完成了以下幾件事：
* 1、通過 HTML Entry 的方式遠程加載微應用，得到微應用的 html 模版（首屏內容）、JS 腳本執行器、靜態經資源路徑
* 2、樣式隔離，shadow DOM 或者 scoped css 兩種方式
* 3、渲染微應用
* 4、運行時沙箱，JS 沙箱、樣式沙箱
* 5、合并沙箱傳遞出來的 生命周期方法、用戶傳遞的生命周期方法、框架內置的生命周期方法，將這些生命周期方法統一整理，導出一個生命周期對象，
* 供 single-spa 的 registerApplication 方法使用，這個對象就相當于使用 single-spa 時你的微應用導出的那些生命周期方法，只不過 qiankun
* 額外填了一些生命周期方法，做了一些事情
* 6、給微應用注冊通信方法并返回通信方法，然后會將通信方法通過 props 注入到微應用
* @param app 微應用配置對象
* @param configuration start 方法執行時設置的配置對象
* @param lifeCycles 注冊微應用時提供的全局生命周期對象
*/
export async function loadApp<T extends object>(
app: LoadableApp<T>,
configuration: FrameworkConfiguration = {},
lifeCycles?: FrameworkLifeCycles<T>,
): Promise<ParcelConfigObject> {
// 微應用的入口和名稱
const { entry, name: appName } = app;
// 實例 id
const appInstanceId = `${appName}_${+new Date()}_${Math.floor(Math.random() * 1000)}`;
// 下面這個不用管，就是生成一個標記名稱，然后使用該名稱在瀏覽器性能緩沖器中設置一個時間戳，可以用來度量程序的執行時間，performance.mark、performance.measure
const markName = `[qiankun] App ${appInstanceId} Loading`;
if (process.env.NODE_ENV === 'development') {
performanceMark(markName);
}
// 配置信息
const { singular = false, sandbox = true, excludeAssetFilter, ...importEntryOpts } = configuration;
/**
* 獲取微應用的入口 html 內容和腳本執行器
* template 是 link 替換為 style 后的 template
* execScript 是 讓 JS 代碼(scripts)在指定 上下文 中運行
* assetPublicPath 是靜態資源地址
*/
const { template, execScripts, assetPublicPath } = await importEntry(entry, importEntryOpts);
// single-spa 的限制，加載、初始化和卸載不能同時進行，必須等卸載完成以后才可以進行加載，這個 promise 會在微應用卸載完成后被 resolve，在后面可以看到
if (await validateSingularMode(singular, app)) {
await (prevAppUnmountedDeferred && prevAppUnmountedDeferred.promise);
}
// --------------- 樣式隔離 ---------------
// 是否嚴格樣式隔離
const strictStyleIsolation = typeof sandbox === 'object' && !!sandbox.strictStyleIsolation;
// 實驗性的樣式隔離，后面就叫 scoped css，和嚴格樣式隔離不能同時開啟，如果開啟了嚴格樣式隔離，則 scoped css 就為 false，強制關閉
const enableScopedCSS = isEnableScopedCSS(configuration);
// 用一個容器元素包裹微應用入口 html 模版, appContent = `<div id="__qiankun_microapp_wrapper_for_${appInstanceId}__" data-name="${appName}">${template}</div>`
const appContent = getDefaultTplWrapper(appInstanceId, appName)(template);
// 將 appContent 有字符串模版轉換為 html dom 元素，如果需要開啟樣式嚴格隔離，則將 appContent 的子元素即微應用入口模版用 shadow dom 包裹起來，以達到樣式嚴格隔離的目的
let element: HTMLElement | null = createElement(appContent, strictStyleIsolation);
// 通過 scoped css 的方式隔離樣式，從這里也就能看出官方為什么說：
// 在目前的階段，該功能還不支持動態的、使用 <link />標簽來插入外聯的樣式，但考慮在未來支持這部分場景
// 在現階段只處理 style 這種內聯標簽的情況
if (element && isEnableScopedCSS(configuration)) {
const styleNodes = element.querySelectorAll('style') || [];
forEach(styleNodes, (stylesheetElement: HTMLStyleElement) => {
css.process(element!, stylesheetElement, appName);
});
}
// --------------- 渲染微應用 ---------------
// 主應用裝載微應用的容器節點
const container = 'container' in app ? app.container : undefined;
// 這個是 1.x 版本遺留下來的實現，如果提供了 render 函數，當微應用需要被激活時就執行 render 函數渲染微應用，新版本用的 container，棄了 render
// 而且 legacyRender 和 strictStyleIsolation、scoped css 不兼容
const legacyRender = 'render' in app ? app.render : undefined;
// 返回一個 render 函數，這個 render 函數要不使用用戶傳遞的 render 函數，要不將 element 插入到 container
const render = getRender(appName, appContent, container, legacyRender);
// 渲染微應用到容器節點，并顯示 loading 狀態
render({ element, loading: true }, 'loading');
// 得到一個 getter 函數，通過該函數可以獲取 <div id="__qiankun_microapp_wrapper_for_${appInstanceId}__" data-name="${appName}">${template}</div>
const containerGetter = getAppWrapperGetter(
appName,
appInstanceId,
!!legacyRender,
strictStyleIsolation,
enableScopedCSS,
() => element,
);
// --------------- 運行時沙箱 ---------------
// 保證每一個微應用運行在一個干凈的環境中（JS 執行上下文獨立、應用間不會發生樣式污染）
let global = window;
let mountSandbox = () => Promise.resolve();
let unmountSandbox = () => Promise.resolve();
if (sandbox) {
/**
* 生成運行時沙箱，這個沙箱其實由兩部分組成 => JS 沙箱（執行上下文）、樣式沙箱
*
* 沙箱返回 window 的代理對象 proxy 和 mount、unmount 兩個方法
* unmount 方法會讓微應用失活，恢復被增強的原生方法，并記錄一堆 rebuild 函數，這個函數是微應用卸載時希望自己被重新掛載時要做的一些事情，比如動態樣式表重建（卸載時會緩存）
* mount 方法會執行一些一些 patch 動作，恢復原生方法的增強功能，并執行 rebuild 函數，將微應用恢復到卸載時的狀態，當然從初始化狀態進入掛載狀態就沒有恢復一說了
*/
const sandboxInstance = createSandbox(
appName,
containerGetter,
Boolean(singular),
enableScopedCSS,
excludeAssetFilter,
);
// 用沙箱的代理對象作為接下來使用的全局對象
global = sandboxInstance.proxy as typeof window;
mountSandbox = sandboxInstance.mount;
unmountSandbox = sandboxInstance.unmount;
}
// 合并用戶傳遞的生命周期對象和 qiankun 框架內置的生命周期對象
const { beforeUnmount = [], afterUnmount = [], afterMount = [], beforeMount = [], beforeLoad = [] } = mergeWith(
{},
// 返回內置生命周期對象，global.__POWERED_BY_QIANKUN__ 和 global.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ 的設置就是在內置的生命周期對象中設置的
getAddOns(global, assetPublicPath),
lifeCycles,
(v1, v2) => concat(v1 ?? [], v2 ?? []),
);
await execHooksChain(toArray(beforeLoad), app, global);
// get the lifecycle hooks from module exports，獲取微應用暴露出來的生命周期函數
const scriptExports: any = await execScripts(global, !singular);
const { bootstrap, mount, unmount, update } = getLifecyclesFromExports(scriptExports, appName, global);
// 給微應用注冊通信方法并返回通信方法，然后會將通信方法通過 props 注入到微應用
const {
onGlobalStateChange,
setGlobalState,
offGlobalStateChange,
}: Record<string, Function> = getMicroAppStateActions(appInstanceId);
const parcelConfig: ParcelConfigObject = {
name: appInstanceId,
bootstrap,
// 掛載階段需要執行的一系列方法
mount: [
// 性能度量，不用管
async () => {
if (process.env.NODE_ENV === 'development') {
const marks = performance.getEntriesByName(markName, 'mark');
// mark length is zero means the app is remounting
if (!marks.length) {
performanceMark(markName);
}
}
},
// 單例模式需要等微應用卸載完成以后才能執行掛載任務，promise 會在微應用卸載完以后 resolve
async () => {
if ((await validateSingularMode(singular, app)) && prevAppUnmountedDeferred) {
return prevAppUnmountedDeferred.promise;
}
return undefined;
},
// 添加 mount hook, 確保每次應用加載前容器 dom 結構已經設置完畢
async () => {
// element would be destroyed after unmounted, we need to recreate it if it not exist
// unmount 階段會置空，這里重新生成
element = element || createElement(appContent, strictStyleIsolation);
// 渲染微應用到容器節點，并顯示 loading 狀態
render({ element, loading: true }, 'mounting');
},
// 運行時沙箱導出的 mount
mountSandbox,
// exec the chain after rendering to keep the behavior with beforeLoad
async () => execHooksChain(toArray(beforeMount), app, global),
// 向微應用的 mount 生命周期函數傳遞參數，比如微應用中使用的 props.onGlobalStateChange 方法
async props => mount({ ...props, container: containerGetter(), setGlobalState, onGlobalStateChange }),
// 應用 mount 完成后結束 loading
async () => render({ element, loading: false }, 'mounted'),
async () => execHooksChain(toArray(afterMount), app, global),
// initialize the unmount defer after app mounted and resolve the defer after it unmounted
// 微應用掛載完成以后初始化這個 promise，并且在微應用卸載以后 resolve 這個 promise
async () => {
if (await validateSingularMode(singular, app)) {
prevAppUnmountedDeferred = new Deferred<void>();
}
},
// 性能度量，不用管
async () => {
if (process.env.NODE_ENV === 'development') {
const measureName = `[qiankun] App ${appInstanceId} Loading Consuming`;
performanceMeasure(measureName, markName);
}
},
],
// 卸載微應用
unmount: [
async () => execHooksChain(toArray(beforeUnmount), app, global),
// 執行微應用的 unmount 生命周期函數
async props => unmount({ ...props, container: containerGetter() }),
// 沙箱導出的 unmount 方法
unmountSandbox,
async () => execHooksChain(toArray(afterUnmount), app, global),
// 顯示 loading 狀態、移除微應用的狀態監聽、置空 element
async () => {
render({ element: null, loading: false }, 'unmounted');
offGlobalStateChange(appInstanceId);
// for gc
element = null;
},
// 微應用卸載以后 resolve 這個 promise，框架就可以進行后續的工作，比如加載或者掛載其它微應用
async () => {
if ((await validateSingularMode(singular, app)) && prevAppUnmountedDeferred) {
prevAppUnmountedDeferred.resolve();
}
},
],
};
// 微應用有可能定義 update 方法
if (typeof update === 'function') {
parcelConfig.update = update;
}
return parcelConfig;
}
樣式隔離
qiankun 的樣式隔離有兩種方式，一種是嚴格樣式隔離，通過 shadow dom 來實現，另一種是實驗性的樣式隔離，就是 scoped css，兩種方式不可共存
嚴格樣式隔離
在 qiankun 中的嚴格樣式隔離，就是在這個 createElement 方法中做的，通過 shadow dom 來實現， shadow dom 是瀏覽器原生提供的一種能力，在過去的很長一段時間里，瀏覽器用它來封裝一些元素的內部結構。以一個有著默認播放控制按鈕的 <video> 元素為例，實際上，在它的 Shadow DOM 中，包含來一系列的按鈕和其他控制器。Shadow DOM 標準允許你為你自己的元素（custom element）維護一組 Shadow DOM。具體內容可查看 shadow DOM
/**
* 做了兩件事
* 1、將 appContent 由字符串模版轉換成 html dom 元素
* 2、如果需要開啟嚴格樣式隔離，則將 appContent 的子元素即微應用的入口模版用 shadow dom 包裹起來，達到樣式嚴格隔離的目的
* @param appContent = `<div id="__qiankun_microapp_wrapper_for_${appInstanceId}__" data-name="${appName}">${template}</div>`
* @param strictStyleIsolation 是否開啟嚴格樣式隔離
*/
function createElement(appContent: string, strictStyleIsolation: boolean): HTMLElement {
// 創建一個 div 元素
const containerElement = document.createElement('div');
// 將字符串模版 appContent 設置為 div 的子與阿蘇
containerElement.innerHTML = appContent;
// appContent always wrapped with a singular div，appContent 由模版字符串變成了 DOM 元素
const appElement = containerElement.firstChild as HTMLElement;
// 如果開啟了嚴格的樣式隔離，則將 appContent 的子元素（微應用的入口模版）用 shadow dom 包裹，以達到微應用之間樣式嚴格隔離的目的
if (strictStyleIsolation) {
if (!supportShadowDOM) {
console.warn(
'[qiankun]: As current browser not support shadow dom, your strictStyleIsolation configuration will be ignored!',
);
} else {
const { innerHTML } = appElement;
appElement.innerHTML = '';
let shadow: ShadowRoot;
if (appElement.attachShadow) {
shadow = appElement.attachShadow({ mode: 'open' });
} else {
// createShadowRoot was proposed in initial spec, which has then been deprecated
shadow = (appElement as any).createShadowRoot();
}
shadow.innerHTML = innerHTML;
}
}
return appElement;
}
實驗性樣式隔離
實驗性樣式的隔離方式其實就是 scoped css，qiankun 會通過動態改寫一個特殊的選擇器約束來限制 css 的生效范圍，應用的樣式會按照如下模式改寫：
// 假設應用名是 react16
.app-main {
font-size: 14px;
}
div[data-qiankun-react16] .app-main {
font-size: 14px;
}
process
/**
* 做了兩件事：
* 實例化 processor = new ScopedCss()，真正處理樣式選擇器的地方
* 生成樣式前綴 `div[data-qiankun]=${appName}`
* @param appWrapper = <div id="__qiankun_microapp_wrapper_for_${appInstanceId}__" data-name="${appName}">${template}</div>
* @param stylesheetElement = <style>xx</style>
* @param appName 微應用名稱
*/
export const process = (
appWrapper: HTMLElement,
stylesheetElement: HTMLStyleElement | HTMLLinkElement,
appName: string,
) => {
// lazy singleton pattern，單例模式
if (!processor) {
processor = new ScopedCSS();
}
// 目前支持 style 標簽
if (stylesheetElement.tagName === 'LINK') {
console.warn('Feature: sandbox.experimentalStyleIsolation is not support for link element yet.');
}
// 微應用模版
const mountDOM = appWrapper;
if (!mountDOM) {
return;
}
// div
const tag = (mountDOM.tagName || '').toLowerCase();
if (tag && stylesheetElement.tagName === 'STYLE') {
// 生成前綴 `div[data-qiankun]=${appName}`
const prefix = `${tag}[${QiankunCSSRewriteAttr}="${appName}"]`;
/**
* 實際處理樣式的地方
* 拿到樣式節點中的所有樣式規則，然后重寫樣式選擇器
* 含有根元素選擇器的情況：用前綴替換掉選擇器中的根元素選擇器部分，
* 普通選擇器：將前綴插到第一個選擇器的后面
*/
processor.process(stylesheetElement, prefix);
}
}
export const QiankunCSSRewriteAttr = 'data-qiankun';
ScopedCSS
// https://developer.mozilla.org/en-US/docs/Web/API/CSSRule
enum RuleType {
// type: rule will be rewrote
STYLE = 1,
MEDIA = 4,
SUPPORTS = 12,
// type: value will be kept
IMPORT = 3,
FONT_FACE = 5,
PAGE = 6,
KEYFRAMES = 7,
KEYFRAME = 8,
}
const arrayify = <T>(list: CSSRuleList | any[]) => {
return [].slice.call(list, 0) as T[];
};
export class ScopedCSS {
private static ModifiedTag = 'Symbol(style-modified-qiankun)';
private sheet: StyleSheet;
private swapNode: HTMLStyleElement;
constructor() {
const styleNode = document.createElement('style');
document.body.appendChild(styleNode);
this.swapNode = styleNode;
this.sheet = styleNode.sheet!;
this.sheet.disabled = true;
}
/**
* 拿到樣式節點中的所有樣式規則，然后重寫樣式選擇器
* 含有根元素選擇器的情況：用前綴替換掉選擇器中的根元素選擇器部分，
* 普通選擇器：將前綴插到第一個選擇器的后面
*
* 如果發現一個樣式節點為空，則該節點的樣式內容可能會被動態插入，qiankun 監控了該動態插入的樣式，并做了同樣的處理
*
* @param styleNode 樣式節點
* @param prefix 前綴 `div[data-qiankun]=${appName}`
*/
process(styleNode: HTMLStyleElement, prefix: string = '') {
// 樣式節點不為空，即 <style>xx</style>
if (styleNode.textContent !== '') {
// 創建一個文本節點，內容為 style 節點內的樣式內容
const textNode = document.createTextNode(styleNode.textContent || '');
// swapNode 是 ScopedCss 類實例化時創建的一個空 style 節點，將樣式內容添加到這個節點下
this.swapNode.appendChild(textNode);
/**
* {
* cssRules: CSSRuleList {0: CSSStyleRule, 1: CSSStyleRule, 2: CSSStyleRule, 3: CSSStyleRule, length: 4}
* disabled: false
* href: null
* media: MediaList {length: 0, mediaText: ""}
* ownerNode: style
* ownerRule: null
* parentStyleSheet: null
* rules: CSSRuleList {0: CSSStyleRule, 1: CSSStyleRule, 2: CSSStyleRule, 3: CSSStyleRule, length: 4}
* title: null
* type: "text/css"
* }
*/
const sheet = this.swapNode.sheet as any; // type is missing
/**
* 得到所有的樣式規則，比如
* [
* {selectorText: "body", style: CSSStyleDeclaration, styleMap: StylePropertyMap, type: 1, cssText: "body { background: rgb(255, 255, 255); margin: 0px; }", …}
* {selectorText: "#oneGoogleBar", style: CSSStyleDeclaration, styleMap: StylePropertyMap, type: 1, cssText: "#oneGoogleBar { height: 56px; }", …}
* {selectorText: "#backgroundImage", style: CSSStyleDeclaration, styleMap: StylePropertyMap, type: 1, cssText: "#backgroundImage { border: none; height: 100%; poi…xed; top: 0px; visibility: hidden; width: 100%; }", …}
* {selectorText: "[show-background-image] #backgroundImage {xx}"
* ]
*/
const rules = arrayify<CSSRule>(sheet?.cssRules ?? []);
/**
* 重寫樣式選擇器
* 含有根元素選擇器的情況：用前綴替換掉選擇器中的根元素選擇器部分，
* 普通選擇器：將前綴插到第一個選擇器的后面
*/
const css = this.rewrite(rules, prefix);
// 用重寫后的樣式替換原來的樣式
// eslint-disable-next-line no-param-reassign
styleNode.textContent = css;
// cleanup
this.swapNode.removeChild(textNode);
return;
}
/**
*
* 走到這里說明樣式節點為空
*/
// 創建并返回一個新的 MutationObserver 它會在指定的DOM發生變化時被調用
const mutator = new MutationObserver(mutations => {
for (let i = 0; i < mutations.length; i += 1) {
const mutation = mutations[i];
// 表示該節點已經被 qiankun 處理過，后面就不會再被重復處理
if (ScopedCSS.ModifiedTag in styleNode) {
return;
}
// 如果是子節點列表發生變化
if (mutation.type === 'childList') {
// 拿到 styleNode 下的所有樣式規則，并重寫其樣式選擇器，然后用重寫后的樣式替換原有樣式
const sheet = styleNode.sheet as any;
const rules = arrayify<CSSRule>(sheet?.cssRules ?? []);
const css = this.rewrite(rules, prefix);
// eslint-disable-next-line no-param-reassign
styleNode.textContent = css;
// 給 styleNode 添加一個 ScopedCss.ModifiedTag 屬性，表示已經被 qiankun 處理過，后面就不會再被處理了
// eslint-disable-next-line no-param-reassign
(styleNode as any)[ScopedCSS.ModifiedTag] = true;
}
}
});
// since observer will be deleted when node be removed
// we dont need create a cleanup function manually
// see https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/disconnect
// 觀察 styleNode 節點，當其子節點發生變化時調用 callback 即 實例化時傳遞的函數
mutator.observe(styleNode, { childList: true });
}
/**
* 重寫樣式選擇器，都是在 ruleStyle 中處理的：
* 含有根元素選擇器的情況：用前綴替換掉選擇器中的根元素選擇器部分，
* 普通選擇器：將前綴插到第一個選擇器的后面
*
* @param rules 樣式規則
* @param prefix 前綴 `div[data-qiankun]=${appName}`
*/
private rewrite(rules: CSSRule[], prefix: string = '') {
let css = '';
rules.forEach(rule => {
// 幾種類型的樣式規則，所有類型查看 https://developer.mozilla.org/zh-CN/docs/Web/API/CSSRule#%E7%B1%BB%E5%9E%8B%E5%B8%B8%E9%87%8F
switch (rule.type) {
// 最常見的 selector { prop: val }
case RuleType.STYLE:
/**
* 含有根元素選擇器的情況：用前綴替換掉選擇器中的根元素選擇器部分，
* 普通選擇器：將前綴插到第一個選擇器的后面
*/
css += this.ruleStyle(rule as CSSStyleRule, prefix);
break;
// 媒體 @media screen and (max-width: 300px) { prop: val }
case RuleType.MEDIA:
// 拿到其中的具體樣式規則，然后調用 rewrite 通過 ruleStyle 去處理
css += this.ruleMedia(rule as CSSMediaRule, prefix);
break;
// @supports (display: grid) {}
case RuleType.SUPPORTS:
// 拿到其中的具體樣式規則，然后調用 rewrite 通過 ruleStyle 去處理
css += this.ruleSupport(rule as CSSSupportsRule, prefix);
break;
// 其它，直接返回樣式內容
default:
css += `${rule.cssText}`;
break;
}
});
return css;
}
/**
* 普通的根選擇器用前綴代替
* 根組合選擇器置空，忽略非標準形式的兄弟選擇器，比如 html + body {...}
* 針對普通選擇器則是在第一個選擇器后面插入前綴，比如 .xx 變成 .xxprefix
*
* 總結就是：
* 含有根元素選擇器的情況：用前綴替換掉選擇器中的根元素選擇器部分，
* 普通選擇器：將前綴插到第一個選擇器的后面
*
* handle case:
* .app-main {}
* html, body {}
*
* @param rule 比如：.app-main {} 或者 html, body {}
* @param prefix `div[data-qiankun]=${appName}`
*/
// eslint-disable-next-line class-methods-use-this
private ruleStyle(rule: CSSStyleRule, prefix: string) {
// 根選擇，比如 html、body、:root
const rootSelectorRE = /((?:[^\w\-.#]|^)(body|html|:root))/gm;
// 根組合選擇器，比如 html body {...} 、 html > body {...}
const rootCombinationRE = /(html[^\w{[]+)/gm;
// 選擇器
const selector = rule.selectorText.trim();
// 樣式文本
let { cssText } = rule;
// 如果選擇器為根選擇器，則直接用前綴將根選擇器替換掉
// handle html { ... }
// handle body { ... }
// handle :root { ... }
if (selector === 'html' || selector === 'body' || selector === ':root') {
return cssText.replace(rootSelectorRE, prefix);
}
// 根組合選擇器
// handle html body { ... }
// handle html > body { ... }
if (rootCombinationRE.test(rule.selectorText)) {
// 兄弟選擇器 html + body，非標準選擇器，無效，轉換時忽略
const siblingSelectorRE = /(html[^\w{]+)(\+|~)/gm;
// since html + body is a non-standard rule for html
// transformer will ignore it
if (!siblingSelectorRE.test(rule.selectorText)) {
// 說明時 html + body 這種非標準形式，則將根組合器置空
cssText = cssText.replace(rootCombinationRE, '');
}
}
// 其它一般選擇器，比如 類選擇器、id 選擇器、元素選擇器、組合選擇器等
// handle grouping selector, a,span,p,div { ... }
cssText = cssText.replace(/^[\s\S]+{/, selectors =>
// item 是匹配的字串，p 是第一個分組匹配的內容，s 是第二個分組匹配的內容
selectors.replace(/(^|,\n?)([^,]+)/g, (item, p, s) => {
// handle div,body,span { ... }
if (rootSelectorRE.test(item)) {
// 說明選擇器中含有根元素選擇器
return item.replace(rootSelectorRE, m => {
// do not discard valid previous character, such as body,html or *:not(:root)
const whitePrevChars = [',', '('];
// 將其中的根元素替換為前綴
if (m && whitePrevChars.includes(m[0])) {
return `${m[0]}${prefix}`;
}
// replace root selector with prefix
return prefix;
});
}
// selector1 selector2 =》 selector1prefix selector2
return `${p}${prefix} ${s.replace(/^ */, '')}`;
}),
);
return cssText;
}
// 拿到其中的具體樣式規則，然后調用 rewrite 通過 ruleStyle 去處理
// handle case:
// @media screen and (max-width: 300px) {}
private ruleMedia(rule: CSSMediaRule, prefix: string) {
const css = this.rewrite(arrayify(rule.cssRules), prefix);
return `@media ${rule.conditionText} {${css}}`;
}
// 拿到其中的具體樣式規則，然后調用 rewrite 通過 ruleStyle 去處理
// handle case:
// @supports (display: grid) {}
private ruleSupport(rule: CSSSupportsRule, prefix: string) {
const css = this.rewrite(arrayify(rule.cssRules), prefix);
return `@supports ${rule.conditionText} {${css}}`;
}
}
結語
以上內容就是對 qiankun 框架的完整解讀了，相信你在閱讀完這篇文章以后會有不錯的收獲，源碼在 github
閱讀 qiankun 時的感受就是 書讀百變其義自現，qiankun 框架有些地方實現還是比較難理解的，相信大家閱讀源碼時也會有這個感受，那就多讀幾遍吧，當然也可以來評論區交流，共同學習，共同進步！！
鏈接
感謝各位的：點贊、收藏和評論，我們下期見。
當學習成為了習慣，知識也就變成了常識。 感謝各位的 點贊、收藏和評論。
新視頻和文章會第一時間在微信公眾號發送，歡迎關注：李永寧lyn
文章已收錄到 github 倉庫 liyongning/blog，歡迎 Watch 和 Star。
