Node.js环境下HTML文件无法使用require，如何无需require引入ipcRenderer？

推荐方案：预加载脚本（官方安全做法） #

这是Electron官方最推荐的方式，既能保证安全，又能按需给HTML暴露需要的API，完全不用在HTML里写require。

1. 在主进程文件（index.js）中创建BrowserWindow时，配置预加载脚本路径：

// index.js
const { BrowserWindow } = require('electron');
const path = require('path');

const mainWindow = new BrowserWindow({
  webPreferences: {
    preload: path.join(__dirname, 'preload.js'), // 指定预加载脚本
    contextIsolation: true, // 默认开启，保持上下文隔离更安全
    nodeIntegration: false // 默认关闭，禁止渲染进程直接访问Node API
  }
});

2. 新建preload.js文件，用contextBridge把需要的ipcRenderer方法暴露给渲染进程：

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

// 给HTML全局对象添加自定义API，只暴露必要的方法
contextBridge.exposeInMainWorld('electronAPI', {
  sendMessage: (channel, data) => ipcRenderer.send(channel, data),
  receiveMessage: (channel, callback) => ipcRenderer.on(channel, (_, ...args) => callback(...args))
});

3. 在HTML文件中直接使用全局的electronAPI：

<script>
  // 给主进程发送消息
  electronAPI.sendMessage('greet', 'Hello from HTML');
  
  // 接收主进程返回的消息
  electronAPI.receiveMessage('greet-reply', (data) => {
    console.log('主进程回复：', data);
  });
</script>

临时方案：开启Node集成（不建议生产环境使用） #

如果是开发阶段图省事，也可以开启Node集成，这样HTML里能直接调用require，但生产环境绝对不能这么做，存在严重安全风险：

1. 修改主进程配置：

// index.js
const { BrowserWindow } = require('electron');

const mainWindow = new BrowserWindow({
  webPreferences: {
    nodeIntegration: true,
    contextIsolation: false
  }
});

2. HTML中直接使用：

<script>
  const { ipcRenderer } = require('electron');
  // 正常调用ipcRenderer方法即可
  ipcRenderer.send('test-channel', 'test data');
</script>

注意：Electron 14及以上版本已废弃remote模块，不建议再使用该方式。

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