Electron中Preload如何等待Promise解析后再加载渲染进程？

问题背景 #

将应用的nodeIntegration设为false后，需通过主进程读取HTML模板文件，再经IPC传递给渲染进程。但ipcRenderer.invoke()返回Promise，渲染进程顶层无法使用await，且不想修改现有控制器的同步构造逻辑，导致页面构建时模板未就绪。

解决方案：预加载模板+缓存+同步访问 #

步骤1：主进程IPC处理器优化（可选） #

使用path模块安全拼接文件路径，避免字符串拼接的路径漏洞：

// IPChandler.ts
import * as path from 'path';
import { ipcMain } from 'electron';
import * as fs from 'fs';

ipcMain.handle('get-html-template', (_, templateName: string) => {
  // 根据项目结构调整路径拼接逻辑
  const templatePath = path.join(__dirname, '../renderer/templates', templateName);
  return fs.readFileSync(templatePath, { encoding: 'utf8', flag: 'r' });
});

步骤2：Preload脚本预加载并缓存模板 #

在preload中先批量拉取所有需要的模板，存入内存缓存后，给渲染进程暴露同步获取方法，同时通过自定义事件通知渲染进程模板就绪：

// preload.ts
import { contextBridge, ipcRenderer } from 'electron';

// 定义需要加载的模板列表（key对应渲染进程要访问的名称，path对应模板文件路径）
const templateList = [
  { key: 'hoverContainer', path: 'framework/hover-container.html' },
  { key: 'OverlayWindow', path: 'overlay-windows/overlay-window.html' },
  // 新增模板直接在这里添加
];

const templateCache = new Map<string, string>();

// 批量加载模板到缓存
Promise.all(
  templateList.map(async (item) => {
    const templateContent = await ipcRenderer.invoke('get-html-template', item.path);
    templateCache.set(item.key, templateContent);
  })
).then(() => {
  // 模板加载完成后，暴露同步获取方法
  contextBridge.exposeInMainWorld('htmlTemplates', {
    get: (templateKey: string) => templateCache.get(templateKey)
  });

  // 发送自定义事件，通知渲染进程模板已就绪
  window.dispatchEvent(new CustomEvent('templatesReady'));
});

步骤3：渲染进程等待模板就绪后初始化 #

修改渲染进程入口代码，等待templatesReady事件后再初始化控制器框架，确保模板已加载完成：

// 渲染进程入口文件（比如mainScript.ts的入口部分）
window.addEventListener('templatesReady', () => {
  // 在这里初始化你的控制器、启动应用逻辑
  // 例如：new C_OverlayWindow();
});

// 控制器类无需修改构造逻辑，直接通过同步方法获取模板
export class C_OverlayWindow extends Controller {
  static domTemplate = window.htmlTemplates.get('OverlayWindow');

  constructor() {
    super();
    // 直接使用this.constructor.domTemplate构建DOM，此时已为字符串
  }
}

方案优势 #

• 无需修改现有控制器的同步构造逻辑，完全兼容原有框架
• 模板仅加载一次，存在内存缓存中，避免重复IPC请求
• 通过自定义事件确保渲染进程仅在模板就绪后执行逻辑，彻底解决模板未定义问题

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