Electron开发中函数导出失败，多种导出方式均报错求助

问题概述 #

刚接触Electron开发，在导出utils.js中的通用函数时遇到障碍：

• 尝试过module.exports = {save}、exports.save = save两种CommonJS导出语法，控制台报module未定义错误
• 尝试ES模块的export关键字，又报export未定义错误
• 但教程中用require导入Electron库的操作完全正常

待导出的save函数为常规函数声明（类似function save() { /* 业务逻辑 */ }）。

核心原因 #

问题出在模块加载模式不匹配：

• Electron主进程默认使用Node.js的CommonJS模块规范，module.exports/require可以正常工作
• 渲染进程如果通过file://协议加载页面，且未配置Node.js集成，或页面中用<script type="module">引入脚本，会导致CommonJS语法失效；若未开启ES模块支持，ES模块语法也会报错

解决方法 #

1. 渲染进程开启Node.js集成（仅开发环境建议） #

创建BrowserWindow时修改配置，允许渲染进程直接使用CommonJS语法：

const { BrowserWindow } = require('electron')
const win = new BrowserWindow({
  webPreferences: {
    nodeIntegration: true,
    contextIsolation: false
  }
})

之后utils.js用CommonJS导出：

function save() {
  // 函数逻辑
}
module.exports = { save }

渲染进程中用require导入：

const { save } = require('./utils.js')

2. 使用ES模块规范（推荐） #

方式一：全局启用ES模块

在项目根目录的package.json中添加：

"type": "module"

之后utils.js用ES模块导出：

export function save() {
  // 函数逻辑
}

渲染进程中用import导入：

import { save } from './utils.js'

方式二：单独指定ES模块文件

将utils.js重命名为utils.mjs，使用ES模块语法导出：

export function save() {
  // 函数逻辑
}

导入时指定后缀：

import { save } from './utils.mjs'

3. 生产环境推荐：用预加载脚本暴露函数 #

如果开启了contextIsolation（生产环境安全最佳实践），通过预加载脚本将函数暴露给渲染进程：

1. 预加载脚本preload.js：

const { contextBridge } = require('electron')
function save() {
  // 函数逻辑
}
contextBridge.exposeInMainWorld('utils', {
  save: save
})

2. 创建BrowserWindow时配置预加载脚本：

const win = new BrowserWindow({
  webPreferences: {
    preload: path.join(__dirname, 'preload.js'),
    contextIsolation: true,
    nodeIntegration: false
  }
})

3. 渲染进程中直接调用：

window.utils.save()

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