Electron中require未定义，寻求jQuery正确使用方法

方法一：使用预加载脚本（推荐，符合安全规范） #

这是Electron官方推荐的安全方案，既能实现Node模块的调用，又能避免渲染进程直接暴露完整Node环境带来的风险。

1. 创建预加载脚本（比如preload.js）：

// preload.js
const { contextBridge } = require('electron');
const jQuery = require('jquery');

// 仅向渲染进程暴露jQuery核心对象，限制API访问范围
contextBridge.exposeInMainWorld('$', jQuery);

2. 主进程配置预加载脚本：
   在主进程文件（如main.js）中，创建BrowserWindow时指定preload路径：

// main.js
const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false, // 保持禁用，避免安全风险
      contextIsolation: true, // 启用上下文隔离，默认已开启
      preload: path.join(__dirname, 'preload.js')
    }
  });

  mainWindow.loadFile('index.html');
}

app.whenReady().then(createWindow);

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) createWindow();
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

3. index.html中直接使用jQuery：
   无需手动引入，直接调用全局暴露的$即可：

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Electron jQuery Demo</title>
</head>
<body>
  <div id="demo">Hello Electron + jQuery!</div>
  <script>
    $(document).ready(() => {
      $('#demo').css('color', '#2ecc71');
    });
  </script>
</body>
</html>

方法二：通过CDN引入（无需Node模块） #

如果不需要通过npm管理jQuery，可直接在index.html中引入CDN资源，完全不涉及Node API：

<!-- index.html -->
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
  <script>
    $(() => {
      console.log('jQuery loaded via CDN');
    });
  </script>
</body>

你之前的方法失效原因 #

Electron从v5版本开始默认禁用nodeIntegration并启用contextIsolation，渲染进程无法直接调用require()，这是为了防止恶意页面利用Node API发起攻击。直接在index.html中写require("jquery")自然会触发require() is not defined错误。

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