ExtJS中如何从主应用初始化多个不同的子应用

你当前主应用app.json里的classpath配置无需改动，已经可以正常加载两个子应用的类文件，问题出在加载逻辑的执行时机和归属不合理。

核心解决思路 #

让每个子应用自主适配「独立运行」和「被主应用嵌入运行」两种场景，主应用不硬编码子应用的加载逻辑，只在需要的时候触发子应用暴露的初始化钩子，从根源上避免两边逻辑不同步的问题。

具体操作步骤 #

1. 改造子应用的启动逻辑（两个子应用都要改）

保留子应用自己的所有加载逻辑，增加运行环境判断，独立运行时自举初始化，被主应用嵌入时暴露初始化钩子给主应用调用。
以appone的application.js为例，改造后代码如下：

// 判断当前是否运行在主应用上下文
if (!window.__MAIN_APP_RUNTIME__) {
  // 独立运行场景：直接执行全量初始化
  appone.ServiceLoader.loadServicesAndInject();
  appone.FactoryLoader.loadFactoryAndInject();
  appone.StoreLoader.loadStoresAndInject();
  appone.ContextLoader.loadContextsAndInject();
} else {
  // 被主应用嵌入场景：把初始化逻辑挂载到自身命名空间暴露给主应用
  appone.__initAppModules = () => {
    appone.ServiceLoader.loadServicesAndInject();
    appone.FactoryLoader.loadFactoryAndInject();
    appone.StoreLoader.loadStoresAndInject();
    appone.ContextLoader.loadContextsAndInject();
  }
}

app2按同样逻辑改造，把自身的初始化逻辑挂载到apptwo.__initAppModules上即可。

2. 改造主应用逻辑

• 主应用启动入口第一行增加全局环境标记，用于识别主应用运行上下文：

  window.__MAIN_APP_RUNTIME__ = true
  

• 调整主应用的路由匹配逻辑，在命中对应子应用的路由时，先判断子应用是否已经初始化过，未初始化则调用子应用暴露的初始化钩子，再渲染对应组件：

  // 匹配到appone路由时的示例逻辑
  if (location.pathname.startsWith('/appone')) {
    if (!window.appone.__inited) {
      appone.__initAppModules()
      window.appone.__inited = true
    }
    // 渲染appone的对应组件
  }
  // apptwo路由逻辑同理
  

3. 可选优化

如果子应用用到了相对路径的静态资源、接口前缀，可以同步在子应用里加环境判断，独立运行时用相对路径，被主应用加载时用子应用的独立部署地址作为根路径，避免资源加载失败。

内容的提问来源于stack exchange，提问作者David