Electron中主进程与渲染进程间常量共享的优雅实现方案咨询

当然可以共享常量，除了contextBridge暴露的方式，还有几种更优雅的实现方案，根据你的场景可以灵活选择：

1. 抽离为独立的纯JS/TS模块 #

这是最直观易维护的方案，把所有常量放在单独的文件中，主进程、preload脚本、渲染进程（视沙箱配置）都能直接导入复用，避免重复定义。

示例代码：

// src/constants/app.js
export const APP_NAME = "MyElectronApp";
export const DEFAULT_WINDOW_SIZE = { width: 800, height: 600 };
export const API_BASE_URL = "https://api.example.com";

• 主进程中导入使用：

// src/main.js
import { APP_NAME, DEFAULT_WINDOW_SIZE } from './constants/app.js';

const mainWindow = new BrowserWindow({
  width: DEFAULT_WINDOW_SIZE.width,
  height: DEFAULT_WINDOW_SIZE.height,
  title: APP_NAME
});

• 沙箱模式下的渲染进程：通过preload脚本导入后，再用contextBridge暴露（复用同一个常量源，比单独写两次更易维护）：

// src/preload.js
import { contextBridge } from 'electron';
import { APP_NAME, API_BASE_URL } from './constants/app.js';

contextBridge.exposeInMainWorld('appConstants', {
  APP_NAME,
  API_BASE_URL
});

渲染进程直接访问window.appConstants.APP_NAME即可。

2. 主进程主动通过IPC发送常量 #

如果常量需要在主进程运行时确定（比如根据系统环境动态生成），可以在窗口加载完成后，通过webContents.send批量发送给渲染进程。

示例代码：

• 主进程：

// src/main.js
import { BrowserWindow } from 'electron';
import { APP_NAME } from './constants/app.js';

const mainWindow = new BrowserWindow({...});

// 窗口加载完成后发送常量
mainWindow.webContents.on('did-finish-load', () => {
  mainWindow.webContents.send('sync-constants', {
    APP_NAME,
    SYSTEM_PLATFORM: process.platform
  });
});

• 渲染进程（沙箱模式下需在preload暴露ipcRenderer）：

// src/renderer.js
import { ipcRenderer } from 'electron';

let appConstants = {};
ipcRenderer.on('sync-constants', (_, constants) => {
  appConstants = constants;
  console.log('Received constants:', appConstants);
});

3. 注入到环境变量 #

可以在启动或打包时将常量注入到process.env中，主进程和渲染进程（或通过preload中转）都能访问，适合需要和构建流程结合的场景。

• 启动时注入（用cross-env实现跨平台支持）：

cross-env APP_NAME="MyElectronApp" API_BASE_URL="https://api.example.com" electron .

• 主进程直接访问：

console.log(process.env.APP_NAME);

• 沙箱模式下渲染进程访问：通过preload暴露指定的环境变量：

// src/preload.js
import { contextBridge } from 'electron';

contextBridge.exposeInMainWorld('env', {
  APP_NAME: process.env.APP_NAME,
  API_BASE_URL: process.env.API_BASE_URL
});

渲染进程使用window.env.APP_NAME即可。

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