qiankun: 乙個基於 single-spa 的微前端實現庫，旨在幫助大家能更簡單、**的構建乙個生產可用微前端架構系統。孵化自螞蟻金融科技基於微前端架構的雲產品統一接入平台
這裡使用react建立# 2,.執行專案
# 4.安裝外掛程式
# 5.新建配置檔案, 在根目錄建立 config-overrides.js檔案
# 6.配置專案
module.exports =
, // extend/override the dev server configuration used by cra
devserver: function(configfunction)
return config;};
},};# 7.修改package.json
"scripts"
:
首先，需要按照qiankun.js 約定 匯出四個方法： bootstrap， mount， unmount， update設定資源載入路徑：webpack_public_path= window.injected_public_path_by_qiankun， 需要判斷是否在qiankun內執行
環境判斷： window.powered_by_qiankun
import react from 'react';
import reactdom from 'react-dom';
import './index.css';
import reportwebvitals from './reportwebvitals';
function render(dom, props = {})
// 如果是單獨執行專案，則直接渲染
if (!window.__powered_by_qiankun__)
// to log results (for example: reportwebvitals(console.log))
// or send to an analytics endpoint. learn more:
reportwebvitals();
if (window.__powered_by_qiankun__)
/** * bootstrap 只會在微應用初始化的時候呼叫一次，下次微應用重新進入時會直接呼叫 mount 鉤子，不會再重複觸發 bootstrap。
* 通常我們可以在這裡做一些全域性變數的初始化，比如不會在 unmount 階段被銷毀的應用級別的快取等。
*/export async function bootstrap()
/** * 應用每次進入都會呼叫 mount 方法，通常我們在這裡觸發應用的渲染方法
*/export async function mount(props)
/** * 應用每次 切出/解除安裝 會呼叫的方法，通常在這裡我們會解除安裝微應用的應用例項
*/export async function unmount(props)
/** */
export async function update(props)
到此為止，子系統建立完畢
base系統，既系統基座，通過這個系統，將其他系統整合起來# 2.執行專案
# 3.安裝qiankun外掛程式
yarn add qiankun # 或者 npm i qiankun -s
# 4.在入口檔案註冊微應用
// 主應用入口檔案
import react from 'react';
import reactdom from 'react-dom';
import './index.css';
reactdom.render(
document.getelementbyid('root')
);let child1 = // 自定義屬性
}let child2 =
}// 註冊微引用
// 啟動
start()
新增子應用容器元素，id使用註冊是定義的子應用id新增路由，這裡使用react-router
// 主應用入口檔案
import from '@reach/router'
import home from './home'
return (
// 新增路由 切換微應用以及 主應內容
home |
// 顯示子應用
);}
執行主應用到這裡， 我們就在完成了基本得微前端架構， 乙個主應用。兩個微應用
這裡使用qiankun提供的initglobalstate在主應用初始化status
// 主應用入口檔案
import react from 'react';
import reactdom from 'react-dom';
import './index.css';
// 引入 initglobalstate， 建立乙個共享資料
const actions = initglobalstate()
actions.onglobalstatechange((state, prev) => );
reactdom.render(
document.getelementbyid('root')
);let child1 = // 自定義屬性
}let child2 =
}// 註冊微引用
// 啟動
start()
在子應用入口檔案匯出的mount方法中新增如下內容
// 從生命週期 mount 中獲取通訊方法，使用方式和 master 一致
export
function
mount
(props));
// 更新資料
props.
setglobalstate
(state)
;}
這邊我是使用了發布訂閱，實現 應用之間通訊在主應用下新增發布訂閱檔案
// 臨時手寫 減少**量，專案中請參照node event模組自行分裝
const event =
,listen
(key, fn)
this
.clientlist[key]
.push
(fn)
// 訂閱的訊息新增進快取列表},
trigger
(type, money)
fns.
foreach
(fn =>)}
}export
default event
匯入發布訂閱檔案，並通過自定props傳遞給子應用
// 主應用入口檔案
import react from 'react';
import reactdom from 'react-dom';
import './index.css';
// 元件之間通訊
import event from './utils/event'
// 引入 initglobalstate， 建立乙個共享資料
const actions = initglobalstate()
actions.onglobalstatechange((state, prev) => );
reactdom.render(
document.getelementbyid('root')
);let child1 = // 自定義屬性
}let child2 =
}// 註冊微引用
// 啟動
start()
子應用訂閱/觸發事件
子應用需要從props中拿到event物件，然後訂閱/ 觸發事件
/**
* @desc 發布事件
*/const setchange = () =>
// 接收事件
const onchange = (...args) =>
/***/
const triggerevent = () =>
/*** @param args
*/const listener = (...args) =>
// 微應用時才執行
if (window.__powered_by_qiankun__)
到這裡， 微前端架構的資料共享，應用通訊已經完成，關於動態註冊應用，樣式隔離, 抽離公共依賴庫等優化可以自行檢視文件，個人公司沒有使用該架構，這裡只用來學習，相對demo會比較粗糙最後附上完成**
手寫乙個微前端，qiankunjs
window.powered by qiankun true let module null const pushstate history.pushstate history.pushstate args export const start 處理函式 如果沒有匹配的子應用，則不處理 若上一次掛載...
微前端 跨域 做個微前端demo
之前已經分享過微前端，至於落地還是不落地就看公司和專案了，今天基於微前端做了個小demo，分享一下。可以去qiankun官網看看，包括微前端核心設計理念 為什麼不是ifram和快速上手及一些問題都很清楚。因為自己一直用的都是vue，所以基座和子應用都是用vue腳手架快速搭建，至於接入react和jq...
微前端 前端專案拆解簡述
1 系統龐大，涉及多個角色，角色互串，導致功能與功能之間的關係不清晰 2 角色對應的頁面劃分不清晰，系統和系統之間混雜在一起 3 前端專案過大，前端效能低下 4 組員多，專案管理難 1 角色清晰 角色所屬功能清晰 2 專案解耦，便於維護管理 3 專案上線，完全不會影響現有功能 4 效能進一步提公升 ...