electron 应用程序由两个主要进程类型组成：
当在渲染进程（例如在 index.html 中通过 <script> 标签加载的 JavaScript 文件）中尝试使用 require('util') 或 require('child_process') 时，如果 Electron 的默认安全设置生效，require 函数将是未定义的，从而导致脚本执行中断。这就是为什么在 Node.js 环境中单独运行 get_screenshot.js 脚本时没有问题，但在 Electron 渲染进程中却会失败的原因。
要允许渲染进程直接访问 Node.js API，需要在创建 BrowserWindow 实例时，通过 webPreferences 配置对象来调整其安全设置。
以下是解决此问题的关键配置：
const { app, BrowserWindow } = require('electron');
const path = require('path');
let mainWindow;
function createWindow() {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
// 启用 Node.js 集成，允许在渲染进程中使用 require 等 Node.js API
nodeIntegration: true,
// 禁用上下文隔离，将 Node.js 环境与渲染进程的全局上下文合并
// 如果 contextIsolation 为 true，即使 nodeIntegration 为 true，require 也可能不可用，
// 因为 Node.js API 会被注入到独立的上下文中。
contextIsolation: false,
// 如果需要加载本地文件，可以考虑设置
// preload: path.join(__dirname, 'preload.js') // 更安全的做法
}
});
// 加载你的 HTML 文件
mainWindow.loadFile('index.html');
// 打开开发者工具 (可选)
// mainWindow.webContents.openDevTools();
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});配置项详解：
考虑原始的 get_screenshot.js 文件：
// get_screenshot.js
const util = require('util'); // <-- 问题发生在这里
const childProcess = require('child_process');
document.getElementById('test_id').innerHTML = "Require passed!"; // <-- 此行未被执行
const exec = util.promisify(childProcess.exec);
const screenshot = async () => { // 修改为 async 函数
try {
const { stdout, stderr } = await exec('adb exec-out screencap -p'); // 使用 await
if (stderr) {
console.error('stderr:', stderr);
return;
}
const screenshotData = stdout;
displayScreenshot(screenshotData);
} catch (error) {
console.error('Error taking screenshot:', error);
}
}
function displayScreenshot(screenshotData) {
const imageData = `data:image/png;base64,${screenshotData}`;
const imgElement = document.getElementById('screenshotImage');
if (imgElement) { // 检查元素是否存在
imgElement.src = imageData;
}
}
screenshot();以及 index.html：
<html>
<head>
<title>Display Screenshot</title>
</head>
<body>
<img id="screenshotImage" src="" alt="Screenshot">
<h1 id="test_id">No</h1>
<!-- 注意：type="module" 意味着脚本作为 ES 模块加载。
虽然 require 是 CommonJS 语法，但在 nodeIntegration 开启且 contextIsolation 关闭时，
Node.js 环境的 require 仍可用于加载 Node.js 内置模块或 CommonJS 模块。
这里的核心问题是 Node.js API 的可访问性，而非模块系统本身的冲突。
-->
<script src="get_screenshot.js" type="module"></script>
</body>
</html>在未配置 nodeIntegration: true 和 contextIsolation: false 之前，当 get_screenshot.js 脚本在渲染进程中执行到 const util = require('util'); 这一行时，由于 require 函数在渲染进程的默认环境中是未定义的，脚本会抛出错误并停止执行。因此，document.getElementById('test_id').innerHTML = "Require passed!"; 这一行永远不会被执行到。
通过上述 BrowserWindow 配置，渲染进程现在可以访问 Node.js API，require 函数将可用，脚本可以正常执行，并能够调用 child_process.exec 执行 shell 命令。
虽然启用 nodeIntegration 和禁用 contextIsolation 可以解决问题，但这会带来严重的安全风险，尤其是在加载外部或不受信任的内容时。因为这允许网页内容直接访问用户计算机上的文件系统、执行系统命令等。
强烈建议在生产环境中避免使用 nodeIntegration: true 和 contextIsolation: false。
更安全、更推荐的替代方案包括：
使用 IPC (Inter-Process Communication)：
示例 (概念性):
主进程 (main.js):
const { ipcMain } = require('electron');
const { exec } = require('child_process');
ipcMain.handle('run-shell-command', async (event, command) => {
try {
const { stdout, stderr } = await exec(command);
if (stderr) throw new Error(stderr);
return { success: true, data: stdout };
} catch (error) {
return { success: false, error: error.message };
}
});渲染进程 (renderer.js):
const { ipcRenderer } = require('electron');
async function getScreenshot() {
const result = await ipcRenderer.invoke('run-shell-command', 'adb exec-out screencap -p');
if (result.success) {
displayScreenshot(result.data);
} else {
console.error('Failed to get screenshot:', result.error);
}
}使用 Preload Script 和 contextBridge：
示例 (概念性):
主进程 (main.js):
// ... (BrowserWindow setup)
mainWindow = new BrowserWindow({
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
nodeIntegration: false, // 禁用直接的 Node.js 集成
contextIsolation: true // 启用上下文隔离，推荐
}
});
// ...Preload 脚本 (preload.js):
const { contextBridge, ipcRenderer } = require('electron');
const { exec } = require('child_process'); // Preload 脚本可以访问 Node.js API
contextBridge.exposeInMainWorld('electronAPI', {
getScreenshotData: async () => {
try {
const { stdout, stderr } = await exec('adb exec-out screencap -p');
if (stderr) throw new Error(stderr);
return stdout;
} catch (error) {
console.error('Error in preload script:', error);
throw error;
}
}
});渲染进程 (renderer.js):
async function getScreenshot() {
try {
const screenshotData = await window.electronAPI.getScreenshotData();
displayScreenshot(screenshotData);
} catch (error) {
console.error('Failed to get screenshot:', error);
}
}在 Electron 渲染进程中遇到 require 未定义的问题，是由于 Electron 默认的安全策略限制了 Node.js API 的直接访问。通过在 BrowserWindow 的 webPreferences 中设置 nodeIntegration: true 和 contextIsolation: false 可以解决此问题。然而，为了应用程序的安全性，特别是在处理外部或不受信任的内容时，强烈建议采用 IPC 或 Preload Script 结合 contextBridge 的方式，以更安全、更可控地在渲染进程中执行 Node.js 相关操作。
以上就是Electron 渲染进程中 Node.js API 访问问题解析与解决方案的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
501
