Electron中如何加载多个preload文件并正确导出引入？

在Electron项目中尝试将preload代码拆分为preload1.ts、preload2.ts、preload3.ts，通过index.ts统一引入后借助contextBridge暴露给渲染进程的index.vue使用时，出现module not found: ./preload1错误，但将所有代码直接写在index.ts中可正常运行。

文件结构 #

报错时的代码 #

index.ts #

const test1 = require("./preload1")
const test2 = require("./preload2")
const test3 = require("./preload3")
const { contextBridge } = require('electron');

contextBridge.exposeInMainWorld('testApi', { test1, test2, test3 })

preload1.ts #

const { contextBridge, ipcRenderer } = require('electron');

const test1 = async () => {
  return await ipcRenderer.invoke('on-test-event')
}

export default {test1}

preload2.ts #

const { contextBridge, ipcRenderer } = require('electron');

const test2 = async () => {
  return await ipcRenderer.invoke('on-test-event')
}

export default {test2}

preload3.ts #

const { contextBridge, ipcRenderer } = require('electron');

const test3 = async () => {
  return await ipcRenderer.invoke('on-test-event')
}

export default {test3}

index.vue #

console.log(testApi);

控制台错误信息 #

VM4 sandbox_bundle:93 Unable to load preload script: \electron-vite-vue\dist-electron\preloads\index.js


VM4 sandbox_bundle:93 Error: module not found: ./preload1
    at preloadRequire (VM4 sandbox_bundle:93:1386)
    at <anonymous>:2:17
    at runPreloadScript (VM4 sandbox_bundle:93:2211)
    at Object.<anonymous> (VM4 sandbox_bundle:93:2478)
    at ./lib/sandboxed_renderer/init.ts (VM4 sandbox_bundle:93:2632)
    at __webpack_require__ (VM4 sandbox_bundle:1:170)
    at VM4 sandbox_bundle:1:1242
    at ___electron_webpack_init__ (VM4 sandbox_bundle:1:1320)
    at VM4 sandbox_bundle:160:455

正常运行的index.ts代码 #

const { contextBridge, ipcRenderer } = require('electron');

const test1 = async () => {
  return await ipcRenderer.invoke('on-test-event')
}

const test2 = async () => {
  return await ipcRenderer.invoke('on-test-event')
}

const test3 = async () => {
  return await ipcRenderer.invoke('on-test-event')
}

contextBridge.exposeInMainWorld('testApi', {test1, test2, test3})

正常运行时控制台输出 #

{test1: ƒ, test2: ƒ, test3: ƒ}
 test1: ƒ ()
 test2: ƒ ()
 test3: ƒ ()
 [[Prototype]]: Object

问题原因及解决方法 #

1. 模块语法混用问题 #

preload文件使用ES模块的export default导出，但index.ts用CommonJS的require导入，语法混用导致打包解析失败，统一语法即可：

方案一：统一用CommonJS语法

修改所有preload文件的导出方式：

const { ipcRenderer } = require('electron');

const test1 = async () => {
  return await ipcRenderer.invoke('on-test-event')
}

module.exports = { test1 }

index.ts保持原代码不变，require可正确加载模块。

方案二：统一用ES模块语法

修改index.ts为ES模块导入：

import { test1 } from './preload1';
import { test2 } from './preload2';
import { test3 } from './preload3';
import { contextBridge } from 'electron';

contextBridge.exposeInMainWorld('testApi', { test1, test2, test3 })

同时修改preload文件为具名导出：

import { ipcRenderer } from 'electron';

export const test1 = async () => {
  return await ipcRenderer.invoke('on-test-event')
}

注意：使用ES模块需确保Electron或打包工具（如vite/webpack）支持，可在package.json中添加"type": "module"，或在打包配置中开启ES模块解析。

2. 打包工具配置问题 #

若使用electron-vite或webpack，需确保preload目录下的所有.ts文件被纳入打包范围。以electron-vite为例，配置示例：

// vite.config.ts
import { defineConfig } from 'vite'
import electron from 'vite-plugin-electron'

export default defineConfig({
  plugins: [
    electron({
      preload: {
        input: {
          index: './src/preload/index.ts'
          // 无需单独配置每个preload，打包工具会自动解析index.ts的依赖
        }
      }
    })
  ]
})

3. 路径验证 #

确认index.ts中require的路径正确（当前文件结构下./preload1是正确的），打包后路径需由工具自动处理，避免手动硬编码绝对路径。

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