微前端框架之 single-spa 從入門到精通

李永寧發表於2022-01-24

前端框架

前序

目的

會使用single-spa開發專案，然後打包部署上線
刨析single-spa的原始碼原理
手寫一個自己的single-spa框架

過程

編寫示例專案
打包部署
框架原始碼解讀
手寫框架

關於微前端的介紹這裡就不再贅述了，網上有很多的文章，本文的重點在於刨析微前端框架single-spa的實現原理。

single-spa是一個很好的微前端基礎框架，qiankun框架就是基於single-spa來實現的，在single-spa的基礎上做了一層封裝，也解決了single-spa的一些缺陷。

因為single-spa是一個基礎的微前端框架，瞭解了它的實現原理，再去看其它的微前端框架，就會非常容易了。

提示

先熟悉基本使用，熟悉常用的API，可通過示例專案 + 官網相結合來達成
如果基礎比較好，可以先讀後面的手寫 single-spa 框架部分，再回來閱讀原始碼，效果可能會更好
文章中涉及到的所有程式碼都在 github（示例專案 + single-spa原始碼分析 + 手寫single-spa框架 + single-spa-vue原始碼分析）

示例專案

新建專案目錄，接下來的所有程式碼都會在該目錄中完成

mkdir micro-frontend && cd micro-frontend

示例程式碼都是通過vue來編寫的，當然也可以採用其它的，比如react或者原生JS等

子應用 app1

新建子應用

vue create app1

按圖選擇，去除一切專案不需要的干擾項，後面一路回車，等待應用建立完畢

配置子應用

以下所有的操作都在專案根目錄/micro-frontend/app1下完成

vue.config.js

在專案根目錄下新建vue.config.js檔案

const package = require('./package.json')
module.exports = {
  // 告訴子應用在這個地址載入靜態資源，否則會去基座應用的域名下載入
  publicPath: '//localhost:8081',
  // 開發伺服器
  devServer: {
    port: 8081
  },
  configureWebpack: {
    // 匯出umd格式的包，在全域性物件上掛載屬性package.name，基座應用需要通過這個全域性物件獲取一些資訊，比如子應用匯出的生命週期函式
    output: {
      // library的值在所有子應用中需要唯一
      library: package.name,
      libraryTarget: 'umd'
    }
  }
}

安裝`single-spa-vue`

npm i single-spa-vue -S

single-spa-vue負責為vue應用生成通用的生命週期鉤子，在子應用註冊到single-spa的基座應用時需要用到

改造入口檔案

// /src/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import singleSpaVue from 'single-spa-vue'

Vue.config.productionTip = false

const appOptions = {
  el: '#microApp',
  router,
  render: h => h(App)
}

// 支援應用獨立執行、部署，不依賴於基座應用
if (!window.singleSpaNavigate) {
  delete appOptions.el
  new Vue(appOptions).$mount('#app')
}

// 基於基座應用，匯出生命週期函式
const vueLifecycle = singleSpaVue({
  Vue,
  appOptions
})

export function bootstrap (props) {
  console.log('app1 bootstrap')
  return vueLifecycle.bootstrap(() => {})
}

export function mount (props) {
  console.log('app1 mount')
  return vueLifecycle.mount(() => {})
}

export function unmount (props) {
  console.log('app1 unmount')
  return vueLifecycle.unmount(() => {})
}

更改檢視檔案

<!-- /views/Home.vue -->
<template>
  <div class="home">
    <h1>app1 home page</h1>
  </div>
</template>

<!-- /views/About.vue -->
<template>
  <div class="about">
    <h1>app1 about page</h1>
  </div>
</template>

環境配置檔案

.env

應用獨立執行時的開發環境配置

NODE_ENV=development
VUE_APP_BASE_URL=/

.env.micro

作為子應用執行時的開發環境配置

NODE_ENV=development
VUE_APP_BASE_URL=/app1

.env.buildMicro

作為子應用構建生產環境bundle時的環境配置，但這裡的NODE_ENV為development，而不是production，是為了方便，這個方便其實single-spa帶來的弊端（js entry的弊端）

NODE_ENV=development
VUE_APP_BASE_URL=/app1

修改路由檔案

// /src/router/index.js
// ...
const router = new VueRouter({
  mode: 'history',
  // 通過環境變數來配置路由的 base url
  base: process.env.VUE_APP_BASE_URL,
  routes
})
// ...

修改`package.json`中的`script`

{
  "name": "app1",
  // ...
  "scripts": {
    // 獨立執行
    "serve": "vue-cli-service serve",
    // 作為子應用執行
    "serve:micro": "vue-cli-service serve --mode micro",
    // 構建子應用
    "build": "vue-cli-service build --mode buildMicro"
  },
 	// ...
}

啟動應用

應用獨立執行

npm run serve

當然下面的啟動方式也可以，只不過會在pathname的開頭加了/app1字首

npm run serve:micro

作為子應用執行

npm run serve:micro

作為獨立應用訪問

子應用 app2

