在Electron项目的渲染进程中无法使用require('electron')问题的解决方案

这几天在编写桌面看板娘的时候,发现在看板娘的渲染进程里只要调用electron库就会报错:Uncaught ReferenceError: require is not defined.通过爬了各种资料后,可以确定此报错由两个问题引起:

1.自从electron v5.0.0之后,electron官方为了加强安全性,在创建窗口时默认禁用nodeIntegration节点集成功能,这使得渲染进程处于沙箱中,无权调用electron库。

2.同时,在v12.0.0版本之后,electron官方再一次因为安全问题,在创建窗口时默认禁用了contextIsolationenableRemoteModule。因此,为了引入electron库,需要在创建窗口时如此设置:

在webPreferences 内加上nodeIntegration: true,enableRemoteModule: true,contextIsolation: false来强制打开这些默认关闭的设置,使得渲染进程内可以访问electron。

加上这些设置项后,总体的窗口初始化样例如下:

const win = new BrowserWindow({
width:  100, //宽度
height: 100, //高度
x: 300, //窗口x坐标位置
y: 500, //窗口y坐标位置
skipTaskbar: true,//不显示在任务栏
alwaysOnTop: true,//置顶显示
resizable: false,//不可调节大小
icon: './assets/app.ico', //窗口图标
webPreferences: {
devTools: true,
nodeIntegration: true,
enableRemoteModule: true,
contextIsolation: false,
zoomFactor: 1,
}
})

如果你的项目是纯纯的electron项目,那么到这里,你的渲染进程就能流畅地调用electron了。但是,我这里的看板娘渲染线程js内还调用了jQuery与autoload等其他库,如果只是简单地解除隔离,会导致库调用冲突,进而整个页面都没法正常运行。

因此,如果你的项目也调用了其他库进行使用,你需要在使用require之前,先对其进行重定义。你可以使用以下代码进行electron的引用而不影响已有库的使用:

window.nodeRequire = require;
delete window.require;
delete window.exports;
delete window.module;
const { ipcRenderer,shell } = nodeRequire('electron'); //Electron 依赖调入

之后,你就可以使用新定义的nodeRequire('electron')来引入electron库了。

最后,祝写的开心~(electron确实好写.jpg)

P.S:如果你用低版本Electron当然没这些事,但现在都16.0了不会还有人用几年前的版本吧不会吧

点赞
Title - Artist
0:00