Electron 应用动态切换加载不同的页面的最佳实践

[PerfectPan]

可以理解为一个 Electron 应用有若干个不一样的编辑器界面，引用的模块啥的可能都会不同。

一开始直接就暴力实例化不同的 ElectronMainApp，然后去加载，看起来可以跑，但后来发现关闭窗口的时候一直会报错，而且一 reload 窗口就直接关闭了。然后去研究了一下发现 https://github.com/opensumi/core/blob/main/packages/core-electron-main/src/bootstrap/api.ts#L21 这个服务好像因为是单例，然后我每次 new ElectronMainApp 的时候前面注册的 handler 都会被覆盖掉（注册代码：https://github.com/opensumi/core/blob/main/packages/core-electron-main/src/bootstrap/app.ts#L228 ），就导致了关闭窗口啥的都会报错。

现在改成在加载下一个窗口前获取 appConfig 的实例然后去修改 appConfig，然后就正常了，即类似如下的逻辑：

const config = injector.get(ElectronAppConfig);
  config.browserUrl =
    type === 'block'
      ? URLA
      : URLB;
electronApp.loadWorkspace(workspaceURI.toString(), undefined);

不知道这是不是最佳实践，然后我上面提到的问题是不是 by design 的，我这样改会不会有坑呢？

[yantze]

编辑器在不同的窗口使用不同的模块，是可以用 URL 去判断的，不需要修改 Electron 主进程的逻辑。你可以在 Browser 层的 ClientApp 初始化的时候，根据 URL 的不同去引入不同的 modules 做判断就行

import { ClientApp } from '@opensumi/ide-core-browser/lib/bootstrap/app';

export const CodeBrowserModules: ConstructorOf<BrowserModule>[] = [
  ...CommonBrowserModules,
  O2StorageModule,
];

if (window.metadata?.isRemote) {
  CodeBrowserModules.push(...[
    ExpressFileServerModule,
  ]);
}

const opts: IClientAppOpts = {
  modules:CodeBrowserModules,
  layoutConfig,
};
const app = new ClientApp(opts);

[PerfectPan]

这样应该会把所有代码都打到一个文件里？除非动态更换的模块动态引入 可能会好一些

[yantze]

如果不想放到一个文件，可以在编译的时候产生多个文件，然后 Browser 中判断读取哪个资源

[PerfectPan]

嗯嗯，理解。所以 ElectronMainApp 这个类设计就是只允许你 new 一个是么？

[yantze]

是的，因为里面包括了 Electron 窗口管理等逻辑，重新 new 会导致异常