node.js - 即使将 nodeIntegration 设置为 true，Electron window.require 也不是函数

Question

我在制作 Electron + Create React App 应用时遇到了一些问题。这是一个用于成本计算的离线应用程序，我需要保留一些用户设置，为此我使用了 https://github.com/sindresorhus/electron-store .与大多数 Electron 模块一样，我必须将其导入为:

const Store = window.require("electron-store");

为了避免 webpack 的冲突。通过搜索，我发现对于大多数人来说，在创建 Electron 的 BrowserWindow 时设置 nodeIntegration: true 可以避免这个问题，但不是我的情况，我总是遇到同样的错误。

我已经尝试过的:

1. 使用普通的 require:它会导致 TypeError: fs.existsSync is not a function，并且在控制台中:Can't resolve 'worker_threads' in '...\node_modules\write-file-atomic'

2. 使用模块覆盖 webpack 配置:我使用 craco 将目标设置为 Electron 渲染器。当我启动应用程序时，它会导致一个空白页面，并在 devtools 中显示一个错误，告诉 ReferenceError: require is not defined

附加信息是我没有使用 typescript ，而是使用普通 js，因此使用“声明全局”这样的操作不起作用

我的 public/electron.js 文件:

const electron = require("electron");
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

const path = require("path");
const isDev = require("electron-is-dev");

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 900,
    height: 680,
    webPreferences: {
      nodeIntegration: true
    }
  });
  mainWindow.loadURL(
    isDev
      ? "http://localhost:3000"
      : `file://${path.join(__dirname, "../build/index.html")}`
  );
  mainWindow.on("closed", () => (mainWindow = null));
  if (!isDev) mainWindow.setMenu(null);
}

app.on("ready", createWindow);

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

electron.app.allowRendererProcessReuse = true;

app.on("activate", () => {
  if (mainWindow === null) {
    createWindow();
  }
});

Answer 1

你已经在 Electron 上创建了一个预加载脚本。

1. 在你有 de electron 主脚本的目录下创建一个名为 preload.js 的文件，把这段代码放在上面:

   window.require = 要求；

2. 转到您的 Electron 主脚本并在您创建窗口的代码中输入以下内容:

   win = new BrowserWindow({宽度:1280，高度:720，网络偏好:{ Node 集成:假，预加载:__dirname + '/preload.js'},

   })有了这个，您将首先预加载脚本，这解决了我的问题，我希望也适用于您。