寫在開頭
微前端系列文章:
- 基於 qiankun 的微前端最佳實踐(萬字長文) - 從 0 到 1 篇
- 基於 qiankun 的微前端最佳實踐(圖文並茂) - 應用間通信篇
- 萬字長文+圖文並茂+全面解析微前端框架 qiankun 源碼 - qiankun 篇)
本系列其他文章計劃一到兩個月內完成,點個 關注
不迷路。
計劃如下:
- 生命週期篇;
- IE 兼容篇;
- 生產環境部署篇;
- 性能優化、緩存方案篇;
引言
大家好~
本文是基於 qiankun
的微前端最佳實踐系列文章之 從 0 到 1 篇
,本文將分享如何使用 qiankun
如何搭建主應用基座,然後接入不同技術棧的微應用,完成微前端架構的從 0 到 1。
本教程採用 Vue
作爲主應用基座,接入不同技術棧的微應用。如果你不懂 Vue
也沒關係,我們在搭建主應用基座的教程儘量不涉及 Vue
的 API
,涉及到 API
的地方都會給出解釋。
注意:
qiankun
屬於無侵入性的微前端框架,對主應用基座和微應用的技術棧都沒有要求。
我們在本教程中,接入了多技術棧 微應用
的 主應用
最終效果圖如下:
構建主應用基座
我們以 實戰案例 - feature-inject-sub-apps 分支 (案例是以 Vue
爲基座的主應用,接入多個微應用) 爲例,來介紹一下如何在 qiankun
中如何接入不同技術棧的微應用。
我們先使用 vue-cli
生成一個 Vue
的項目,初始化主應用。
vue-cli 是
Vue
官方提供的腳手架工具,用於快速搭建一個Vue
項目。如果你想跳過這一步,可以直接clone
實戰案例 - feature-inject-sub-apps 分支 的代碼。
將普通的項目改造成 qiankun
主應用基座,需要進行三步操作:
- 創建微應用容器 - 用於承載微應用,渲染顯示微應用;
- 註冊微應用 - 設置微應用激活條件,微應用地址等等;
- 啓動
qiankun
;
創建微應用容器
我們先在主應用中創建微應用的承載容器,這個容器規定了微應用的顯示區域,微應用將在該容器內渲染並顯示。
我們先設置路由,路由文件規定了主應用自身的路由匹配規則,代碼實現如下:
// micro-app-main/src/routes/index.ts
import Home from "@/pages/home/index.vue";
const routes = [
{
/**
* path: 路徑爲 / 時觸發該路由規則
* name: 路由的 name 爲 Home
* component: 觸發路由時加載 `Home` 組件
*/
path: "/",
name: "Home",
component: Home,
},
];
export default routes;
// micro-app-main/src/main.ts
//...
import Vue from "vue";
import VueRouter from "vue-router";
import routes from "./routes";
/**
* 註冊路由實例
* 即將開始監聽 location 變化,觸發路由規則
*/
const router = new VueRouter({
mode: "history",
routes,
});
// 創建 Vue 實例
// 該實例將掛載/渲染在 id 爲 main-app 的節點上
new Vue({
router,
render: (h) => h(App),
}).$mount("#main-app");
從上面代碼可以看出,我們設置了主應用的路由規則,設置了 Home
主頁的路由匹配規則。
我們現在來設置主應用的佈局,我們會有一個菜單和顯示區域,代碼實現如下:
// micro-app-main/src/App.vue
//...
export default class App extends Vue {
/**
* 菜單列表
* key: 唯一 Key 值
* title: 菜單標題
* path: 菜單對應的路徑
*/
menus = [
{
key: "Home",
title: "主頁",
path: "/",
},
];
}
上面的代碼是我們對菜單配置的實現,我們還需要實現基座和微應用的顯示區域(如下圖)
我們來分析一下上面的代碼:
第 5 行
:主應用菜單,用於渲染菜單;第 9 行
:主應用渲染區。在觸發主應用路由規則時(由路由配置表的$route.name
判斷),將渲染主應用的組件;第 10 行
:微應用渲染區。在未觸發主應用路由規則時(由路由配置表的$route.name
判斷),將渲染微應用節點;
從上面的分析可以看出,我們使用了在路由表配置的 name
字段進行判斷,判斷當前路由是否爲主應用路由,最後決定渲染主應用組件或是微應用節點。
由於篇幅原因,樣式實現代碼就不貼出來了,最後主應用的實現效果如下圖所示:
從上圖可以看出,我們主應用的組件和微應用是顯示在同一片內容區域,根據路由規則決定渲染規則。
註冊微應用
在構建好了主框架後,我們需要使用 qiankun
的 registerMicroApps
方法註冊微應用,代碼實現如下:
// micro-app-main/src/micro/apps.ts
// 此時我們還沒有微應用,所以 apps 爲空
const apps = [];
export default apps;
// micro-app-main/src/micro/index.ts
// 一個進度條插件
import NProgress from "nprogress";
import "nprogress/nprogress.css";
import { message } from "ant-design-vue";
import {
registerMicroApps,
addGlobalUncaughtErrorHandler,
start,
} from "qiankun";
// 微應用註冊信息
import apps from "./apps";
/**
* 註冊微應用
* 第一個參數 - 微應用的註冊信息
* 第二個參數 - 全局生命週期鉤子
*/
registerMicroApps(apps, {
// qiankun 生命週期鉤子 - 微應用加載前
beforeLoad: (app: any) => {
// 加載微應用前,加載進度條
NProgress.start();
console.log("before load", app.name);
return Promise.resolve();
},
// qiankun 生命週期鉤子 - 微應用掛載後
afterMount: (app: any) => {
// 加載微應用前,進度條加載完成
NProgress.done();
console.log("after mount", app.name);
return Promise.resolve();
},
});
/**
* 添加全局的未捕獲異常處理器
*/
addGlobalUncaughtErrorHandler((event: Event | string) => {
console.error(event);
const { message: msg } = event as any;
// 加載失敗時提示
if (msg && msg.includes("died in status LOADING_SOURCE_CODE")) {
message.error("微應用加載失敗,請檢查應用是否可運行");
}
});
// 導出 qiankun 的啓動函數
export default start;
從上面可以看出,我們的微應用註冊信息在 apps
數組中(此時爲空,我們在後面接入微應用時會添加微應用註冊信息),然後使用 qiankun
的 registerMicroApps
方法註冊微應用,最後導出了 start
函數,註冊微應用的工作就完成啦!
啓動主應用
我們在註冊好了微應用,導出 start
函數後,我們需要在合適的地方調用 start
啓動主應用。
我們一般是在入口文件啓動 qiankun
主應用,代碼實現如下:
// micro-app-main/src/main.ts
//...
import startQiankun from "./micro";
startQiankun();
最後,啓動我們的主應用,效果圖如下:
因爲我們還沒有註冊任何微應用,所以這裏的效果圖和上面的效果圖是一樣的。
到這一步,我們的主應用基座就創建好啦!
接入微應用
我們現在的主應用基座只有一個主頁,現在我們需要接入微應用。
qiankun
內部通過 import-entry-html
加載微應用,要求微應用需要導出生命週期鉤子函數(見下圖)。
從上圖可以看出,qiankun
內部會校驗微應用的生命週期鉤子函數,如果微應用沒有導出這三個生命週期鉤子函數,則微應用會加載失敗。
如果我們使用了腳手架搭建微應用的話,我們可以通過 webpack
配置在入口文件處導出這三個生命週期鉤子函數。如果沒有使用腳手架的話,也可以直接在微應用的 window
上掛載這三個生命週期鉤子函數。
現在我們來接入我們的各個技術棧微應用吧!
注意,下面的內容對相關技術棧
API
不會再有過多介紹啦,如果你要接入不同技術棧的微應用,最好要對該技術棧有一些基礎瞭解。
接入 Vue
微應用
我們以 實戰案例 - feature-inject-sub-apps 分支 爲例,我們在主應用的同級目錄(micro-app-main
同級目錄),使用 vue-cli
先創建一個 Vue
的項目,在命令行運行如下命令:
vue create micro-app-vue
本文的 vue-cli
選項如下圖所示,你也可以根據自己的喜好選擇配置。
在新建項目完成後,我們創建幾個路由頁面再加上一些樣式,最後效果如下:
註冊微應用
在創建好了 Vue
微應用後,我們可以開始我們的接入工作了。首先我們需要在主應用中註冊該微應用的信息,代碼實現如下:
// micro-app-main/src/micro/apps.ts
const apps = [
/**
* name: 微應用名稱 - 具有唯一性
* entry: 微應用入口 - 通過該地址加載微應用
* container: 微應用掛載節點 - 微應用加載完成後將掛載在該節點上
* activeRule: 微應用觸發的路由規則 - 觸發路由規則後將加載該微應用
*/
{
name: "VueMicroApp",
entry: "//localhost:10200",
container: "#frame",
activeRule: "/vue",
},
];
export default apps;
通過上面的代碼,我們就在主應用中註冊了我們的 Vue
微應用,進入 /vue
路由時將加載我們的 Vue
微應用。
我們在菜單配置處也加入 Vue
微應用的快捷入口,代碼實現如下:
// micro-app-main/src/App.vue
//...
export default class App extends Vue {
/**
* 菜單列表
* key: 唯一 Key 值
* title: 菜單標題
* path: 菜單對應的路徑
*/
menus = [
{
key: "Home",
title: "主頁",
path: "/",
},
{
key: "VueMicroApp",
title: "Vue 主頁",
path: "/vue",
},
{
key: "VueMicroAppList",
title: "Vue 列表頁",
path: "/vue/list",
},
];
}
菜單配置完成後,我們的主應用基座效果圖如下
配置微應用
在主應用註冊好了微應用後,我們還需要對微應用進行一系列的配置。首先,我們在 Vue
的入口文件 main.js
中,導出 qiankun
主應用所需要的三個生命週期鉤子函數,代碼實現如下:
從上圖來分析:
第 6 行
:webpack
默認的publicPath
爲""
空字符串,會基於當前路徑來加載資源。我們在主應用中加載微應用時需要重新設置publicPath
,這樣才能正確加載微應用的相關資源。(public-path.js
具體實現在後面)第 21 行
:微應用的掛載函數,在主應用中運行時將在mount
生命週期鉤子函數中調用,可以保證在沙箱內運行。第 38 行
:微應用獨立運行時,直接執行render
函數掛載微應用。第 46 行
:微應用導出的生命週期鉤子函數 -bootstrap
。第 53 行
:微應用導出的生命週期鉤子函數 -mount
。第 61 行
:微應用導出的生命週期鉤子函數 -unmount
。
完整代碼實現如下:
// micro-app-vue/src/public-path.js
if (window.__POWERED_BY_QIANKUN__) {
// 動態設置 webpack publicPath,防止資源加載出錯
// eslint-disable-next-line no-undef
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
// micro-app-vue/src/main.js
import Vue from "vue";
import VueRouter from "vue-router";
import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.css";
import "./public-path";
import App from "./App.vue";
import routes from "./routes";
Vue.use(VueRouter);
Vue.use(Antd);
Vue.config.productionTip = false;
let instance = null;
let router = null;
/**
* 渲染函數
* 兩種情況:主應用生命週期鉤子中運行 / 微應用單獨啓動時運行
*/
function render() {
// 在 render 中創建 VueRouter,可以保證在卸載微應用時,移除 location 事件監聽,防止事件污染
router = new VueRouter({
// 運行在主應用中時,添加路由命名空間 /vue
base: window.__POWERED_BY_QIANKUN__ ? "/vue" : "/",
mode: "history",
routes,
});
// 掛載應用
instance = new Vue({
router,
render: (h) => h(App),
}).$mount("#app");
}
// 獨立運行時,直接掛載應用
if (!window.__POWERED_BY_QIANKUN__) {
render();
}
/**
* bootstrap 只會在微應用初始化的時候調用一次,下次微應用重新進入時會直接調用 mount 鉤子,不會再重複觸發 bootstrap。
* 通常我們可以在這裏做一些全局變量的初始化,比如不會在 unmount 階段被銷燬的應用級別的緩存等。
*/
export async function bootstrap() {
console.log("VueMicroApp bootstraped");
}
/**
* 應用每次進入都會調用 mount 方法,通常我們在這裏觸發應用的渲染方法
*/
export async function mount(props) {
console.log("VueMicroApp mount", props);
render(props);
}
/**
* 應用每次 切出/卸載 會調用的方法,通常在這裏我們會卸載微應用的應用實例
*/
export async function unmount() {
console.log("VueMicroApp unmount");
instance.$destroy();
instance = null;
router = null;
}
在配置好了入口文件 main.js
後,我們還需要配置 webpack
,使 main.js
導出的生命週期鉤子函數可以被 qiankun
識別獲取。
我們直接配置 vue.config.js
即可,代碼實現如下:
// micro-app-vue/vue.config.js
const path = require("path");
module.exports = {
devServer: {
// 監聽端口
port: 10200,
// 關閉主機檢查,使微應用可以被 fetch
disableHostCheck: true,
// 配置跨域請求頭,解決開發環境的跨域問題
headers: {
"Access-Control-Allow-Origin": "*",
},
},
configureWebpack: {
resolve: {
alias: {
"@": path.resolve(__dirname, "src"),
},
},
output: {
// 微應用的包名,這裏與主應用中註冊的微應用名稱一致
library: "VueMicroApp",
// 將你的 library 暴露爲所有的模塊定義下都可運行的方式
libraryTarget: "umd",
// 按需加載相關,設置爲 webpackJsonp_VueMicroApp 即可
jsonpFunction: `webpackJsonp_VueMicroApp`,
},
},
};
我們需要重點關注一下 output
選項,當我們把 libraryTarget
設置爲 umd
後,我們的 library
就暴露爲所有的模塊定義下都可運行的方式了,主應用就可以獲取到微應用的生命週期鉤子函數了。
在 vue.config.js
修改完成後,我們重新啓動 Vue
微應用,然後打開主應用基座 http://localhost:9999
。我們點擊左側菜單切換到微應用,此時我們的 Vue
微應用被正確加載啦!(見下圖)
此時我們打開控制檯,可以看到我們所執行的生命週期鉤子函數(見下圖)
到這裏,Vue
微應用就接入成功了!
接入 React
微應用
我們以 實戰案例 - feature-inject-sub-apps 分支 爲例,我們在主應用的同級目錄(micro-app-main
同級目錄),使用 react-create-app
先創建一個 React
的項目,在命令行運行如下命令:
npx create-react-app micro-app-react
在項目創建完成後,我們在根目錄下添加 .env
文件,設置項目監聽的端口,代碼實現如下:
# micro-app-react/.env
PORT=10100
BROWSER=none
然後,我們創建幾個路由頁面再加上一些樣式,最後效果如下:
註冊微應用
在創建好了 React
微應用後,我們可以開始我們的接入工作了。首先我們需要在主應用中註冊該微應用的信息,代碼實現如下:
// micro-app-main/src/micro/apps.ts
const apps = [
/**
* name: 微應用名稱 - 具有唯一性
* entry: 微應用入口 - 通過該地址加載微應用
* container: 微應用掛載節點 - 微應用加載完成後將掛載在該節點上
* activeRule: 微應用觸發的路由規則 - 觸發路由規則後將加載該微應用
*/
{
name: "ReactMicroApp",
entry: "//localhost:10100",
container: "#frame",
activeRule: "/react",
},
];
export default apps;
通過上面的代碼,我們就在主應用中註冊了我們的 React
微應用,進入 /react
路由時將加載我們的 React
微應用。
我們在菜單配置處也加入 React
微應用的快捷入口,代碼實現如下:
// micro-app-main/src/App.vue
//...
export default class App extends Vue {
/**
* 菜單列表
* key: 唯一 Key 值
* title: 菜單標題
* path: 菜單對應的路徑
*/
menus = [
{
key: "Home",
title: "主頁",
path: "/",
},
{
key: "ReactMicroApp",
title: "React 主頁",
path: "/react",
},
{
key: "ReactMicroAppList",
title: "React 列表頁",
path: "/react/list",
},
];
}
菜單配置完成後,我們的主應用基座效果圖如下
配置微應用
在主應用註冊好了微應用後,我們還需要對微應用進行一系列的配置。首先,我們在 React
的入口文件 index.js
中,導出 qiankun
主應用所需要的三個生命週期鉤子函數,代碼實現如下:
從上圖來分析:
第 5 行
:webpack
默認的publicPath
爲""
空字符串,會基於當前路徑來加載資源。我們在主應用中加載微應用時需要重新設置publicPath
,這樣才能正確加載微應用的相關資源。(public-path.js
具體實現在後面)第 12 行
:微應用的掛載函數,在主應用中運行時將在mount
生命週期鉤子函數中調用,可以保證在沙箱內運行。第 17 行
:微應用獨立運行時,直接執行render
函數掛載微應用。第 25 行
:微應用導出的生命週期鉤子函數 -bootstrap
。第 32 行
:微應用導出的生命週期鉤子函數 -mount
。第 40 行
:微應用導出的生命週期鉤子函數 -unmount
。
完整代碼實現如下:
// micro-app-react/src/public-path.js
if (window.__POWERED_BY_QIANKUN__) {
// 動態設置 webpack publicPath,防止資源加載出錯
// eslint-disable-next-line no-undef
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
// micro-app-react/src/index.js
import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./public-path";
import App from "./App.jsx";
/**
* 渲染函數
* 兩種情況:主應用生命週期鉤子中運行 / 微應用單獨啓動時運行
*/
function render() {
ReactDOM.render(<App />, document.getElementById("root"));
}
// 獨立運行時,直接掛載應用
if (!window.__POWERED_BY_QIANKUN__) {
render();
}
/**
* bootstrap 只會在微應用初始化的時候調用一次,下次微應用重新進入時會直接調用 mount 鉤子,不會再重複觸發 bootstrap。
* 通常我們可以在這裏做一些全局變量的初始化,比如不會在 unmount 階段被銷燬的應用級別的緩存等。
*/
export async function bootstrap() {
console.log("ReactMicroApp bootstraped");
}
/**
* 應用每次進入都會調用 mount 方法,通常我們在這裏觸發應用的渲染方法
*/
export async function mount(props) {
console.log("ReactMicroApp mount", props);
render(props);
}
/**
* 應用每次 切出/卸載 會調用的方法,通常在這裏我們會卸載微應用的應用實例
*/
export async function unmount() {
console.log("ReactMicroApp unmount");
ReactDOM.unmountComponentAtNode(document.getElementById("root"));
}
在配置好了入口文件 index.js
後,我們還需要配置路由命名空間,以確保主應用可以正確加載微應用,代碼實現如下:
// micro-app-react/src/App.jsx
const BASE_NAME = window.__POWERED_BY_QIANKUN__ ? "/react" : "";
const App = () => {
//...
return (
// 設置路由命名空間
<Router basename={BASE_NAME}>{/* ... */}</Router>
);
};
接下來,我們還需要配置 webpack
,使 index.js
導出的生命週期鉤子函數可以被 qiankun
識別獲取。
我們需要藉助 react-app-rewired
來幫助我們修改 webpack
的配置,我們直接安裝該插件:
npm install react-app-rewired -D
在 react-app-rewired
安裝完成後,我們還需要修改 package.json
的 scripts
選項,修改爲由 react-app-rewired
啓動應用,就像下面這樣
// micro-app-react/package.json
//...
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
}
在 react-app-rewired
配置完成後,我們新建 config-overrides.js
文件來配置 webpack
,代碼實現如下:
const path = require("path");
module.exports = {
webpack: (config) => {
// 微應用的包名,這裏與主應用中註冊的微應用名稱一致
config.output.library = `ReactMicroApp`;
// 將你的 library 暴露爲所有的模塊定義下都可運行的方式
config.output.libraryTarget = "umd";
// 按需加載相關,設置爲 webpackJsonp_VueMicroApp 即可
config.output.jsonpFunction = `webpackJsonp_ReactMicroApp`;
config.resolve.alias = {
...config.resolve.alias,
"@": path.resolve(__dirname, "src"),
};
return config;
},
devServer: function (configFunction) {
return function (proxy, allowedHost) {
const config = configFunction(proxy, allowedHost);
// 關閉主機檢查,使微應用可以被 fetch
config.disableHostCheck = true;
// 配置跨域請求頭,解決開發環境的跨域問題
config.headers = {
"Access-Control-Allow-Origin": "*",
};
// 配置 history 模式
config.historyApiFallback = true;
return config;
};
},
};
我們需要重點關注一下 output
選項,當我們把 libraryTarget
設置爲 umd
後,我們的 library
就暴露爲所有的模塊定義下都可運行的方式了,主應用就可以獲取到微應用的生命週期鉤子函數了。
在 config-overrides.js
修改完成後,我們重新啓動 React
微應用,然後打開主應用基座 http://localhost:9999
。我們點擊左側菜單切換到微應用,此時我們的 React
微應用被正確加載啦!(見下圖)
此時我們打開控制檯,可以看到我們所執行的生命週期鉤子函數(見下圖)
到這裏,React
微應用就接入成功了!
接入 Angular
微應用
Angular
與 qiankun
目前的兼容性並不太好,接入 Angular
微應用需要一定的耐心與技巧。
對於選擇
Angular
技術棧的前端開發來說,對這類情況應該駕輕就熟(沒有辦法)。
我們以 實戰案例 - feature-inject-sub-apps 分支 爲例,我們在主應用的同級目錄(micro-app-main
同級目錄),使用 @angular/cli
先創建一個 Angular
的項目,在命令行運行如下命令:
ng new micro-app-angular
本文的 @angular/cli
選項如下圖所示,你也可以根據自己的喜好選擇配置。
然後,我們創建幾個路由頁面再加上一些樣式,最後效果如下:
註冊微應用
在創建好了 Angular
微應用後,我們可以開始我們的接入工作了。首先我們需要在主應用中註冊該微應用的信息,代碼實現如下:
// micro-app-main/src/micro/apps.ts
const apps = [
/**
* name: 微應用名稱 - 具有唯一性
* entry: 微應用入口 - 通過該地址加載微應用
* container: 微應用掛載節點 - 微應用加載完成後將掛載在該節點上
* activeRule: 微應用觸發的路由規則 - 觸發路由規則後將加載該微應用
*/
{
name: "AngularMicroApp",
entry: "//localhost:10300",
container: "#frame",
activeRule: "/angular",
},
];
export default apps;
通過上面的代碼,我們就在主應用中註冊了我們的 Angular
微應用,進入 /angular
路由時將加載我們的 Angular
微應用。
我們在菜單配置處也加入 Angular
微應用的快捷入口,代碼實現如下:
// micro-app-main/src/App.vue
//...
export default class App extends Vue {
/**
* 菜單列表
* key: 唯一 Key 值
* title: 菜單標題
* path: 菜單對應的路徑
*/
menus = [
{
key: "Home",
title: "主頁",
path: "/",
},
{
key: "AngularMicroApp",
title: "Angular 主頁",
path: "/angular",
},
{
key: "AngularMicroAppList",
title: "Angular 列表頁",
path: "/angular/list",
},
];
}
菜單配置完成後,我們的主應用基座效果圖如下
最後我們在主應用的入口文件,引入 zone.js
,代碼實現如下:
Angular
運行依賴於zone.js
。
qiankun
基於single-spa
實現,single-spa
明確指出一個項目的zone.js
只能存在一份實例,所以我們在主應用注入zone.js
。
// micro-app-main/src/main.js
// 爲 Angular 微應用所做的 zone 包注入
import "zone.js/dist/zone";
配置微應用
在主應用的工作完成後,我們還需要對微應用進行一系列的配置。首先,我們使用 single-spa-angular
生成一套配置,在命令行運行以下命令:
# 安裝 single-spa
yarn add single-spa -S
# 添加 single-spa-angular
ng add single-spa-angular
運行命令時,根據自己的需求選擇配置即可,本文配置如下:
在生成 single-spa
配置後,我們需要進行一些 qiankun
的接入配置。我們在 Angular
微應用的入口文件 main.single-spa.ts
中,導出 qiankun
主應用所需要的三個生命週期鉤子函數,代碼實現如下:
從上圖來分析:
第 21 行
:微應用獨立運行時,直接執行掛載函數掛載微應用。第 46 行
:微應用導出的生命週期鉤子函數 -bootstrap
。第 50 行
:微應用導出的生命週期鉤子函數 -mount
。第 54 行
:微應用導出的生命週期鉤子函數 -unmount
。
完整代碼實現如下:
// micro-app-angular/src/main.single-spa.ts
import { enableProdMode, NgZone } from "@angular/core";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { Router } from "@angular/router";
import { ɵAnimationEngine as AnimationEngine } from "@angular/animations/browser";
import {
singleSpaAngular,
getSingleSpaExtraProviders,
} from "single-spa-angular";
import { AppModule } from "./app/app.module";
import { environment } from "./environments/environment";
import { singleSpaPropsSubject } from "./single-spa/single-spa-props";
if (environment.production) {
enableProdMode();
}
// 微應用單獨啓動時運行
if (!(window as any).__POWERED_BY_QIANKUN__) {
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch((err) => console.error(err));
}
const { bootstrap, mount, unmount } = singleSpaAngular({
bootstrapFunction: (singleSpaProps) => {
singleSpaPropsSubject.next(singleSpaProps);
return platformBrowserDynamic(getSingleSpaExtraProviders()).bootstrapModule(
AppModule
);
},
template: "<app-root />",
Router,
NgZone,
AnimationEngine,
});
/** 主應用生命週期鉤子中運行 */
export {
/**
* bootstrap 只會在微應用初始化的時候調用一次,下次微應用重新進入時會直接調用 mount 鉤子,不會再重複觸發 bootstrap。
* 通常我們可以在這裏做一些全局變量的初始化,比如不會在 unmount 階段被銷燬的應用級別的緩存等。
*/
bootstrap,
/**
* 應用每次進入都會調用 mount 方法,通常我們在這裏觸發應用的渲染方法
*/
mount,
/**
* 應用每次 切出/卸載 會調用的方法,通常在這裏我們會卸載微應用的應用實例
*/
unmount,
};
在配置好了入口文件 main.single-spa.ts
後,我們還需要配置 webpack
,使 main.single-spa.ts
導出的生命週期鉤子函數可以被 qiankun
識別獲取。
我們直接配置 extra-webpack.config.js
即可,代碼實現如下:
// micro-app-angular/extra-webpack.config.js
const singleSpaAngularWebpack = require("single-spa-angular/lib/webpack")
.default;
const webpackMerge = require("webpack-merge");
module.exports = (angularWebpackConfig, options) => {
const singleSpaWebpackConfig = singleSpaAngularWebpack(
angularWebpackConfig,
options
);
const singleSpaConfig = {
output: {
// 微應用的包名,這裏與主應用中註冊的微應用名稱一致
library: "AngularMicroApp",
// 將你的 library 暴露爲所有的模塊定義下都可運行的方式
libraryTarget: "umd",
},
};
const mergedConfig = webpackMerge.smart(
singleSpaWebpackConfig,
singleSpaConfig
);
return mergedConfig;
};
我們需要重點關注一下 output
選項,當我們把 libraryTarget
設置爲 umd
後,我們的 library
就暴露爲所有的模塊定義下都可運行的方式了,主應用就可以獲取到微應用的生命週期鉤子函數了。
在 extra-webpack.config.js
修改完成後,我們還需要修改一下 package.json
中的啓動命令,修改如下:
// micro-app-angular/package.json
{
//...
"script": {
//...
// --disable-host-check: 關閉主機檢查,使微應用可以被 fetch
// --port: 監聽端口
// --base-href: 站點的起始路徑,與主應用中配置的一致
"start": "ng serve --disable-host-check --port 10300 --base-href /angular"
}
}
修改完成後,我們重新啓動 Angular
微應用,然後打開主應用基座 http://localhost:9999
。我們點擊左側菜單切換到微應用,此時我們的 Angular
微應用被正確加載啦!(見下圖)
到這裏,Angular
微應用就接入成功了!
接入 Jquery、xxx...
微應用
這裏的
Jquery、xxx...
微應用指的是沒有使用腳手架,直接採用html + css + js
三劍客開發的應用。本案例使用了一些高級
ES
語法,請使用谷歌瀏覽器運行查看效果。
我們以 實戰案例 - feature-inject-sub-apps 分支 爲例,我們在主應用的同級目錄(micro-app-main
同級目錄),手動創建目錄 micro-app-static
。
我們使用 express
作爲服務器加載靜態 html
,我們先編輯 package.json
,設置啓動命令和相關依賴。
// micro-app-static/package.json
{
"name": "micro-app-jquery",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "nodemon index.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.17.1",
"cors": "^2.8.5"
},
"devDependencies": {
"nodemon": "^2.0.2"
}
}
然後添加入口文件 index.js
,代碼實現如下:
// micro-app-static/index.js
const express = require("express");
const cors = require("cors");
const app = express();
// 解決跨域問題
app.use(cors());
app.use('/', express.static('static'));
// 監聽端口
app.listen(10400, () => {
console.log("server is listening in http://localhost:10400")
});
使用 npm install
安裝相關依賴後,我們使用 npm start
啓動應用。
我們新建 static
文件夾,在文件夾內新增一個靜態頁面 index.html
(代碼在後面會貼出),加上一些樣式後,打開瀏覽器,最後效果如下:
註冊微應用
在創建好了 Static
微應用後,我們可以開始我們的接入工作了。首先我們需要在主應用中註冊該微應用的信息,代碼實現如下:
// micro-app-main/src/micro/apps.ts
const apps = [
/**
* name: 微應用名稱 - 具有唯一性
* entry: 微應用入口 - 通過該地址加載微應用
* container: 微應用掛載節點 - 微應用加載完成後將掛載在該節點上
* activeRule: 微應用觸發的路由規則 - 觸發路由規則後將加載該微應用
*/
{
name: "StaticMicroApp",
entry: "//localhost:10400",
container: "#frame",
activeRule: "/static"
},
];
export default apps;
通過上面的代碼,我們就在主應用中註冊了我們的 Static
微應用,進入 /static
路由時將加載我們的 Static
微應用。
我們在菜單配置處也加入 Static
微應用的快捷入口,代碼實現如下:
// micro-app-main/src/App.vue
//...
export default class App extends Vue {
/**
* 菜單列表
* key: 唯一 Key 值
* title: 菜單標題
* path: 菜單對應的路徑
*/
menus = [
{
key: "Home",
title: "主頁",
path: "/"
},
{
key: "StaticMicroApp",
title: "Static 微應用",
path: "/static"
}
];
}
菜單配置完成後,我們的主應用基座效果圖如下
配置微應用
在主應用註冊好了微應用後,我們還需要直接寫微應用 index.html
的代碼即可,代碼實現如下:
從上圖來分析:
第 70 行
:微應用的掛載函數,在主應用中運行時將在mount
生命週期鉤子函數中調用,可以保證在沙箱內運行。第 77 行
:微應用獨立運行時,直接執行render
函數掛載微應用。第 88 行
:微應用註冊的生命週期鉤子函數 -bootstrap
。第 95 行
:微應用註冊的生命週期鉤子函數 -mount
。第 102 行
:微應用註冊的生命週期鉤子函數 -unmount
。
完整代碼實現如下:
<!-- micro-app-static/static/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<!-- 引入 bootstrap -->
<link
href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css"
rel="stylesheet"
/>
<title>Jquery App</title>
</head>
<body>
<section
id="jquery-app-container"
style="padding: 20px; color: blue;"
></section>
</body>
<!-- 引入 jquery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
/**
* 請求接口數據,構建 HTML
*/
async function buildHTML() {
const result = await fetch("http://dev-api.jt-gmall.com/mall", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
// graphql 的查詢風格
body: JSON.stringify({
query: `{ vegetableList (page: 1, pageSize: 20) { page, pageSize, total, items { _id, name, poster, price } } }`,
}),
}).then((res) => res.json());
const list = result.data.vegetableList.items;
const html = `<table class="table">
<thead>
<tr>
<th scope="col">菜名</th>
<th scope="col">圖片</th>
<th scope="col">報價</th>
</tr>
</thead>
<tbody>
${list
.map(
(item) => `
<tr>
<td>
<img style="width: 40px; height: 40px; border-radius: 100%;" src="${item.poster}"></img>
</td>
<td>${item.name}</td>
<td>¥ ${item.price}</td>
</tr>
`
)
.join("")}
</tbody>
</table>`;
return html;
}
/**
* 渲染函數
* 兩種情況:主應用生命週期鉤子中運行 / 微應用單獨啓動時運行
*/
const render = async ($) => {
const html = await buildHTML();
$("#jquery-app-container").html(html);
return Promise.resolve();
};
// 獨立運行時,直接掛載應用
if (!window.__POWERED_BY_QIANKUN__) {
render($);
}
((global) => {
/**
* 註冊微應用生命週期鉤子函數
* global[appName] 中的 appName 與主應用中註冊的微應用名稱一致
*/
global["StaticMicroApp"] = {
/**
* bootstrap 只會在微應用初始化的時候調用一次,下次微應用重新進入時會直接調用 mount 鉤子,不會再重複觸發 bootstrap。
* 通常我們可以在這裏做一些全局變量的初始化,比如不會在 unmount 階段被銷燬的應用級別的緩存等。
*/
bootstrap: () => {
console.log("MicroJqueryApp bootstraped");
return Promise.resolve();
},
/**
* 應用每次進入都會調用 mount 方法,通常我們在這裏觸發應用的渲染方法
*/
mount: () => {
console.log("MicroJqueryApp mount");
return render($);
},
/**
* 應用每次 切出/卸載 會調用的方法,通常在這裏我們會卸載微應用的應用實例
*/
unmount: () => {
console.log("MicroJqueryApp unmount");
return Promise.resolve();
},
};
})(window);
</script>
</html>
在構建好了 Static
微應用後,我們打開主應用基座 http://localhost:9999
。我們點擊左側菜單切換到微應用,此時可以看到,我們的 Static
微應用被正確加載啦!(見下圖)
此時我們打開控制檯,可以看到我們所執行的生命週期鉤子函數(見下圖)
到這裏,Static
微應用就接入成功了!
擴展閱讀
如果在 Static
微應用的 html
中注入 SPA
路由功能的話,將演變成單頁應用,只需要在主應用中註冊一次。
如果是多個 html
的多頁應用 - MPA
,則需要在服務器(或反向代理服務器)中通過 referer
頭返回對應的 html
文件,或者在主應用中註冊多個微應用(不推薦)。
小結
最後,我們所有微應用都註冊在主應用和主應用的菜單中,效果圖如下:
從上圖可以看出,我們把不同技術棧 Vue、React、Angular、Jquery...
的微應用都已經接入到主應用基座中啦!
最後一件事
如果您已經看到這裏了,希望您還是點個 贊
再走吧~
您的 點贊
是對作者的最大鼓勵,也可以讓更多人看到本篇文章!
如果感興趣的話,請關注 博客 或者關注作者即可獲取最新動態!
隨着前端職責的日益增加,微前端架構可能成爲未來的趨勢,感興趣的童鞋可以加羣一起探討微前端技術呀!