在/micro-frontend目錄下新建子應用app2，步驟同app1，只需把過程中出現的'app1'字樣改成'app2'即可，vue.config.js中的8081改成8082`

啟動應用，作為獨立應用訪問

子應用 app3（react）

這部分內容於2020/08/30新增，為什麼後來新增這部分內容呢？是因為有同學希望增加一個react專案的示例，他們在整合react專案時遇到了一些困難，於是找時間就加了這部分內容；發現網上single-spa整合react的示例非常少，僅有的幾個看了下也是對官網示例的抄寫。

示例專案是基於react腳手架cra建立的，整個整合的過程中難點有兩個：

webpack的配置，這部分內容官網有提供
子應用入口的配置，單純看官方文件的示例專案根本跑不起來，或者即使跑起來也有問題，react和vue的整合還不一樣，react需要在主專案的配置中也加一點東西，這部分官網配置沒說，是通過single-spa-react原始碼看出來的

接下來就開始吧，在/micro-frontend目錄下通過cra腳手架新建子應用app3

安裝 app3

create-react-app app3

以下所有操作都在/micro-frontend/app3目錄下進行

安裝`react-router-dom`、`single-spa-react`

npm i react-router-dom single-spa-react -S

打散配置

打散專案的配置，方便更改webpack的配置內容，當然通過react-app-rewired覆寫預設配置應該也是可以的，官網也有提到，不過我這裡沒試，採用的是直接打散配置

npm run eject

更改 webpack 配置檔案

/config/webpack.config.js，官網

刪掉optimization部分，這部分配置和chunk有關，有動態生成的非同步chunk存在，會導致主應用無法配置，因為chunk的名字會變，其實這也是single-spa的缺陷，或者說採用JS entry的缺陷，JS entry建議將所有內容都打成一個bundle - app.js
更改entry和output部分

{
  ...
  entry: [
      paths.appIndexJs,
    ].filter(Boolean),
  output: {
    path: isEnvProduction ? paths.appBuild : undefined,
    filename: 'js/app.js',
    publicPath: '//localhost:3000',
    jsonpFunction: `webpackJsonp${appPackageJson.name}`,
    library: 'app3',
    libraryTarget: 'umd'
  },
  ...
}

專案入口檔案改造

我這裡將無關緊要的內容都刪了，只留了/src/index.js和/src/index.css

/src/index.js

由於文章內容太多，字數超出限制，這部分程式碼就通過圖片的形式來展示了，如果需要拷貝可去 github

/src/index.css

body {
  text-align: center;
}

啟動子應用

npm run start

瀏覽器訪問localhost:3000

基座應用 layout

在/micro-frontend目錄下新建基座應用，為了簡潔明瞭，新建專案時選擇的配置項和子應用一樣；在本示例中基座應用採用了vue來實現，用別的方式或者框架實現也可以，比如自己用webpack構建一個專案。

以下操作都在/micro-frontend/layout目錄下進行

安裝`single-spa`

npm i single-spa -S

改造基座專案

入口檔案

// src/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import { registerApplication, start } from 'single-spa'

Vue.config.productionTip = false

// 遠端載入子應用
function createScript(url) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script')
    script.src = url
    script.onload = resolve
    script.onerror = reject
    const firstScript = document.getElementsByTagName('script')[0]
    firstScript.parentNode.insertBefore(script, firstScript)
  })
}

// 記載函式，返回一個 promise
function loadApp(url, globalVar) {
  // 支援遠端載入子應用
  return async () => {
    await createScript(url + '/js/chunk-vendors.js')
    await createScript(url + '/js/app.js')
    // 這裡的return很重要，需要從這個全域性物件中拿到子應用暴露出來的生命週期函式
    return window[globalVar]
  }
}

// 子應用列表
const apps = [
  {
    // 子應用名稱
    name: 'app1',
    // 子應用載入函式，是一個promise
    app: loadApp('http://localhost:8081', 'app1'),
    // 當路由滿足條件時（返回true），啟用（掛載）子應用
    activeWhen: location => location.pathname.startsWith('/app1'),
    // 傳遞給子應用的物件
    customProps: {}
  },
  {
    name: 'app2',
    app: loadApp('http://localhost:8082', 'app2'),
    activeWhen: location => location.pathname.startsWith('/app2'),
    customProps: {}
  },
  {
    // 子應用名稱
    name: 'app3',
    // 子應用載入函式，是一個promise
    app: loadApp('http://localhost:3000', 'app3'),
    // 當路由滿足條件時（返回true），啟用（掛載）子應用
    activeWhen: location => location.pathname.startsWith('/app3'),
    // 傳遞給子應用的物件，這個很重要，該配置告訴react子應用自己的容器元素是什麼，這塊兒和vue子應用的整合不一樣，官網並沒有說這部分，或者我沒找到，是通過看single-spa-react原始碼知道的
    customProps: {
      domElement: document.getElementById('microApp'),
      // 新增 name 屬性是為了相容自己寫的lyn-single-spa，原生的不需要，當然加了也不影響
      name: 'app3'
    }
  }
]

// 註冊子應用
for (let i = apps.length - 1; i >= 0; i--) {
  registerApplication(apps[i])
}

new Vue({
  router,
  mounted() {
    // 啟動
    start()
  },
  render: h => h(App)
}).$mount('#app')

App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/app1">app1</router-link> |
      <router-link to="/app2">app2</router-link>
    </div>
    <!-- 子應用容器 -->
    <div id = "microApp">
      <router-view/>
    </div>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

路由

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = []

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

啟動基座應用

npm run serve

瀏覽器訪問基座應用

終於看到了結果。

小技巧

有時候single-spa可能會報一些我們現在無法理解的錯誤，我們可能需要去做程式碼除錯，閱讀原始碼時碰到不理解的地方也需要編寫示例 + 單步除錯，但是預設的是已經打包壓縮後的程式碼，不太方便做這些，大家可以在node_modules目錄找到single-spa目錄，把目錄下的package.json中的module欄位的值改為lib/single-spa.dev.js，這是一個未壓縮的bundle，利於程式碼的閱讀的除錯，當然需要重啟應用。

子應用也是一樣類似的技巧，因為single-spa-vue就一個檔案，可以直接拷貝出來放到專案的/src目錄下，將main.js中的引入的single-spa-vue改成當前目錄即可。

打包部署

打包

在各個專案的根目錄下分別執行

npm run build

部署

可以將打包後的bundle釋出到nginx伺服器上，這個nginx伺服器可以是單獨的伺服器、或者虛擬機器、亦或是docker容器都行，這裡採用serve在本地模擬部署

如果你有條件部署到nginx上，需要注意nginx的代理配置

對於子應用靜態資源的載入只需要攔截相應的字首將請求轉發到對應子應用的目錄下即可
頁面重新整理只需要攔截到主應用即可，主應用內部自己根據activeWhen去掛載對應的子應用

全域性安裝 serve

npm i serve -g

在各個專案的根目錄下啟動 serve

serve ./dist -p port

在瀏覽器訪問基座應用的地址，發現得到和剛才一樣的結果

single-spa 原始碼分析

整個閱讀過程以示例專案為例，閱讀原始碼時一定要多動手寫註釋、做筆記，遇到不理解的地方編寫示例程式碼 + console.log + 單步除錯，切記不要只看不動手。

single-spa 原始碼閱讀思維導圖

這是我在閱讀時整理的一個思維導圖，原始碼中也寫了大量的註釋，大家可以參照著進行閱讀。Ok ！！這就開始吧

從原始碼目錄中可以看到，single-spa是使用rollup來打包的，從rollup.config.js中可以發現入口是single-spa.js，
開啟會發現裡面匯出了一大堆東西，有我們非常熟悉的各個方法，我們就從registerApplication方法開始

registerApplication 註冊子應用

single-spa/src/applications/apps.js

/**
 * 註冊應用，兩種方式
 * registerApplication('app1', loadApp(url), activeWhen('/app1'), customProps)
 * registerApplication({
 *    name: 'app1',
 *    app: loadApp(url),
 *    activeWhen: activeWhen('/app1'),
 *    customProps: {}
 * })
 * @param {*} appNameOrConfig 應用名稱或者應用配置物件
 * @param {*} appOrLoadApp 應用的載入方法，是一個 promise
 * @param {*} activeWhen 判斷應用是否啟用的一個方法，方法返回 true or false
 * @param {*} customProps 傳遞給子應用的 props 物件
 */
export function registerApplication(
  appNameOrConfig,
  appOrLoadApp,
  activeWhen,
  customProps
) {
  /**
   * 格式化使用者傳遞的應用配置引數
   * registration = {
   *    name: 'app1',
   *    loadApp: 返回promise的函式,
   *    activeWhen: 返回boolean值的函式,
   *    customProps: {},
   * }
   */
  const registration = sanitizeArguments(
    appNameOrConfig,
    appOrLoadApp,
    activeWhen,
    customProps
  );

  // 判斷應用是否重名
  if (getAppNames().indexOf(registration.name) !== -1)
    throw Error(
      formatErrorMessage(
        21,
        __DEV__ &&
          `There is already an app registered with name ${registration.name}`,
        registration.name
      )
    );

  // 將各個應用的配置資訊都存放到 apps 陣列中
  apps.push(
    // 給每個應用增加一個內建屬性
    assign(
      {
        loadErrorTime: null,
        // 最重要的，應用的狀態
        status: NOT_LOADED,
        parcels: {},
        devtools: {
          overlays: {
            options: {},
            selectors: [],
          },
        },
      },
      registration
    )
  );

  // 瀏覽器環境執行
  if (isInBrowser) {
    // https://zh-hans.single-spa.js.org/docs/api#ensurejquerysupport
    // 如果頁面中使用了jQuery，則給jQuery打patch
    ensureJQuerySupport();
    reroute();
  }
}

sanitizeArguments 格式化使用者傳遞的子應用配置引數

single-spa/src/applications/apps.js

// 返回處理後的應用配置物件
function sanitizeArguments(
  appNameOrConfig,
  appOrLoadApp,
  activeWhen,
  customProps
) {
  // 判斷第一個引數是否為物件
  const usingObjectAPI = typeof appNameOrConfig === "object";

  // 初始化應用配置物件
  const registration = {
    name: null,
    loadApp: null,
    activeWhen: null,
    customProps: null,
  };

  if (usingObjectAPI) {
    // 註冊應用的時候傳遞的引數是物件
    validateRegisterWithConfig(appNameOrConfig);
    registration.name = appNameOrConfig.name;
    registration.loadApp = appNameOrConfig.app;
    registration.activeWhen = appNameOrConfig.activeWhen;
    registration.customProps = appNameOrConfig.customProps;
  } else {
    // 引數列表
    validateRegisterWithArguments(
      appNameOrConfig,
      appOrLoadApp,
      activeWhen,
      customProps
    );
    registration.name = appNameOrConfig;
    registration.loadApp = appOrLoadApp;
    registration.activeWhen = activeWhen;
    registration.customProps = customProps;
  }

  // 如果第二個引數不是一個函式，比如是一個包含已經生命週期的物件，則包裝成一個返回 promise 的函式
  registration.loadApp = sanitizeLoadApp(registration.loadApp);
  // 如果使用者沒有提供 props 物件，則給一個預設的空物件
  registration.customProps = sanitizeCustomProps(registration.customProps);
  // 保證activeWhen是一個返回boolean值的函式
  registration.activeWhen = sanitizeActiveWhen(registration.activeWhen);

  // 返回處理後的應用配置物件
  return registration;
}

validateRegisterWithConfig

single-spa/src/applications/apps.js

/**
 * 驗證應用配置物件的各個屬性是否存在不合法的情況，存在則丟擲錯誤
 * @param {*} config = { name: 'app1', app: function, activeWhen: function, customProps: {} }
 */
export function validateRegisterWithConfig(config) {
  // 異常判斷，應用的配置物件不能是陣列或者null
  if (Array.isArray(config) || config === null)
    throw Error(
      formatErrorMessage(
        39,
        __DEV__ && "Configuration object can't be an Array or null!"
      )
    );
  // 配置物件只能包括這四個key
  const validKeys = ["name", "app", "activeWhen", "customProps"];
  // 找到配置物件存在的無效的key
  const invalidKeys = Object.keys(config).reduce(
    (invalidKeys, prop) =>
      validKeys.indexOf(prop) >= 0 ? invalidKeys : invalidKeys.concat(prop),
    []
  );
  // 如果存在無效的key，則丟擲一個錯誤
  if (invalidKeys.length !== 0)
    throw Error(
      formatErrorMessage(
        38,
        __DEV__ &&
          `The configuration object accepts only: ${validKeys.join(
            ", "
          )}. Invalid keys: ${invalidKeys.join(", ")}.`,
        validKeys.join(", "),
        invalidKeys.join(", ")
      )
    );
  // 驗證應用名稱，只能是字串，且不能為空
  if (typeof config.name !== "string" || config.name.length === 0)
    throw Error(
      formatErrorMessage(
        20,
        __DEV__ &&
          "The config.name on registerApplication must be a non-empty string"
      )
    );
  // app 屬性只能是一個物件或者函式
  // 物件是一個已被解析過的物件，是一個包含各個生命週期的物件；
  // 載入函式必須返回一個 promise
  // 以上資訊在官方文件中有提到：https://zh-hans.single-spa.js.org/docs/configuration
  if (typeof config.app !== "object" && typeof config.app !== "function")
    throw Error(
      formatErrorMessage(
        20,
        __DEV__ &&
          "The config.app on registerApplication must be an application or a loading function"
      )
    );
  // 第三個引數，可以是一個字串，也可以是一個函式，也可以是兩者組成的一個陣列，表示當前應該被啟用的應用的baseURL
  const allowsStringAndFunction = (activeWhen) =>
    typeof activeWhen === "string" || typeof activeWhen === "function";
  if (
    !allowsStringAndFunction(config.activeWhen) &&
    !(
      Array.isArray(config.activeWhen) &&
      config.activeWhen.every(allowsStringAndFunction)
    )
  )
    throw Error(
      formatErrorMessage(
        24,
        __DEV__ &&
          "The config.activeWhen on registerApplication must be a string, function or an array with both"
      )
    );
  // 傳遞給子應用的props物件必須是一個物件
  if (!validCustomProps(config.customProps))
    throw Error(
      formatErrorMessage(
        22,
        __DEV__ && "The optional config.customProps must be an object"
      )
    );
}

validateRegisterWithArguments

single-spa/src/applications/apps.js

// 同樣是驗證四個引數是否合法
function validateRegisterWithArguments(
  name,
  appOrLoadApp,
  activeWhen,
  customProps
) {
  if (typeof name !== "string" || name.length === 0)
    throw Error(
      formatErrorMessage(
        20,
        __DEV__ &&
          `The 1st argument to registerApplication must be a non-empty string 'appName'`
      )
    );

  if (!appOrLoadApp)
    throw Error(
      formatErrorMessage(
        23,
        __DEV__ &&
          "The 2nd argument to registerApplication must be an application or loading application function"
      )
    );

  if (typeof activeWhen !== "function")
    throw Error(
      formatErrorMessage(
        24,
        __DEV__ &&
          "The 3rd argument to registerApplication must be an activeWhen function"
      )
    );

  if (!validCustomProps(customProps))
    throw Error(
      formatErrorMessage(
        22,
        __DEV__ &&
          "The optional 4th argument is a customProps and must be an object"
      )
    );
}

sanitizeLoadApp

single-spa/src/applications/apps.js

// 保證第二個引數一定是一個返回 promise 的函式
function sanitizeLoadApp(loadApp) {
  if (typeof loadApp !== "function") {
    return () => Promise.resolve(loadApp);
  }

  return loadApp;
}

sanitizeCustomProps

single-spa/src/applications/apps.js

// 保證 props 不為 undefined
function sanitizeCustomProps(customProps) {
  return customProps ? customProps : {};
}

sanitizeActiveWhen

single-spa/src/applications/apps.js

// 得到一個函式，函式負責判斷瀏覽器當前地址是否和使用者給定的baseURL相匹配，匹配返回true，否則返回false
function sanitizeActiveWhen(activeWhen) {
  // []
  let activeWhenArray = Array.isArray(activeWhen) ? activeWhen : [activeWhen];
  // 保證陣列中每個元素都是一個函式
  activeWhenArray = activeWhenArray.map((activeWhenOrPath) =>
    typeof activeWhenOrPath === "function"
      ? activeWhenOrPath
      // activeWhen如果是一個路徑，則保證成一個函式
      : pathToActiveWhen(activeWhenOrPath)
  );

  // 返回一個函式，函式返回一個 boolean 值
  return (location) =>
    activeWhenArray.some((activeWhen) => activeWhen(location));
}

pathToActiveWhen

single-spa/src/applications/apps.js

export function pathToActiveWhen(path) {
  // 根據使用者提供的baseURL，生成正規表示式
  const regex = toDynamicPathValidatorRegex(path);

  // 函式返回boolean值，判斷當前路由是否匹配使用者給定的路徑
  return (location) => {
    const route = location.href
      .replace(location.origin, "")
      .replace(location.search, "")
      .split("?")[0];
    return regex.test(route);
  };
}

reroute 更改app.status和執行生命週期函式

single-spa/src/navigation/reroute.js

/**
 * 每次切換路由前，將應用分為4大類，
 * 首次載入時執行loadApp
 * 後續的路由切換執行performAppChange
 * 為四大類的應用分別執行相應的操作，比如更改app.status，執行生命週期函式
 * 所以，從這裡也可以看出來，single-spa就是一個維護應用的狀態機
 * @param {*} pendingPromises 
 * @param {*} eventArguments 
 */
export function reroute(pendingPromises = [], eventArguments) {
  // 應用正在切換，這個狀態會在執行performAppChanges之前置為true，執行結束之後再置為false
  // 如果在中間使用者重新切換路由了，即走這個if分支，暫時看起來就在陣列中儲存了一些資訊，沒看到有什麼用
  // 字面意思理解就是使用者等待app切換
  if (appChangeUnderway) {
    return new Promise((resolve, reject) => {
      peopleWaitingOnAppChange.push({
        resolve,
        reject,
        eventArguments,
      });
    });
  }

  // 將應用分為4大類
  const {
    // 需要被移除的
    appsToUnload,
    // 需要被解除安裝的
    appsToUnmount,
    // 需要被載入的
    appsToLoad,
    // 需要被掛載的
    appsToMount,
  } = getAppChanges();

  let appsThatChanged;

  // 是否已經執行 start 方法
  if (isStarted()) {
    // 已執行
    appChangeUnderway = true;
    // 所有需要被改變的的應用
    appsThatChanged = appsToUnload.concat(
      appsToLoad,
      appsToUnmount,
      appsToMount
    );
    // 執行改變
    return performAppChanges();
  } else {
    // 未執行
    appsThatChanged = appsToLoad;
    // 載入Apps
    return loadApps();
  }

  // 整體返回一個立即resolved的promise，通過微任務來載入apps
  function loadApps() {
    return Promise.resolve().then(() => {
      // 載入每個子應用，並做一系列的狀態變更和驗證（比如結果為promise、子應用要匯出生命週期函式）
      const loadPromises = appsToLoad.map(toLoadPromise);

      return (
        // 保證所有載入子應用的微任務執行完成
        Promise.all(loadPromises)
          .then(callAllEventListeners)
          // there are no mounted apps, before start() is called, so we always return []
          .then(() => [])
          .catch((err) => {
            callAllEventListeners();
            throw err;
          })
      );
    });
  }

  function performAppChanges() {
    return Promise.resolve().then(() => {
      // https://github.com/single-spa/single-spa/issues/545
      // 自定義事件，在應用狀態發生改變之前可觸發，給使用者提供搞事情的機會
      window.dispatchEvent(
        new CustomEvent(
          appsThatChanged.length === 0
            ? "single-spa:before-no-app-change"
            : "single-spa:before-app-change",
          getCustomEventDetail(true)
        )
      );

      window.dispatchEvent(
        new CustomEvent(
          "single-spa:before-routing-event",
          getCustomEventDetail(true)
        )
      );
      // 移除應用 => 更改應用狀態，執行unload生命週期函式，執行一些清理動作
      // 其實一般情況下這裡沒有真的移除應用
      const unloadPromises = appsToUnload.map(toUnloadPromise);

      // 解除安裝應用，更改狀態，執行unmount生命週期函式
      const unmountUnloadPromises = appsToUnmount
        .map(toUnmountPromise)
        // 解除安裝完然後移除，通過註冊微任務的方式實現
        .map((unmountPromise) => unmountPromise.then(toUnloadPromise));

      const allUnmountPromises = unmountUnloadPromises.concat(unloadPromises);

      const unmountAllPromise = Promise.all(allUnmountPromises);

      // 解除安裝全部完成後觸發一個事件
      unmountAllPromise.then(() => {
        window.dispatchEvent(
          new CustomEvent(
            "single-spa:before-mount-routing-event",
            getCustomEventDetail(true)
          )
        );
      });

      /* We load and bootstrap apps while other apps are unmounting, but we
       * wait to mount the app until all apps are finishing unmounting
       * 這個原因其實是因為這些操作都是通過註冊不同的微任務實現的，而JS是單執行緒執行，
       * 所以自然後續的只能等待前面的執行完了才能執行
       * 這裡一般情況下其實不會執行，只有手動執行了unloadApplication方法才會二次載入
       */
      const loadThenMountPromises = appsToLoad.map((app) => {
        return toLoadPromise(app).then((app) =>
          tryToBootstrapAndMount(app, unmountAllPromise)
        );
      });

      /* These are the apps that are already bootstrapped and just need
       * to be mounted. They each wait for all unmounting apps to finish up
       * before they mount.
       * 初始化和掛載app，其實做的事情很簡單，就是改變app.status，執行生命週期函式
       * 當然這裡的初始化和掛載其實是前後腳一起完成的(只要中間使用者沒有切換路由)
       */
      const mountPromises = appsToMount
        .filter((appToMount) => appsToLoad.indexOf(appToMount) < 0)
        .map((appToMount) => {
          return tryToBootstrapAndMount(appToMount, unmountAllPromise);
        });

      // 後面就沒啥了，可以理解為收尾工作
      return unmountAllPromise
        .catch((err) => {
          callAllEventListeners();
          throw err;
        })
        .then(() => {
          /* Now that the apps that needed to be unmounted are unmounted, their DOM navigation
           * events (like hashchange or popstate) should have been cleaned up. So it's safe
           * to let the remaining captured event listeners to handle about the DOM event.
           */
          callAllEventListeners();

          return Promise.all(loadThenMountPromises.concat(mountPromises))
            .catch((err) => {
              pendingPromises.forEach((promise) => promise.reject(err));
              throw err;
            })
            .then(finishUpAndReturn);
        });
    });
  }
}

getAppChanges

single-spa/src/applications/apps.js

// 將應用分為四大類
export function getAppChanges() {
  // 需要被移除的應用
  const appsToUnload = [],
    // 需要被解除安裝的應用
    appsToUnmount = [],
    // 需要被載入的應用
    appsToLoad = [],
    // 需要被掛載的應用
    appsToMount = [];

  // We re-attempt to download applications in LOAD_ERROR after a timeout of 200 milliseconds
  const currentTime = new Date().getTime();

  apps.forEach((app) => {
    // boolean，應用是否應該被啟用
    const appShouldBeActive =
      app.status !== SKIP_BECAUSE_BROKEN && shouldBeActive(app);

    switch (app.status) {
      // 需要被載入的應用
      case LOAD_ERROR:
        if (currentTime - app.loadErrorTime >= 200) {
          appsToLoad.push(app);
        }
        break;
      // 需要被載入的應用
      case NOT_LOADED:
      case LOADING_SOURCE_CODE:
        if (appShouldBeActive) {
          appsToLoad.push(app);
        }
        break;
      // 狀態為xx的應用
      case NOT_BOOTSTRAPPED:
      case NOT_MOUNTED:
        if (!appShouldBeActive && getAppUnloadInfo(toName(app))) {
          // 需要被移除的應用
          appsToUnload.push(app);
        } else if (appShouldBeActive) {
          // 需要被掛載的應用
          appsToMount.push(app);
        }
        break;
      // 需要被解除安裝的應用，已經處於掛載狀態，但現在路由已經變了的應用需要被解除安裝
      case MOUNTED:
        if (!appShouldBeActive) {
          appsToUnmount.push(app);
        }
        break;
      // all other statuses are ignored
    }
  });

  return { appsToUnload, appsToUnmount, appsToLoad, appsToMount };
}

shouldBeActive

single-spa/src/applications/app.helpers.js

// 返回boolean值，應用是否應該被啟用
export function shouldBeActive(app) {
  try {
    return app.activeWhen(window.location);
  } catch (err) {
    handleAppError(err, app, SKIP_BECAUSE_BROKEN);
    return false;
  }
}

toLoadPromise

single-spa/src/lifecycles/load.js

/**
 * 通過微任務載入子應用，其實singleSpa中很多地方都用了微任務
 * 這裡最終是return了一個promise出行，在註冊了載入子應用的微任務
 * 概括起來就是：
 *  更改app.status為LOAD_SOURCE_CODE => NOT_BOOTSTRAP，當然還有可能是LOAD_ERROR
 *  執行載入函式，並將props傳遞給載入函式，給使用者處理props的一個機會,因為這個props是一個完備的props
 *  驗證載入函式的執行結果，必須為promise，且載入函式內部必須return一個物件
 *  這個物件是子應用的，物件中必須包括各個必須的生命週期函式
 *  然後將生命週期方法通過一個函式包裹並掛載到app物件上
 *  app載入完成，刪除app.loadPromise
 * @param {*} app 
 */
export function toLoadPromise(app) {
  return Promise.resolve().then(() => {
    if (app.loadPromise) {
      // 說明app已經在被載入
      return app.loadPromise;
    }

    // 只有狀態為NOT_LOADED和LOAD_ERROR的app才可以被載入
    if (app.status !== NOT_LOADED && app.status !== LOAD_ERROR) {
      return app;
    }

    // 設定App的狀態
    app.status = LOADING_SOURCE_CODE;

    let appOpts, isUserErr;

    return (app.loadPromise = Promise.resolve()
      .then(() => {
        // 執行app的載入函式，並給子應用傳遞props => 使用者自定義的customProps和內建的比如應用的名稱、singleSpa例項
        // 其實這裡有個疑問，這個props是怎麼傳遞給子應用的，感覺跟後面的生命週期函式有關
        const loadPromise = app.loadApp(getProps(app));
        // 載入函式需要返回一個promise
        if (!smellsLikeAPromise(loadPromise)) {
          // The name of the app will be prepended to this error message inside of the handleAppError function
          isUserErr = true;
          throw Error(
            formatErrorMessage(
              33,
              __DEV__ &&
                `single-spa loading function did not return a promise. Check the second argument to registerApplication('${toName(
                  app
                )}', loadingFunction, activityFunction)`,
              toName(app)
            )
          );
        }
        // 這裡很重要，這個val就是示例專案中載入函式中return出來的window.singleSpa，這個屬性是子應用打包時設定的
        return loadPromise.then((val) => {
          app.loadErrorTime = null;

          // window.singleSpa
          appOpts = val;

          let validationErrMessage, validationErrCode;

          // 以下進行一系列的驗證，已window.singleSpa為例說明，簡稱g.s

          // g.s必須為物件
          if (typeof appOpts !== "object") {
            validationErrCode = 34;
            if (__DEV__) {
              validationErrMessage = `does not export anything`;
            }
          }

          // g.s必須匯出bootstrap生命週期函式
          if (!validLifecycleFn(appOpts.bootstrap)) {
            validationErrCode = 35;
            if (__DEV__) {
              validationErrMessage = `does not export a bootstrap function or array of functions`;
            }
          }

          // g.s必須匯出mount生命週期函式
          if (!validLifecycleFn(appOpts.mount)) {
            validationErrCode = 36;
            if (__DEV__) {
              validationErrMessage = `does not export a bootstrap function or array of functions`;
            }
          }

          // g.s必須匯出unmount生命週期函式
          if (!validLifecycleFn(appOpts.unmount)) {
            validationErrCode = 37;
            if (__DEV__) {
              validationErrMessage = `does not export a bootstrap function or array of functions`;
            }
          }

          const type = objectType(appOpts);

          // 說明上述驗證失敗，丟擲錯誤提示資訊
          if (validationErrCode) {
            let appOptsStr;
            try {
              appOptsStr = JSON.stringify(appOpts);
            } catch {}
            console.error(
              formatErrorMessage(
                validationErrCode,
                __DEV__ &&
                  `The loading function for single-spa ${type} '${toName(
                    app
                  )}' resolved with the following, which does not have bootstrap, mount, and unmount functions`,
                type,
                toName(app),
                appOptsStr
              ),
              appOpts
            );
            handleAppError(validationErrMessage, app, SKIP_BECAUSE_BROKEN);
            return app;
          }

          if (appOpts.devtools && appOpts.devtools.overlays) {
            // app.devtoolsoverlays新增子應用的devtools.overlays的屬性，不知道是幹嘛用的
            app.devtools.overlays = assign(
              {},
              app.devtools.overlays,
              appOpts.devtools.overlays
            );
          }

          // 設定app狀態為未初始化，表示載入完了
          app.status = NOT_BOOTSTRAPPED;
          // 在app物件上掛載生命週期方法，每個方法都接收一個props作為引數，方法內部執行子應用匯出的生命週期函式，並確保生命週期函式返回一個promise
          app.bootstrap = flattenFnArray(appOpts, "bootstrap");
          app.mount = flattenFnArray(appOpts, "mount");
          app.unmount = flattenFnArray(appOpts, "unmount");
          app.unload = flattenFnArray(appOpts, "unload");
          app.timeouts = ensureValidAppTimeouts(appOpts.timeouts);

          // 執行到這裡說明子應用已成功載入，刪除app.loadPromise屬性
          delete app.loadPromise;

          return app;
        });
      })
      .catch((err) => {
        // 載入失敗，稍後重新載入
        delete app.loadPromise;

        let newStatus;
        if (isUserErr) {
          newStatus = SKIP_BECAUSE_BROKEN;
        } else {
          newStatus = LOAD_ERROR;
          app.loadErrorTime = new Date().getTime();
        }
        handleAppError(err, app, newStatus);

        return app;
      }));
  });
}

