微前端框架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
}