即使将 nodeIntegration 设置为 true，Electron window.require 也不是一个函数

Question

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

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

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

我已经尝试过的：

1. 使用普通的 require：它会导致 TypeError: fs.existsSync is not a function, and in console: Can't revok 'worker_threads' in '...\node_modules\write-file-atomic'

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

附加信息是我没有使用打字稿，而是使用普通的 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

您必须在电子上创建预加载脚本。

1. 在 de Electron 主脚本所在的目录中创建一个名为 preload.js 的文件，将以下代码放入其中：

   窗口.require = 要求;

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

   win = new BrowserWindow({ 宽度: 1280, 高度: 720, webPreferences: { nodeIntegration: false, 预加载: __dirname + '/preload.js' },

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