electron前端项目无法使用require引入node模块解决方案

新版 electron (>12) 出现 window.require is not a function

新版 electron 禁止在 window 上随意添加属性，所以这种方式会报错。

关键时，使用新建 BrowserWindow webPreferences 的一个特殊属性 preload

preload 字符串（可选）- 指定在页面中其他脚本运行之前被加载的脚本。 无论打开还是关闭 integratioin，此脚本始终可以访问 node API。

第一步，创建 preload 脚本，在哪里都可以，我选择和 main.js 在同一位置下。

preload.js

// 在这个文件中可以访问所有的 nodejs API，我们将 require 扩展到 window 上面去
window.require = require

main.js

const { app, BrowserWindow } = require('electron');
const isDev = require('electron-is-dev');
const path = require('path');

let mainWindow = null;


app.on('ready', () => {
    mainWindow = new BrowserWindow({
        width: 1024,
        height: 680,
        webPreferences: {
            nodeIntegration: true,
            preload: path.join(__dirname, 'preload.js'),
            // https://www.electronjs.org/zh/docs/latest/tutorial/context-isolation
            // 关闭上下文隔离，它会让 preload 里面的内容和 renderer 无法互相访问，默认为 true，设置为 false
            contextIsolation: false,
        }
    })

    mainWindow.webContents.openDevTools();

    // 连接react项目链接
    const loadURL = isDev ? 'http://localhost:3000' : '暂时还不定义'
    mainWindow.loadURL(loadURL);
})

注意安全哦。