Electron+Webpack主进程向渲染进程传递配置对象的实现问题

下面是几种可行的解决方案，避免大量嵌套.then回调的同时确保配置加载完成后再执行依赖代码：

方法1：用async/await替代.then回调 #

通过async/await以同步写法处理异步逻辑，让依赖配置的代码自然等待配置加载完成，无需嵌套回调。

主进程代码（加载YAML并处理IPC） #

// main.js
const { ipcMain } = require('electron');
const fs = require('fs');
const yaml = require('js-yaml');

ipcMain.handle('get-config', async () => {
  try {
    const configContent = fs.readFileSync('./config.yaml', 'utf8');
    return yaml.load(configContent);
  } catch (err) {
    console.error('加载配置失败:', err);
    return null;
  }
});

Preload脚本（暴露API） #

// preload.js
const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
  getConfig: () => ipcRenderer.invoke('get-config')
});

渲染进程代码 #

// renderer.js
async function initApp() {
  const config = await window.electronAPI.getConfig();
  if (!config) {
    alert('配置加载失败');
    return;
  }
  // 所有依赖config的代码直接写在这里，无需嵌套
  console.log('当前配置:', config);
  initUI(config);
  setupEventListeners(config);
}

// 页面加载完成后启动初始化
document.addEventListener('DOMContentLoaded', initApp);

方法2：预加载时同步获取配置（直接挂载到window） #

如果配置不需要动态更新，可以在preload阶段同步获取配置并挂载到window对象，渲染进程启动时就能直接使用，完全跳过异步等待。

主进程新增同步IPC #

// main.js
ipcMain.on('get-config-sync', (event) => {
  try {
    const configContent = fs.readFileSync('./config.yaml', 'utf8');
    event.returnValue = yaml.load(configContent);
  } catch (err) {
    console.error('加载配置失败:', err);
    event.returnValue = null;
  }
});

Preload脚本修改 #

// preload.js
const { contextBridge, ipcRenderer } = require('electron');

// 同步获取配置并直接挂载
const appConfig = ipcRenderer.sendSync('get-config-sync');

contextBridge.exposeInMainWorld('appConfig', appConfig);
// 保留异步API（如需动态刷新配置）
contextBridge.exposeInMainWorld('electronAPI', {
  refreshConfig: () => ipcRenderer.invoke('get-config')
});

渲染进程代码 #

// renderer.js
document.addEventListener('DOMContentLoaded', () => {
  const config = window.appConfig;
  if (!config) {
    alert('配置加载失败');
    return;
  }
  // 直接使用config，无异步等待
  initUI(config);
  setupEventListeners(config);
});

方法3：全局状态管理（适合复杂应用） #

如果应用规模较大，可将配置存入全局状态容器，初始化时先加载配置再启动应用逻辑，其他模块通过状态判断配置是否就绪。

渲染进程示例（简单全局状态） #

// renderer.js
// 定义全局状态容器
window.appState = {
  config: null,
  isConfigLoaded: false
};

async function loadConfig() {
  window.appState.config = await window.electronAPI.getConfig();
  window.appState.isConfigLoaded = true;
  // 配置就绪后启动应用
  initApp();
}

function initApp() {
  const { config } = window.appState;
  if (!config) return;
  // 依赖配置的初始化逻辑
}

// 页面加载时触发配置加载
document.addEventListener('DOMContentLoaded', loadConfig);

// 其他需要调用配置的模块
function someBusinessLogic() {
  if (!window.appState.isConfigLoaded) {
    console.log('配置尚未加载完成');
    return;
  }
  // 使用window.appState.config处理业务
}

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