getProps

single-spa/src/lifecycles/prop.helpers.js

/**
 * 得到傳遞給子應用的props
 * @param {} appOrParcel => app 
 * 以下返回內容其實在官網也都有提到，比如singleSpa例項，目的是為了子應用不需要重複引入single-spa
 * return {
 *    ...customProps,
 *    name,
 *    mountParcel: mountParcel.bind(appOrParcel),
 *    singleSpa, 
 * }
 */
export function getProps(appOrParcel) {
  // app.name
  const name = toName(appOrParcel);
  // app.customProps，以下對customProps物件的判斷邏輯有點多餘
  // 因為前面的引數格式化已經保證customProps肯定是一個物件
  let customProps =
    typeof appOrParcel.customProps === "function"
      ? appOrParcel.customProps(name, window.location)
      : appOrParcel.customProps;
  if (
    typeof customProps !== "object" ||
    customProps === null ||
    Array.isArray(customProps)
  ) {
    customProps = {};
    console.warn(
      formatErrorMessage(
        40,
        __DEV__ &&
          `single-spa: ${name}'s customProps function must return an object. Received ${customProps}`
      ),
      name,
      customProps
    );
  }

  const result = assign({}, customProps, {
    name,
    mountParcel: mountParcel.bind(appOrParcel),
    singleSpa,
  });

  if (isParcel(appOrParcel)) {
    result.unmountSelf = appOrParcel.unmountThisParcel;
  }

  return result;
}

