“未捕获的引用错误：未定义需求”Electron

Question

这似乎是一个简单的错误，但我到处都看到人们以某种方式在 HTML 中使用 Node.js。我正在使用 Electron 并尝试对关闭按钮进行简单的替换，并且在我查看有关此的教程和问题的任何地方，他们都会告诉您使用此代码：

const {BrowserWindow} = require('electron').remote

document.getElementById("close-btn").addEventListener("click", (e) => {
    var window = BrowserWindow.getFocusedWindow();
    window.close();
});

但显然这不起作用，因为

require

是一个 Node.js 函数。我无法将其移动到我的 Node.js 代码中，因为它无法访问按钮并且不会创建侦听器。

我还没有看到其他人遇到这个问题，而且我对 Node.js 和 Electron 非常不熟悉。

有没有办法可以从 JS 运行 Node 文件本身并将输出放入普通 JS 中。

Answer 1

所以，这是一个简单的技巧，可以让您在渲染器进程（窗口）中使用 require。

创建窗口时，您只需在

preload

中包含

webPreferences

参数即可：

1. 在您的主进程 (main.js) 中，将

   webPreferences

   添加到您的脚本中：

mainWindow = new BrowserWindow({
  webPreferences: {
    preload: path.join(__dirname, "preload.js")
  }
});

2. 在 main.js 文件所在的目录中创建一个名为

   preload.js

   的文件，并将其添加到其中：

const { contextBridge } = require("electron");

contextBridge.exposeInMainWorld("versions", {
  node: () => process.versions.node,
  chrome: () => process.versions.chrome,
  electron: () => process.versions.electron,
  // We can also expose variables, not just functions
});

对于 require 函数：

contextBridge.exposeInMainWorld("require", require);

现在您应该能够在 HTML 中使用

require

。

了解更多信息https://www.electronjs.org/docs/latest/tutorial/tutorial-preload

Answer 2

我也面临着同样的问题。有解决办法吗？