将电子渲染器添加到 webpack 时“未定义要求”答案

【问题标题】：'Require is not defined' when adding electron-renderer to webpack将电子渲染器添加到 webpack 时“未定义要求”
【发布时间】：2019-08-09 13:23:07
【问题描述】：

我正在开发一个电子应用程序。一切都很好，直到我想使用渲染器中的 IPC 来调用一些本机功能。我知道在我的 Webpack 配置中添加以下行将允许我在渲染器端导入电子。

module.exports = {
    // ...
    target: 'electron-renderer',
}

添加此行时出现以下错误

Uncaught ReferenceError: require is not defined

而违规行是

module.exports = require("querystring");

哪种有意义，因为浏览器不理解“需要”。

请注意，如果没有 electron-renderer 目标，应用程序运行良好，但我无法执行类似的操作

import {ipcRenderer} from 'electron';

有什么想法我可能做错了吗？谢谢！

【问题讨论】：

标签： javascript webpack electron

【解决方案1】：

AFAIU 推荐的方法是使用contextBridge 模块（在preload.js 脚本中）。它允许您保持启用上下文隔离，但安全地将您的 API 公开给网站运行的上下文。

https://www.electronjs.org/docs/latest/tutorial/context-isolation

按照这种方式，我也发现不再需要在 Webpack config 中指定 target 属性了。

【讨论】：

【解决方案2】：

也遇到了这个问题，新的答案：

mainWindow = new electron.BrowserWindow({
    width: width,
    height: height,
    webPreferences: {
        nodeIntegration: true,
        contextIsolation: false
    }
});

【讨论】：

【解决方案3】：

最近才遇到这个。需要注意的一件事是确保在创建渲染器窗口时将 nodeIntegration 设置为 true。

mainWindow = new electron.BrowserWindow({
    width: width,
    height: height,
    webPreferences: {
        nodeIntegration: true
    }
});

【讨论】：

请注意，nodeIntegration: true 通常是不安全。 electronjs.org/docs/tutorial/security
@AndreiCioara 很想知道你是否解决了这个问题，nodeIntegration: true 对我来说已经是正确的了，但我遇到了这个错误。
所以仅供参考，关于这个主题的每一篇文章都说同样的事情——将 nodeIntegration 设置为 true。当 nodeIntegration 是并且已经设置为 true，但仍然出现“require is not defined”时，你会怎么做？
我也有这个问题，nodeIntegration 也设置为 true。
我自己也在为这个问题苦苦挣扎，仍然得到nodeIntegration: true 的“require is not defined”。设置contextIsolation: false 也让它开始为我工作。