smellsLikeAPromise

single-spa/src/lifecycles/lifecycle.helpers.js

// 判斷一個變數是否為promise
export function smellsLikeAPromise(promise) {
  return (
    promise &&
    typeof promise.then === "function" &&
    typeof promise.catch === "function"
  );
}

flattenFnArray

single-spa/src/lifecycles/lifecycle.helpers.js

/**
 * 返回一個接受props作為引數的函式，這個函式負責執行子應用中的生命週期函式，
 * 並確保生命週期函式返回的結果為promise
 * @param {*} appOrParcel => window.singleSpa，子應用打包後的物件
 * @param {*} lifecycle => 字串，生命週期名稱
 */
export function flattenFnArray(appOrParcel, lifecycle) {
  // fns = fn or []
  let fns = appOrParcel[lifecycle] || [];
  // fns = [] or [fn]
  fns = Array.isArray(fns) ? fns : [fns];
  // 有些生命週期函式子應用可能不會設定，比如unload
  if (fns.length === 0) {
    fns = [() => Promise.resolve()];
  }

  const type = objectType(appOrParcel);
  const name = toName(appOrParcel);

  return function (props) {
    // 這裡最後返回了一個promise鏈，這個操作似乎沒啥必要，因為不可能出現同名的生命週期函式，所以，這裡將生命週期函式放陣列，沒太理解目的是啥
    return fns.reduce((resultPromise, fn, index) => {
      return resultPromise.then(() => {
        // 執行生命週期函式，傳遞props給函式，並驗證函式的返回結果，必須為promise
        const thisPromise = fn(props);
        return smellsLikeAPromise(thisPromise)
          ? thisPromise
          : Promise.reject(
              formatErrorMessage(
                15,
                __DEV__ &&
                  `Within ${type} ${name}, the lifecycle function ${lifecycle} at array index ${index} did not return a promise`,
                type,
                name,
                lifecycle,
                index
              )
            );
      });
    }, Promise.resolve());
  };
}

