Electron预加载脚本无法加载he模块问题求助

方案1：使用绝对路径引入模块 #

preload脚本的模块解析路径可能和主进程存在差异，通过__dirname拼接绝对路径可确保精准定位到node_modules中的he模块：

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

contextBridge.exposeInMainWorld('electronApi', {
    setTitle: (title) => ipcRenderer.send('set-title', title),
    save: (textContent, indexContent) => ipcRenderer.send('save', textContent, indexContent),
    open: () => ipcRenderer.invoke('dialog:open-file'),
})

// 用绝对路径引入he模块
const he = require(path.join(__dirname, 'node_modules', 'he'))
contextBridge.exposeInMainWorld('heApi', {
    encode: (str) => he.encode(str),
    decode: (str) => he.decode(str)
})

方案2：确认he模块处于生产依赖 #

检查package.json，确保he在dependencies字段而非devDependencies中。如果之前用--save-dev安装，重新执行：

npm install he --save

开发依赖的模块在生产环境或打包后可能被剔除，导致preload脚本无法加载。

方案3：内联he模块核心逻辑 #

he是轻量的字符串处理库，可直接将其核心编码解码逻辑复制到preload中，彻底规避模块依赖问题：

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

contextBridge.exposeInMainWorld('electronApi', {
    setTitle: (title) => ipcRenderer.send('set-title', title),
    save: (textContent, indexContent) => ipcRenderer.send('save', textContent, indexContent),
    open: () => ipcRenderer.invoke('dialog:open-file'),
})

// 内联he的核心编解码逻辑
const heApi = {
    encode: function(str) {
        return str.replace(/&/g, '&')
                  .replace(/</g, '&lt;')
                  .replace(/>/g, '&gt;')
                  .replace(/"/g, '&quot;')
                  .replace(/'/g, '&#039;');
    },
    decode: function(str) {
        return str.replace(/&amp;/g, '&')
                  .replace(/&lt;/g, '<')
                  .replace(/&gt;/g, '>')
                  .replace(/&quot;/g, '"')
                  .replace(/&#039;/g, "'");
    }
}

contextBridge.exposeInMainWorld('heApi', heApi)

注：以上是简化版逻辑，若需支持更多HTML实体，可直接复制he库的完整源码到preload中。

方案4：配置打包工具（若使用打包工具） #

如果用webpack、rollup等工具打包preload脚本，需确保he被打包进最终文件：

• 设置webpack的target: 'electron-preload'
• 避免在配置中将he加入externals排除列表

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