MFE聚合层-Qiankun源码分析

QianKun 源码分析

QianKun MFE注册

registerMicroApps<T extends ObjectType>(
  apps: Array<RegistrableApp<T>>,
  lifeCycles?: FrameworkLifeCycles<T>,
)

type RegistrableApp<T extends ObjectType> {
  // app name
  name: string;
  // app entry
  entry: Entry;
  loader?: (loading: boolean) => void;
  render: HTMLContentRender; | container: string | HTMLElement;
  activeRule: RegisterApplicationConfig['activeWhen'];
}

//demo
registerMicroApps([
  {
    name: 'app',
    entry: 'http://localhost:8080',
    container: '#container',
    activeRule: '/app',
  },
]);

start();

QianKun 能力分析

乾坤基于Single-SPA进行了封装，在此基础上提供：

• 基于Html-Entry的方式对微应用进行加载
• 基于ShadowDom的方式对微应用进行样式和DOM隔离
• 基于多种Proxy能力代理Window对象提供了微应用运行环境的隔离
• 通过GlobalState提供了主-微应用之间的通信方式