toUnloadPromise

single-spa/src/lifecycles/unload.js

const appsToUnload = {};
/**
 * 移除應用，就更改一下應用的狀態，執行unload生命週期函式，執行清理操作
 * 
 * 其實一般情況是不會執行移除操作的，除非你手動呼叫unloadApplication方法
 * 單步除錯會發現appsToUnload物件是個空物件，所以第一個if就return了，這裡啥也沒做
 * https://zh-hans.single-spa.js.org/docs/api#unloadapplication
 * */ 
export function toUnloadPromise(app) {
  return Promise.resolve().then(() => {
    // 應用資訊
    const unloadInfo = appsToUnload[toName(app)];

    if (!unloadInfo) {
      /* No one has called unloadApplication for this app,
       * 不需要移除
       * 一般情況下都不需要移除，只有在呼叫unloadApplication方法手動執行移除時才會
       * 執行後面的內容
       */
      return app;
    }

    // 已經解除安裝了，執行一些清理操作
    if (app.status === NOT_LOADED) {
      /* This app is already unloaded. We just need to clean up
       * anything that still thinks we need to unload the app.
       */
      finishUnloadingApp(app, unloadInfo);
      return app;
    }

    // 如果應用正在執行掛載，路由突然發生改變，那麼也需要應用掛載完成才可以執行移除
    if (app.status === UNLOADING) {
      /* Both unloadApplication and reroute want to unload this app.
       * It only needs to be done once, though.
       */
      return unloadInfo.promise.then(() => app);
    }

    if (app.status !== NOT_MOUNTED) {
      /* The app cannot be unloaded until it is unmounted.
       */
      return app;
    }

    // 更改狀態為 UNLOADING
    app.status = UNLOADING;
    // 在合理的時間範圍內執行生命週期函式
    return reasonableTime(app, "unload")
      .then(() => {
        // 一些清理操作
        finishUnloadingApp(app, unloadInfo);
        return app;
      })
      .catch((err) => {
        errorUnloadingApp(app, unloadInfo, err);
        return app;
      });
  });
}

finishUnloadingApp

single-spa/src/lifecycles/unload.js

// 移除完成，執行一些清理動作，其實就是從appsToUnload陣列中移除該app，移除生命週期函式，更改app.status
// 但應用不是真的被移除，後面再啟用時不需要重新去下載資源,，只是做一些狀態上的變更，當然load的那個過程還是需要的，這點可能需要再確認一下
function finishUnloadingApp(app, unloadInfo) {
  delete appsToUnload[toName(app)];

  // Unloaded apps don't have lifecycles
  delete app.bootstrap;
  delete app.mount;
  delete app.unmount;
  delete app.unload;

  app.status = NOT_LOADED;

  /* resolve the promise of whoever called unloadApplication.
   * This should be done after all other cleanup/bookkeeping
   */
  unloadInfo.resolve();
}

reasonableTime

single-spa/src/applications/timeouts.js

/**
 * 合理的時間，即生命週期函式合理的執行時間
 * 在合理的時間內執行生命週期函式，並將函式的執行結果resolve出去
 * @param {*} appOrParcel => app
 * @param {*} lifecycle => 生命週期函式名
 */
export function reasonableTime(appOrParcel, lifecycle) {
  // 應用的超時配置
  const timeoutConfig = appOrParcel.timeouts[lifecycle];
  // 超時警告
  const warningPeriod = timeoutConfig.warningMillis;
  const type = objectType(appOrParcel);

  return new Promise((resolve, reject) => {
    let finished = false;
    let errored = false;

    // 這裡很關鍵，之前一直奇怪props是怎麼傳遞給子應用的，這裡就是了，果然和之前的猜想是一樣的
    // 是在執行生命週期函式時像子應用傳遞的props，所以之前執行loadApp傳遞props不會到子應用，
    // 那麼設計估計是給使用者自己處理props的一個機會吧，因為那個時候處理的props已經是{ ...customProps, ...內建props }
    appOrParcel[lifecycle](getProps(appOrParcel))
      .then((val) => {
        finished = true;
        resolve(val);
      })
      .catch((val) => {
        finished = true;
        reject(val);
      });

    // 下面就沒啥了，就是超時的一些提示資訊
    setTimeout(() => maybeTimingOut(1), warningPeriod);
    setTimeout(() => maybeTimingOut(true), timeoutConfig.millis);

    const errMsg = formatErrorMessage(
      31,
      __DEV__ &&
        `Lifecycle function ${lifecycle} for ${type} ${toName(
          appOrParcel
        )} lifecycle did not resolve or reject for ${timeoutConfig.millis} ms.`,
      lifecycle,
      type,
      toName(appOrParcel),
      timeoutConfig.millis
    );

    function maybeTimingOut(shouldError) {
      if (!finished) {
        if (shouldError === true) {
          errored = true;
          if (timeoutConfig.dieOnTimeout) {
            reject(Error(errMsg));
          } else {
            console.error(errMsg);
            //don't resolve or reject, we're waiting this one out
          }
        } else if (!errored) {
          const numWarnings = shouldError;
          const numMillis = numWarnings * warningPeriod;
          console.warn(errMsg);
          if (numMillis + warningPeriod < timeoutConfig.millis) {
            setTimeout(() => maybeTimingOut(numWarnings + 1), warningPeriod);
          }
        }
      }
    }
  });
}

toUnmountPromise

single-spa/src/lifecycles/unmount.js

/**
 * 執行了狀態上的更改
 * 執行unmount生命週期函式
 * @param {*} appOrParcel => app
 * @param {*} hardFail => 索引
 */
export function toUnmountPromise(appOrParcel, hardFail) {
  return Promise.resolve().then(() => {
    // 只解除安裝已掛載的應用
    if (appOrParcel.status !== MOUNTED) {
      return appOrParcel;
    }
    // 更改狀態
    appOrParcel.status = UNMOUNTING;

    // 有關parcels的一些處理，沒使用過parcels，所以unmountChildrenParcels = []
    const unmountChildrenParcels = Object.keys(
      appOrParcel.parcels
    ).map((parcelId) => appOrParcel.parcels[parcelId].unmountThisParcel());

    let parcelError;

    return Promise.all(unmountChildrenParcels)
      // 在合理的時間範圍內執行unmount生命週期函式
      .then(unmountAppOrParcel, (parcelError) => {
        // There is a parcel unmount error
        return unmountAppOrParcel().then(() => {
          // Unmounting the app/parcel succeeded, but unmounting its children parcels did not
          const parentError = Error(parcelError.message);
          if (hardFail) {
            throw transformErr(parentError, appOrParcel, SKIP_BECAUSE_BROKEN);
          } else {
            handleAppError(parentError, appOrParcel, SKIP_BECAUSE_BROKEN);
          }
        });
      })
      .then(() => appOrParcel);

    function unmountAppOrParcel() {
      // We always try to unmount the appOrParcel, even if the children parcels failed to unmount.
      return reasonableTime(appOrParcel, "unmount")
        .then(() => {
          // The appOrParcel needs to stay in a broken status if its children parcels fail to unmount
          if (!parcelError) {
            appOrParcel.status = NOT_MOUNTED;
          }
        })
        .catch((err) => {
          if (hardFail) {
            throw transformErr(err, appOrParcel, SKIP_BECAUSE_BROKEN);
          } else {
            handleAppError(err, appOrParcel, SKIP_BECAUSE_BROKEN);
          }
        });
    }
  });
}

