qiankun微前端初體驗

什麼是微前端

通俗易懂的來講，微前端是能夠將一個大應用的不一樣部分進行獨立的部署，各個部分之間相互獨立，獨立部署的能力容許他們構建孤立或鬆散耦合的服務。 即將單頁面前端應用由單一的單體應用轉變爲多個小型前端應用聚合爲一的應用。

微前端的核心設計理念

• 技術棧無關

主框架不限制接入應用的技術棧，微應用具有徹底自主權

• 獨立開發、獨立部署

微應用倉庫獨立，先後端可獨立開發，部署完成後主框架自動完成同步更新

• 增量升級

在面對各類複雜場景時，咱們一般很難對一個已經存在的系統作全量的技術棧升級或重構，而微前端是一種很是好的實施漸進式重構的手段和策略

• 獨立運行時

每一個微應用之間狀態隔離，運行時狀態不共享

微前端的核心目標是將巨石應用拆解成若干個能夠獨立的子應用

qiankun是一個基於single-spa的微前端實現庫

qiankun快速上手

qiankun官網qiankun.umijs.org/zh/ 具體的代碼示例 github上有一些qiankun的示例代碼github.com/zhjing1019/…

主應用

主應用不限技術棧，只須要提供一個容器 DOM，而後註冊微應用並 start 便可。

yarn add qiankun # 或者 npm i qiankun -S
複製代碼

import { registerMicroApps, start } from 'qiankun';

/** * 在主應用中註冊微應用 */
registerMicroApps([
    {
      name: 'vue sub-app1',
      entry: '//localhost:7100/sub.html',
      container: '#yourContainer',
      activeRule: '/yourActiveRule',
    },
    {
      name: 'vue sub-app2',
      entry: '//localhost:7101',
      container: '#yourContainer',
      activeRule: '/yourActiveRule',
    },
  ],
  {
    beforeLoad: [
      app => {
        console.log('before load', app);
      },
    ],
    beforeMount: [
      app => {
        console.log('before mount', app);
      },
    ],
    afterMount: [
      app => {
        console.log('after mount', app);
      },
    ],
    afterUnmount: [
      app => {
        console.log('after unload', app);
        app.render({appContent: '', loading: false});
      },
    ],
  }
);

start();
複製代碼

註冊微應用

當微應用信息註冊完以後，一旦瀏覽器的 url 發生變化，便會自動觸發 qiankun 的匹配邏輯，全部 activeRule 規則匹配上的微應用就會被插入到指定的 container 中，同時依次調用微應用暴露出的生命週期鉤子 微應用須要在本身的入口 js (一般就是你配置的 webpack 的 entry js) 導出 bootstrap、mount、unmount 三個生命週期鉤子，以供主應用在適當的時機調用。 微應用不須要額外安裝任何其餘依賴便可接入 qiankun 主應用。

/** * bootstrap 只會在微應用初始化的時候調用一次，下次微應用從新進入時會直接調用 mount 鉤子，不會再重複觸發 bootstrap。 * 一般咱們能夠在這裏作一些全局變量的初始化，好比不會在 unmount 階段被銷燬的應用級別的緩存等。 */
export async function bootstrap() {
  console.log('react app bootstraped');
}

/** * 應用每次進入都會調用 mount 方法，一般咱們在這裏觸發應用的渲染方法 */
export async function mount(props) {
  ReactDOM.render(<App />, props.container ? props.container.querySelector('#root') : document.getElementById('root'));
}

/** * 應用每次 切出/卸載 會調用的方法，一般在這裏咱們會卸載微應用的應用實例 */
export async function unmount(props) {
  ReactDOM.unmountComponentAtNode(
    props.container ? props.container.querySelector('#root') : document.getElementById('root'),
  );
}

/** * 可選生命週期鉤子，僅使用 loadMicroApp 方式加載微應用時生效 */
export async function update(props) {
  console.log('update props', props);
}
複製代碼

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-iIBEkuhJ-1618121559620)(無標題.resources/28012AE2-6DD0-419F-9199-FBD369B4B041.png)]

主應用和子應用項目通訊

initGloabalState(state) 定義全局狀態，並返回通訊方法，官方建議在主應用使用，微應用經過 props 獲取通訊方法。

• MicroAppStateActions
  • onGlobalStateChange: (callback: OnGlobalStateChangeCallback, fireImmediately?: boolean) => void， 在當前應用監聽全局狀態，有變動觸發 callback，fireImmediately = true 當即觸發 callback
  • setGlobalState: (state: Record<string, any>) => boolean， 按一級屬性設置全局狀態，微應用中只能修改已存在的一級屬性
  • offGlobalStateChange: () => boolean，移除當前應用的狀態監聽，微應用 umount 時會默認調用

主應用：

import { initGlobalState, MicroAppStateActions } from 'qiankun';

// 初始化 state
const actions: MicroAppStateActions = initGlobalState(state);

actions.onGlobalStateChange((state, prev) => {
  // state: 變動後的狀態; prev 變動前的狀態
  console.log(state, prev);
});
actions.setGlobalState(state);
actions.offGlobalStateChange();
複製代碼

子應用

// 從生命週期 mount 中獲取通訊方法，使用方式和 master 一致
export function mount(props) {
  props.onGlobalStateChange((state, prev) => {
    // state: 變動後的狀態; prev 變動前的狀態
    console.log(state, prev);
  });

  props.setGlobalState(state);
}
複製代碼

js變量隔離

每一個子應用都有相應的生命週期，同一時間內，只會有一個子應用的實例生效。js沙箱封裝在qiankun的生命週期中。 當一個子應用被銷燬，其js沙箱也就被銷燬。惟一不足的地方是，window的對象,沒法隔離,最好不要綁定原型。

css污染

一、scoped（暫時解決方案：主應用的樣式使用特殊class或者scoped） 二、主應用能夠經過設置 prefixCls 的方式避免衝突 三、配置 webpack 修改 less 變量

{
  loader: 'less-loader',
+ options: {
+   modifyVars: {
+     '@ant-prefix': 'yourPrefix',
+   },
+   javascriptEnabled: true,
+ },
}
複製代碼

qiankun的具體詳細解析源碼 www.jianshu.com/p/db08174fa…

歡迎關注個人我的技術博客 javascript藝術