微前端框架qiankun原始碼剖析之上篇

// single-spa-config.js
import { registerApplication, start } from 'single-spa';
// Config with more expressive API
registerApplication({
  name: 'app1',
  app: () => import('src/app1/main.js'),
  activeWhen: ['/myApp', (location) => location.pathname.startsWith('/some/other/path')],
  customProps: {
    some: 'value',
  }
});
start();

console.log("The registered application has been loaded!");
export async function bootstrap(props) {
  const {
    name, // The name of the application
    singleSpa, // The singleSpa instance
    mountParcel, // Function for manually mounting
    customProps, // Additional custom information
  } = props; // Props are given to every lifecycle
  return Promise.resolve();
}
export async function mount(props) {...}
export async function unmount(props) {...}

import { registerMicroApps, start } from 'qiankun';
registerMicroApps([
  {
    name: 'react app', // app name registered
    entry: '//localhost:7100',
    container: '#yourContainer',
    activeRule: '/yourActiveRule',
  },
  {
    name: 'vue app',
    entry: { scripts: ['//localhost:7100/main.js'] },
    container: '#yourContainer2',
    activeRule: '/yourActiveRule2',
  },
]);
start();

/**
 * 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'),
  );
}

import { registerApplication } from 'single-spa';
let microApps: Array<RegistrableApp<Record<string, unknown>>> = [];
export function registerMicroApps<T extends ObjectType>(
  apps: Array<RegistrableApp<T>>,
  lifeCycles?: FrameworkLifeCycles<T>,
) {
  // 判斷應用是否註冊過，保證每個應用只註冊一次
  const unregisteredApps = apps.filter((app) => !microApps.some((registeredApp) => registeredApp.name === app.name));
  microApps = [...microApps, ...unregisteredApps];
  unregisteredApps.forEach((app) => {
    // 取出使用者輸入的引數
    const { name, activeRule, loader = noop, props, ...appConfig } = app;
    // 呼叫single-spa的子應用註冊函數，將使用者輸入的引數轉換為single-spa所需的引數
    registerApplication({
      name,
      // 這裡提供了single-spa所需的子應用載入方式函數
      app: async () => {
        loader(true);
        await frameworkStartedDefer.promise;
				// 呼叫轉換函數loadApp將使用者輸入的url等解析轉換執行，最終生成增強後的子應用生命週期函數（包括mount,unmount,bootstrap）
        const { mount, ...otherMicroAppConfigs } = (
          await loadApp({ name, props, ...appConfig }, frameworkConfiguration, lifeCycles)
        )();
				// 返回值為loadApp生成的一系列生命週期函數，其中mount函數陣列再次增強
        return {
          mount: [async () => loader(true), ...toArray(mount), async () => loader(false)],
          ...otherMicroAppConfigs,
        };
      },
      activeWhen: activeRule,
      customProps: props,
    });
  });
}

import { importEntry } from 'import-html-entry';
export async function loadApp<T extends ObjectType>(
  app: LoadableApp<T>,
  configuration: FrameworkConfiguration = {},
  lifeCycles?: FrameworkLifeCycles<T>,
): Promise<ParcelConfigObjectGetter> {
  const { entry, name: appName } = app;
  const {
    singular = false,
    sandbox = true,
    excludeAssetFilter,
    globalContext = window,
    ...importEntryOpts
  } = configuration;
  // 。。。。。。
  // 依賴了import-html-entry庫中的方法解析了使用者輸入的url(entry引數),得到了template（HTML模版）,execScripts(所依賴JS檔案的執行函數）以及assetPublicPath（公共資源路徑）
  const { template, execScripts, assetPublicPath } = await importEntry(entry, importEntryOpts);
  // 。。。。。。
  // 在window沙箱中（global引數）執行entry依賴的js檔案，得到相關生命週期（ bootstrap, mount, unmount, update）
  // 這裡可以忽略getLifecyclesFromExports函數，其返回與scriptExports一致，只是為了檢查子應用是否匯出了必須的生命週期
  const scriptExports: any = await execScripts(global, sandbox && !useLooseSandbox, {
    scopedGlobalVariables: speedySandbox ? trustedGlobals : [],
  });
  const { bootstrap, mount, unmount, update } = getLifecyclesFromExports(
    scriptExports,
    appName,
    global,
    sandboxContainer?.instance?.latestSetProp,
  );
  // 。。。。。
  // 匯出single-spa所需設定的getter方法（因為設定項與子應用掛在的container相關，預設為使用者輸入的container，後續使用者可以手動載入子應用並指定其渲染位置）
  const initialContainer = 'container' in app ? app.container : undefined;
  const parcelConfigGetter: ParcelConfigObjectGetter = (remountContainer = initialContainer) => {
    const parcelConfig: ParcelConfigObject = {
      name: appInstanceId,
      bootstrap,
      // mount陣列在子應用渲染時依次執行
      mount: [
        // 。。。。。。
        // 執行沙箱隔離
        mountSandbox,
        // 呼叫使用者自定義mount生命週期，並傳入setGlobalState/onGlobalStateChange的應用間通訊方法函數
        async (props) => mount({ ...props, container: appWrapperGetter(), setGlobalState, onGlobalStateChange }),
        // 。。。。。。
      ],
      // unmount陣列在子應用解除安裝時依次執行
      unmount: [
        // 。。。。。。。
        // 呼叫使用者自定義unmount生命週期
        async (props) => unmount({ ...props, container: appWrapperGetter() }),
        // 解除安裝隔離沙箱
        unmountSandbox,
        // 清理工作
        async () => {
          render({ element: null, loading: false, container: remountContainer }, 'unmounted');
          // 清理子應用對全域性通訊的訂閱
          offGlobalStateChange(appInstanceId);
          // for gc
          appWrapperElement = null;
          syncAppWrapperElement2Sandbox(appWrapperElement);
        },
        // 。。。。。。。
      ],
    };
    return parcelConfig;
  }
	return parcelConfigGetter
}