tryToBootstrapAndMount

single-spa/src/navigation/reroute.js

/**
 * Let's imagine that some kind of delay occurred during application loading.
 * The user without waiting for the application to load switched to another route,
 * this means that we shouldn't bootstrap and mount that application, thus we check
 * twice if that application should be active before bootstrapping and mounting.
 * https://github.com/single-spa/single-spa/issues/524
 * 這裡這個兩次判斷還是很重要的
 */
function tryToBootstrapAndMount(app, unmountAllPromise) {
  if (shouldBeActive(app)) {
    // 一次判斷為true，才會執行初始化
    return toBootstrapPromise(app).then((app) =>
      unmountAllPromise.then(() =>
        // 第二次, 兩次都為true才會去掛載
        shouldBeActive(app) ? toMountPromise(app) : app
      )
    );
  } else {
    // 解除安裝
    return unmountAllPromise.then(() => app);
  }
}

toBootstrapPromise

single-spa/src/lifecycles/bootstrap.js

// 初始化app，更改app.status，在合理的時間內執行bootstrap生命週期函式
export function toBootstrapPromise(appOrParcel, hardFail) {
  return Promise.resolve().then(() => {
    if (appOrParcel.status !== NOT_BOOTSTRAPPED) {
      return appOrParcel;
    }

    appOrParcel.status = BOOTSTRAPPING;

    return reasonableTime(appOrParcel, "bootstrap")
      .then(() => {
        appOrParcel.status = NOT_MOUNTED;
        return appOrParcel;
      })
      .catch((err) => {
        if (hardFail) {
          throw transformErr(err, appOrParcel, SKIP_BECAUSE_BROKEN);
        } else {
          handleAppError(err, appOrParcel, SKIP_BECAUSE_BROKEN);
          return appOrParcel;
        }
      });
  });
}

toMountPromise

single-spa/src/lifecycles/mount.js

// 掛載app，執行mount生命週期函式，並更改app.status
export function toMountPromise(appOrParcel, hardFail) {
  return Promise.resolve().then(() => {
    if (appOrParcel.status !== NOT_MOUNTED) {
      return appOrParcel;
    }

    if (!beforeFirstMountFired) {
      window.dispatchEvent(new CustomEvent("single-spa:before-first-mount"));
      beforeFirstMountFired = true;
    }

    return reasonableTime(appOrParcel, "mount")
      .then(() => {
        appOrParcel.status = MOUNTED;

        if (!firstMountFired) {
          // single-spa其實在不同的階段提供了相應的自定義事件，讓使用者可以做一些事情
          window.dispatchEvent(new CustomEvent("single-spa:first-mount"));
          firstMountFired = true;
        }

        return appOrParcel;
      })
      .catch((err) => {
        // If we fail to mount the appOrParcel, we should attempt to unmount it before putting in SKIP_BECAUSE_BROKEN
        // We temporarily put the appOrParcel into MOUNTED status so that toUnmountPromise actually attempts to unmount it
        // instead of just doing a no-op.
        appOrParcel.status = MOUNTED;
        return toUnmountPromise(appOrParcel, true).then(
          setSkipBecauseBroken,
          setSkipBecauseBroken
        );

        function setSkipBecauseBroken() {
          if (!hardFail) {
            handleAppError(err, appOrParcel, SKIP_BECAUSE_BROKEN);
            return appOrParcel;
          } else {
            throw transformErr(err, appOrParcel, SKIP_BECAUSE_BROKEN);
          }
        }
      });
  });
}

start(opts)

single-spa/src/start.js

let started = false
/**
 * https://zh-hans.single-spa.js.org/docs/api#start
 * 呼叫start之前，應用會被載入，但不會初始化、掛載和解除安裝，有了start可以更好的控制應用的效能
 * @param {*} opts 
 */
export function start(opts) {
  started = true;
  if (opts && opts.urlRerouteOnly) {
    setUrlRerouteOnly(opts.urlRerouteOnly);
  }
  if (isInBrowser) {
    reroute();
  }
}

export function isStarted() {
  return started;
}

if (isInBrowser) {
  // registerApplication之後如果一直沒有呼叫start，則在5000ms後給出警告提示
  setTimeout(() => {
    if (!started) {
      console.warn(
        formatErrorMessage(
          1,
          __DEV__ &&
            `singleSpa.start() has not been called, 5000ms after single-spa was loaded. Before start() is called, apps can be declared and loaded, but not bootstrapped or mounted.`
        )
      );
    }
  }, 5000);
}

監聽路由變化

single-spa/src/navigation/navigation-events.js

以下程式碼會被打包進bundle的全域性作用域內，bundle被載入以後就會自動執行。這句提示不需要的話可自動忽略

/**
 * 監聽路由變化
 */
if (isInBrowser) {
  // We will trigger an app change for any routing events，監聽hashchange和popstate事件
  window.addEventListener("hashchange", urlReroute);
  window.addEventListener("popstate", urlReroute);

  // Monkeypatch addEventListener so that we can ensure correct timing
  /**
   * 擴充套件原生的addEventListener和removeEventListener方法
   * 每次註冊事件和事件處理函式都會將事件和處理函式儲存下來，當然移除時也會做刪除
   * */ 
  const originalAddEventListener = window.addEventListener;
  const originalRemoveEventListener = window.removeEventListener;
  window.addEventListener = function (eventName, fn) {
    if (typeof fn === "function") {
      if (
        // eventName只能是hashchange或popstate && 對應事件的fn註冊函式沒有註冊
        routingEventsListeningTo.indexOf(eventName) >= 0 &&
        !find(capturedEventListeners[eventName], (listener) => listener === fn)
      ) {
        // 註冊（儲存）eventName 事件的處理函式
        capturedEventListeners[eventName].push(fn);
        return;
      }
    }

    // 原生方法
    return originalAddEventListener.apply(this, arguments);
  };

  window.removeEventListener = function (eventName, listenerFn) {
    if (typeof listenerFn === "function") {
      // 從captureEventListeners陣列中移除eventName事件指定的事件處理函式
      if (routingEventsListeningTo.indexOf(eventName) >= 0) {
        capturedEventListeners[eventName] = capturedEventListeners[
          eventName
        ].filter((fn) => fn !== listenerFn);
        return;
      }
    }

    return originalRemoveEventListener.apply(this, arguments);
  };

  // 增強pushstate和replacestate
  window.history.pushState = patchedUpdateState(
    window.history.pushState,
    "pushState"
  );
  window.history.replaceState = patchedUpdateState(
    window.history.replaceState,
    "replaceState"
  );

  if (window.singleSpaNavigate) {
    console.warn(
      formatErrorMessage(
        41,
        __DEV__ &&
          "single-spa has been loaded twice on the page. This can result in unexpected behavior."
      )
    );
  } else {
    /* For convenience in `onclick` attributes, we expose a global function for navigating to
     * whatever an <a> tag's href is.
     * singleSpa暴露出來的一個全域性方法，使用者也可以基於它去判斷子應用是執行在基座應用上還是獨立執行
     */
    window.singleSpaNavigate = navigateToUrl;
  }
}

patchedUpdateState

single-spa/src/navigation/navigation-events.js

/**
 * 通過裝飾器模式，增強pushstate和replacestate方法，除了原生的操作歷史記錄，還會呼叫reroute
 * @param {*} updateState window.history.pushstate/replacestate
 * @param {*} methodName 'pushstate' or 'replacestate'
 */
function patchedUpdateState(updateState, methodName) {
  return function () {
    // 當前url
    const urlBefore = window.location.href;
    // pushstate或者replacestate的執行結果
    const result = updateState.apply(this, arguments);
    // pushstate或replacestate執行後的url地址
    const urlAfter = window.location.href;

    // 如果呼叫start傳遞了引數urlRerouteOnly為true，則這裡不會觸發reroute
    // https://zh-hans.single-spa.js.org/docs/api#start
    if (!urlRerouteOnly || urlBefore !== urlAfter) {
      urlReroute(createPopStateEvent(window.history.state, methodName));
    }

    return result;
  };
}

createPopStateEvent

single-spa/src/navigation/navigation-events.js

function createPopStateEvent(state, originalMethodName) {
  // https://github.com/single-spa/single-spa/issues/224 and https://github.com/single-spa/single-spa-angular/issues/49
  // We need a popstate event even though the browser doesn't do one by default when you call replaceState, so that
  // all the applications can reroute. We explicitly identify this extraneous event by setting singleSpa=true and
  // singleSpaTrigger=<pushState|replaceState> on the event instance.
  let evt;
  try {
    evt = new PopStateEvent("popstate", { state });
  } catch (err) {
    // IE 11 compatibility https://github.com/single-spa/single-spa/issues/299
    // https://docs.microsoft.com/en-us/openspecs/ie_standards/ms-html5e/bd560f47-b349-4d2c-baa8-f1560fb489dd
    evt = document.createEvent("PopStateEvent");
    evt.initPopStateEvent("popstate", false, false, state);
  }
  evt.singleSpa = true;
  evt.singleSpaTrigger = originalMethodName;
  return evt;
}

