微前端架構實踐(二)

2022-06-16 15:21:12 字數 1319 閱讀 4212

安裝 qiankun

yarn add qiankun # 或者 npm i qiankun -s

在主應用中註冊微應用

, ,

container: '#yourcontainer2',

activerule: '/youractiverule2',

},]);start();

當微應用資訊註冊完之後,一旦瀏覽器的 url 發生變化,便會自動觸發 qiankun 的匹配邏輯,所有 activerule 規則匹配上的微應用就會被插入到指定的 container 中,同時依次呼叫微應用暴露出的生命週期鉤子。

如果微應用不是直接跟路由關聯的時候,你也可以選擇手動載入微應用的方式:

);微應用不需要額外安裝任何其他依賴即可接入 qiankun 主應用。

微應用需要在自己的入口 js (通常就是你配置的 webpack 的 entry js) 匯出bootstrapmountunmount三個生命週期鉤子,以供主應用在適當的時機呼叫。

/*

* * 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 與架構本身相關的一些質量屬...