安裝 qiankun
yarn add qiankun # 或者 npm i qiankun -s
在主應用中註冊微應用
, ,
container: '#yourcontainer2',
activerule: '/youractiverule2',
},]);start();
當微應用資訊註冊完之後，一旦瀏覽器的 url 發生變化，便會自動觸發 qiankun 的匹配邏輯，所有 activerule 規則匹配上的微應用就會被插入到指定的 container 中，同時依次呼叫微應用暴露出的生命週期鉤子。
如果微應用不是直接跟路由關聯的時候，你也可以選擇手動載入微應用的方式：
);微應用不需要額外安裝任何其他依賴即可接入 qiankun 主應用。
微應用需要在自己的入口 js (通常就是你配置的 webpack 的 entry js) 匯出bootstrap、mount、unmount三個生命週期鉤子，以供主應用在適當的時機呼叫。
/** * bootstrap 只會在微應用初始化的時候呼叫一次，下次微應用重新進入時會直接呼叫 mount 鉤子，不會再重複觸發 bootstrap。
* 通常我們可以在這裡做一些全域性變數的初始化，比如不會在 unmount 階段被銷毀的應用級別的快取等。 */
export async
function
bootstrap() /**
* 應用每次進入都會呼叫 mount 方法，通常我們在這裡觸發應用的渲染方法 */
export async
function
mount(props) /**
* 應用每次 切出/解除安裝 會呼叫的方法，通常在這裡我們會解除安裝微應用的應用例項 */
export async
function
unmount(props) /**
*/export async
function
update(props)
除了**中暴露出相應的生命週期鉤子之外，為了讓主應用能正確識別微應用暴露出來的一些資訊，微應用的打包工具需要增加如下配置：
const packagename = require('./package.json').name;
module.exports =-[name]`,
librarytarget: 'umd',
jsonpfunction: `webpackjsonp_$`,
},};
下面就是專案的具體實踐。
react 微前端實踐
最近花時間實踐了一下阿里 qiankun 微前端框架 主應用和子應用都使用react 實現，主應用伺服器使用golang語言 go chi框架實現，子應用實現簡單的對接，主應用配置好路由就可以訪問 專案還在持續完善中,專案實現目標 主應用只負責選單，使用者，路由，許可權管理等 子應用各司其責，熱插拔...
微保 Serverless 實踐之架構演進
微保團隊使用 serverless 技術的主要應用場景 前端開發同學，應用在bff層，目前接入的有小程式，h5 頁面。資料組同學，面向的風控和推薦演算法應用，做計算使用。早期，團隊使用經典的前後分離架構，前端開發與後端開發通過介面進行合作。合作流程如下圖所示 毫無疑問，前後端分離的架構有比較顯著的優...
軟體架構實踐閱讀筆記二
1 質量屬性 系統從設計 實現到部署的整個過程中考慮質量屬性的實現。質量屬性包括下列三類 1 系統的質量屬性。可用性 可修改性 效能 安全性 可測試性和易用性 2 受架構影響的商業屬性。上市時間 成本和收益 所希望的系統生命期的長短 目標市場 推出計畫 與老系統的整合 3 與架構本身相關的一些質量屬...