urlReroute

single-spa/src/navigation/navigation-events.js

export function setUrlRerouteOnly(val) {
  urlRerouteOnly = val;
}

function urlReroute() {
  reroute([], arguments);
}

小結

以上就是對整個single-spa框架原始碼的解讀，相信讀到這裡你會有不一樣的理解吧，當然第一遍讀完你有可能有點懵，我當時就是這樣，這時候就需要那句古話了，書讀百遍，其義自現（乾了這碗雞湯）

整個框架的原始碼讀完以後，你會發現：single-spa的原理其實很簡單，它就是一個子應用載入器 + 狀態機的結合體，而且具體怎麼載入子應用還是基座應用提供的；框架裡面維護了各個子應用的狀態，以及在適當的時候負責更改子應用的狀態、執行相應的生命週期函式

想想框架好像也不復雜，對吧？？那接下來就來實現一個自己的single-spa框架吧

手寫 single-spa 框架

經過上面的閱讀，相信對single-spa已經有一定的理解了，接下來就來實現一個自己的single-spa，就叫lyn-single-spa吧。

我們好像只需要實現registerApplication和start兩個方法並匯出即可。

寫程式碼之前，必須理清框架內子應用的各個狀態以及狀態的變更過程，為了便於理解，程式碼寫詳細的註釋，希望大家看完以後都可以實現一個自己的single-spa

// 實現子應用的註冊、掛載、切換、解除安裝功能

/**
 * 子應用狀態
 */
// 子應用註冊以後的初始狀態
const NOT_LOADED = 'NOT_LOADED'
// 表示正在載入子應用原始碼
const LOADING_SOURCE_CODE = 'LOADING_SOURCE_CODE'
// 執行完 app.loadApp，即子應用載入完以後的狀態
const NOT_BOOTSTRAPPED = 'NOT_BOOTSTRAPPED'
// 正在初始化
const BOOTSTRAPPING = 'BOOTSTRAPPING'
// 執行 app.bootstrap 之後的狀態，表是初始化完成，處於未掛載的狀態
const NOT_MOUNTED = 'NOT_MOUNTED'
// 正在掛載
const MOUNTING = 'MOUNTING'
// 掛載完成，app.mount 執行完畢
const MOUNTED = 'MOUNTED'
const UPDATING = 'UPDATING'
// 正在解除安裝
const UNMOUNTING = 'UNMOUNTING'
// 以下三種狀態這裡沒有涉及
const UNLOADING = 'UNLOADING'
const LOAD_ERROR = 'LOAD_ERROR'
const SKIP_BECAUSE_BROKEN = 'SKIP_BECAUSE_BROKEN'

// 存放所有的子應用
const apps = []

/**
 * 註冊子應用
 * @param {*} appConfig = {
 *    name: '',
 *    app: promise function,
 *    activeWhen: location => location.pathname.startsWith(path),
 *    customProps: {}
 * }
 */
export function registerApplication (appConfig) {
  apps.push(Object.assign({}, appConfig, { status: NOT_LOADED }))
  reroute()
}

// 啟動
let isStarted = false
export function start () {
  isStarted = true
}

function reroute () {
  // 三類 app
  const { appsToLoad, appsToMount, appsToUnmount } = getAppChanges()
  if (isStarted) {
    performAppChanges()
  } else {
    loadApps()
  }

  function loadApps () {
    appsToLoad.map(toLoad)
  }

  function performAppChanges () {
    // 解除安裝
    appsToUnmount.map(toUnmount)
    // 初始化 + 掛載
    appsToMount.map(tryToBoostrapAndMount)
  }
}

/**
 * 掛載應用
 * @param {*} app 
 */
async function tryToBoostrapAndMount(app) {
  if (shouldBeActive(app)) {
    // 正在初始化
    app.status = BOOTSTRAPPING
    // 初始化
    await app.bootstrap(app.customProps)
    // 初始化完成
    app.status = NOT_MOUNTED
    // 第二次判斷是為了防止中途使用者切換路由
    if (shouldBeActive(app)) {
      // 正在掛載
      app.status = MOUNTING
      // 掛載
      await app.mount(app.customProps)
      // 掛載完成
      app.status = MOUNTED
    }
  }
}

/**
 * 解除安裝應用
 * @param {*} app 
 */
async function toUnmount (app) {
  if (app.status !== 'MOUNTED') return app
  // 更新狀態為正在解除安裝
  app.status = MOUNTING
  // 執行解除安裝
  await app.unmount(app.customProps)
  // 解除安裝完成
  app.status = NOT_MOUNTED
  return app
}

/**
 * 載入子應用
 * @param {*} app 
 */
async function toLoad (app) {
  if (app.status !== NOT_LOADED) return app
  // 更改狀態為正在載入
  app.status = LOADING_SOURCE_CODE
  // 載入 app
  const res = await app.app()
  // 載入完成
  app.status = NOT_BOOTSTRAPPED
  // 將子應用匯出的生命週期函式掛載到 app 物件上
  app.bootstrap = res.bootstrap
  app.mount = res.mount
  app.unmount = res.unmount
  app.unload = res.unload
  // 載入完以後執行 reroute 嘗試掛載
  reroute()
  return app
}

/**
 * 將所有的子應用分為三大類，待載入、待掛載、待解除安裝
 */
function getAppChanges () {
  const appsToLoad = [],
    appsToMount = [],
    appsToUnmount = []
  
  apps.forEach(app => {
    switch (app.status) {
      // 待載入
      case NOT_LOADED:
        appsToLoad.push(app)
        break
      // 初始化 + 掛載
      case NOT_BOOTSTRAPPED:
      case NOT_MOUNTED:
        if (shouldBeActive(app)) {
          appsToMount.push(app)
        } 
        break
      // 待解除安裝
      case MOUNTED:
        if (!shouldBeActive(app)) {
          appsToUnmount.push(app)
        }
        break
    }
  })
  return { appsToLoad, appsToMount, appsToUnmount }
}

/**
 * 應用需要啟用嗎 ？
 * @param {*} app 
 * return true or false
 */
function shouldBeActive (app) {
  try {
    return app.activeWhen(window.location)
  } catch (err) {
    console.error('shouldBeActive function error', err);
    return false
  }
}

// 讓子應用判斷自己是否執行在基座應用中
window.singleSpaNavigate = true
// 監聽路由
window.addEventListener('hashchange', reroute)
window.history.pushState = patchedUpdateState(window.history.pushState)
window.history.replaceState = patchedUpdateState(window.history.replaceState)
/**
 * 裝飾器，增強 pushState 和 replaceState 方法
 * @param {*} updateState 
 */
function patchedUpdateState (updateState) {
  return function (...args) {
    // 當前url
    const urlBefore = window.location.href;
    // pushState or replaceState 的執行結果
    const result = Reflect.apply(updateState, this, args)
    // 執行updateState之後的url
    const urlAfter = window.location.href
    if (urlBefore !== urlAfter) {
      reroute()
    }
    return result
  }
}

看著是不是很簡單，加註釋也才200行而已，當然，這只是一個簡版的single-spa框架，沒什麼健壯性可言，但也正因為簡單，所以更能說明single-spa框架的本質。

single-spa-vue 原始碼分析

single-spa-vue負責為vue應用生成通用的生命週期鉤子，這些鉤子函式負責子應用的初始化、掛載、更新（資料）、解除安裝。

import "css.escape";

const defaultOpts = {
  // required opts
  Vue: null,
  appOptions: null,
  template: null
};

/**
 * 判斷引數的合法性
 * 返回生命週期函式，其中的mount方法負責例項化子應用，update方法提供了基座應用和子應用通訊的機會，unmount解除安裝子應用，bootstrap感覺沒啥用
 * @param {*} userOpts = {
 *    Vue,
 *    appOptions: {
 *      el: '#id',
 *      store,
 *      router,
 *      render: h => h(App)
 *    } 
 * }
 * return 四個生命週期函式組成的物件
 */
export default function singleSpaVue(userOpts) {
  // object
  if (typeof userOpts !== "object") {
    throw new Error(`single-spa-vue requires a configuration object`);
  }

  // 合併使用者選項和預設選項
  const opts = {
    ...defaultOpts,
    ...userOpts
  };

  // Vue建構函式
  if (!opts.Vue) {
    throw Error("single-spa-vue must be passed opts.Vue");
  }

  // appOptions
  if (!opts.appOptions) {
    throw Error("single-spa-vue must be passed opts.appOptions");
  }

  // el選擇器
  if (
    opts.appOptions.el &&
    typeof opts.appOptions.el !== "string" &&
    !(opts.appOptions.el instanceof HTMLElement)
  ) {
    throw Error(
      `single-spa-vue: appOptions.el must be a string CSS selector, an HTMLElement, or not provided at all. Was given ${typeof opts
        .appOptions.el}`
    );
  }

  // Just a shared object to store the mounted object state
  // key - name of single-spa app, since it is unique
  let mountedInstances = {};

  /**
   * 返回一個物件，每個屬性都是一個生命週期函式
   */
  return {
    bootstrap: bootstrap.bind(null, opts, mountedInstances),
    mount: mount.bind(null, opts, mountedInstances),
    unmount: unmount.bind(null, opts, mountedInstances),
    update: update.bind(null, opts, mountedInstances)
  };
}

function bootstrap(opts) {
  if (opts.loadRootComponent) {
    return opts.loadRootComponent().then(root => (opts.rootComponent = root));
  } else {
    return Promise.resolve();
  }
}

/**
 * 做了三件事情：
 *  大篇幅的處理el元素
 *  然後是render函式
 *  例項化子應用
 */
function mount(opts, mountedInstances, props) {
  const instance = {};
  return Promise.resolve().then(() => {
    const appOptions = { ...opts.appOptions };
    // 可以通過props.domElement屬性單獨設定自應用的渲染DOM容器，當然appOptions.el必須為空
    if (props.domElement && !appOptions.el) {
      appOptions.el = props.domElement;
    }

    let domEl;
    if (appOptions.el) {
      if (typeof appOptions.el === "string") {
        // 子應用的DOM容器
        domEl = document.querySelector(appOptions.el);
        if (!domEl) {
          throw Error(
            `If appOptions.el is provided to single-spa-vue, the dom element must exist in the dom. Was provided as ${appOptions.el}`
          );
        }
      } else {
        // 處理DOM容器是元素的情況
        domEl = appOptions.el;
        if (!domEl.id) {
          // 設定元素ID
          domEl.id = `single-spa-application:${props.name}`;
        }
        appOptions.el = `#${CSS.escape(domEl.id)}`;
      }
    } else {
      // 當然如果沒有id，這裡會自動生成一個id
      const htmlId = `single-spa-application:${props.name}`;
      appOptions.el = `#${CSS.escape(htmlId)}`;
      domEl = document.getElementById(htmlId);
      if (!domEl) {
        domEl = document.createElement("div");
        domEl.id = htmlId;
        document.body.appendChild(domEl);
      }
    }

    appOptions.el = appOptions.el + " .single-spa-container";

    // single-spa-vue@>=2 always REPLACES the `el` instead of appending to it.
    // We want domEl to stick around and not be replaced. So we tell Vue to mount
    // into a container div inside of the main domEl
    if (!domEl.querySelector(".single-spa-container")) {
      const singleSpaContainer = document.createElement("div");
      singleSpaContainer.className = "single-spa-container";
      domEl.appendChild(singleSpaContainer);
    }

    instance.domEl = domEl;

    // render
    if (!appOptions.render && !appOptions.template && opts.rootComponent) {
      appOptions.render = h => h(opts.rootComponent);
    }

    // data
    if (!appOptions.data) {
      appOptions.data = {};
    }

    appOptions.data = { ...appOptions.data, ...props };

    // 例項化子應用
    instance.vueInstance = new opts.Vue(appOptions);
    if (instance.vueInstance.bind) {
      instance.vueInstance = instance.vueInstance.bind(instance.vueInstance);
    }

    mountedInstances[props.name] = instance;

    return instance.vueInstance;
  });
}

// 基座應用通過update生命週期函式可以更新子應用的屬性
function update(opts, mountedInstances, props) {
  return Promise.resolve().then(() => {
    // 應用例項
    const instance = mountedInstances[props.name];
    // 所有的屬性
    const data = {
      ...(opts.appOptions.data || {}),
      ...props
    };
    // 更新例項物件上的屬性值，vm.test = 'xxx'
    for (let prop in data) {
      instance.vueInstance[prop] = data[prop];
    }
  });
}

// 呼叫$destroy鉤子函式，銷燬子應用
function unmount(opts, mountedInstances, props) {
  return Promise.resolve().then(() => {
    const instance = mountedInstances[props.name];
    instance.vueInstance.$destroy();
    instance.vueInstance.$el.innerHTML = "";
    delete instance.vueInstance;

    if (instance.domEl) {
      instance.domEl.innerHTML = "";
      delete instance.domEl;
    }
  });
}

結語

到這裡就結束了，文章比較長，寫這篇文章也花費了好幾天的時間，但是感覺真的很好，收穫滿滿，特別是最後手寫框架部分。

也給各位同學一個建議，一定要勤動手，不動筆墨不讀書，當你真的把框架寫出來時，那個感覺是隻看原始碼完全所不能比擬的，檢驗你是否真的懂框架原理的最好辦法，就是看你能否寫一個框架出來。

願同學們也能收穫滿滿！！

共同學習，共同進步～～

[github](

Flask框架從入門到精通之Session（九）
2019-04-30
Flask框架Session
Flask框架從入門到精通之Response（七）
2019-04-30
Flask框架
Flask框架從入門到精通之Request（六）
2019-04-30
Flask框架
微前端框架之 qiankun 從入門到原始碼分析
2022-02-04
前端框架原始碼
Celery框架從入門到精通
2023-03-09
框架
Flask框架從入門到精通之模型關係（十七）
2019-05-04
Flask框架模型
Flask框架從入門到精通之模板表單（二十）
2019-05-04
Flask框架
Flask框架從入門到精通之引數配置（二）
2019-04-19
Flask框架
Flask框架從入門到精通之模板初識（五）
2019-04-19
Flask框架
Flask框架從入門到精通之轉換器（四）
2019-04-19
Flask框架
Flask框架從入門到精通之異常處理（十）
2019-04-30
Flask框架
Flask框架從入門到精通之模型遷移操作（十六）
2019-04-30
Flask框架模型
Flask框架從入門到精通之藍圖（二十四）
2019-05-04
Flask框架
Flask框架從入門到精通之初識（一）
2019-04-19
Flask框架
Flask框架從入門到精通之路由（三）
2019-04-19
Flask框架路由
Flask框架從入門到精通之擴充套件指令碼（十五）
2019-04-30
Flask框架套件指令碼
Flask框架從入門到精通之模型資料庫配置（十一）
2019-04-30
Flask框架模型資料庫
web前端從入門到精通的自學之路
2018-08-09
Web前端
Flask框架從入門到精通之請求鉤子（二十二）
2019-05-04
Flask框架
Python從入門到精通
2024-03-09
Python
vim從入門到精通
2022-05-24
Thymeleaf從入門到精通
2020-07-24
Eclipse從入門到精通
2019-06-11
Eclipse
Shell從入門到精通
2021-01-28
Promise從入門到精通
2019-01-14
Promise
LESS從入門到精通
2019-03-17
Git 從入門到精通
2019-03-08
Git
SAP從入門到精通
2018-06-29
微前端框架single-spa子應用載入解析
2023-03-28
前端框架
Kaizen如何從入門到精通?
2023-05-16
AI
Linux從入門到精通（二）
2024-03-14
Linux
ElasticSearch 7.8.1 從入門到精通
2020-08-10
Elasticsearch
RabbitMQ 從入門到精通（一）
2019-06-06
MQ
ActiveMQ從入門到精通（一）
2018-12-28
MQ
ActiveMQ從入門到精通（二）
2018-12-28
MQ
MyBatis從入門到精通(一)：MyBatis入門
2019-06-28
MyBatis
WIFI滲透從入門到精通
2020-08-19
WiFi
Docker從入門到精通（五）——Dockerfile
2021-12-16
Docker

微前端框架 之 single-spa 從入門到精通

前序

提示

示例專案

子應用 app1

新建子應用

配置子應用

vue.config.js

安裝single-spa-vue

改造入口檔案

更改檢視檔案

環境配置檔案

.env

.env.micro

.env.buildMicro

修改路由檔案

修改package.json中的script

啟動應用

應用獨立執行

作為子應用執行

作為獨立應用訪問

子應用 app2

啟動應用，作為獨立應用訪問

子應用 app3（react）

安裝 app3

安裝react-router-dom、single-spa-react

打散配置

更改 webpack 配置檔案

/config/webpack.config.js，官網

專案入口檔案改造

/src/index.js

/src/index.css

啟動子應用

基座應用 layout

安裝single-spa

改造基座專案

入口檔案

App.vue

路由

啟動基座應用

瀏覽器訪問基座應用

打包部署

打包

部署

single-spa 原始碼分析

registerApplication 註冊子應用

sanitizeArguments 格式化使用者傳遞的子應用配置引數

validateRegisterWithConfig

validateRegisterWithArguments

sanitizeLoadApp

sanitizeCustomProps

sanitizeActiveWhen

pathToActiveWhen

reroute 更改app.status和執行生命週期函式

getAppChanges

shouldBeActive

toLoadPromise

getProps

smellsLikeAPromise

flattenFnArray

toUnloadPromise

finishUnloadingApp

reasonableTime

toUnmountPromise

tryToBootstrapAndMount

toBootstrapPromise

toMountPromise

start(opts)

監聽路由變化

patchedUpdateState

createPopStateEvent

urlReroute

小結

手寫 single-spa 框架

single-spa-vue 原始碼分析

結語

相關文章

微前端框架之 single-spa 從入門到精通

安裝`single-spa-vue`

修改`package.json`中的`script`

安裝`react-router-dom`、`single-spa-react`

安裝`single-spa`