electron中加载html,Electron如何调用本地模块的方法

Electron 结合了 Chromium、Node.js 和用于调用操作系统本地功能的 API(如打开文件窗口、通知、图标等&＃xff0c;基于 Electron 的开发&＃xff0c;就好像开发一个网页一样&＃xff0c;而且能够无缝地使用 Node。或者说&＃xff1a;就好像构建一个 Node app&＃xff0c;并通过 HTML 和 CSS 构建界面。

那么如何在页面中调用 Node API 呢&＃xff1f;

碰到了一些坑…

先从页面加载方式说起&＃xff0c;Electron 中加载页面的方式有两种&＃xff1a;

一种是直接加载本地文件&＃xff0c;另一种是通过 http 网络请求页面。

//方法1 本地路径

win.loadURL(url.format({

pathname: path.join(__dirname, &＃39;/dist/index.html&＃39;),

protocol: &＃39;file:&＃39;,

slashes: true

}));

//方法2 网络路径

win.loadURL(&＃39;http://localhost:3000&＃39;);

现在我想要在某个js文件中引用一个本地的 npm 包&＃xff0c;其中包含 Node API&＃xff0c;所以在浏览器中无法使用。

var local &＃61; window.nodeRequire(&＃39;local&＃39;);

此时出现一个问题&＃xff0c;使用方法1运行正常&＃xff0c;但使用方法2时报错&＃xff0c;但是如果使用方法1&＃xff0c;每次修改完代码都需要先打包一遍&＃xff0c;再使用 Electron 启动&＃xff0c;耗时耗力啊。继续寻找解决方法。

can not find module xxx

调试发现在使用网络文件时&＃xff0c;在调用 module.js 中的 Module._load 函数时参入的参数 parent 为

重点在下面两个变量&＃xff0c;从 Http 加载页面时&＃xff0c;由于路径是网络地址&＃xff0c;所以 Electron 将文件名设置为 Electron 安装目录下的 init.js.

filename: "C:\Users\asus\AppData\Roaming\npm\node_modules\electron\dist\resources\electron.asar\renderer\init.js"

paths: Array[0]

而在使用本地 index.html 时&＃xff0c;pathname 指向正确的路径&＃xff0c;而且 paths 中也包含了多个 node_modules 路径&＃xff0c;module在初始化时会将当前路径以及上一级、上上一级…直到根目录的 node_modules 作为搜索路径。

filename: "E:\WebStormWorkspace\electron_require\index.html"

从下面 module.js 源码可以看到&＃xff0c;文件名解析的时候正式利用了这个 paths 中的路径。因为 paths 中的空的&＃xff0c;所以找不到所需要的模块。

其实 Electron 是从安全的角度考虑&＃xff0c;在从 Http 请求中加载网页时&＃xff0c;如果能直接调用本地的一些模块&＃xff0c;会比较危险。

Module._resolveFilename &＃61; function(request, parent, isMain) {

if (NativeModule.nonInternalExists(request)) {

return request;

}

var resolvedModule &＃61; Module._resolveLookupPaths(request, parent);

var id &＃61; resolvedModule[0];

var paths &＃61; resolvedModule[1];

// look up the filename first, since that&＃39;s the cache key.

debug(&＃39;looking for %j in %j&＃39;, id, paths);

var filename &＃61; Module._findPath(request, paths, isMain);

if (!filename) {

var err &＃61; new Error("Cannot find module &＃39;" &＃43; request &＃43; "&＃39;");

err.code &＃61; &＃39;MODULE_NOT_FOUND&＃39;;

throw err;

}

return filename;

};

此时很自然地想到可以把所需要模块的路径加入到 paths 中去&＃xff0c;但这其实是不可行的&＃xff0c;Electron 包含主进程和渲染进程&＃xff0c;主进程就是这里命名main.js 的文件&＃xff0c;该文件是每个 Electron 应用的入口。它控制了应用的生命周期(从打开到关闭)。它能调用原生元素和创建新的(多个)渲染进程&＃xff0c;而且整个 Node API 是内置其中的。

渲染进程就是一个浏览器窗口&＃xff0c;现在我们的 js 跑在渲染进程里面&＃xff0c;所以我们并不能直接在主进程里面修改渲染进程的数据。

Electron 提供了 IPC 接口专门用于主进程和渲染进程之间的通信&＃xff0c;他提供了同步和异步两种方法&＃xff0c;同步方法直接设置 event.returnValue&＃xff0c;异步方法使用 event.sender.send(…).

// In main process.

const {ipcMain} &＃61; require(&＃39;electron&＃39;)

ipcMain.on(&＃39;asynchronous-message&＃39;, (event, arg) &＃61;> {

console.log(arg) // prints "ping"

event.sender.send(&＃39;asynchronous-reply&＃39;, &＃39;pong&＃39;)

})

ipcMain.on(&＃39;synchronous-message&＃39;, (event, arg) &＃61;> {

console.log(arg) // prints "ping"

event.returnValue &＃61; &＃39;pong&＃39;

})

// In renderer process (web page).

const {ipcRenderer} &＃61; require(&＃39;electron&＃39;)

console.log(ipcRenderer.sendSync(&＃39;synchronous-message&＃39;, &＃39;ping&＃39;)) // prints "pong"

ipcRenderer.on(&＃39;asynchronous-reply&＃39;, (event, arg) &＃61;> {

console.log(arg) // prints "pong"

})

ipcRenderer.send(&＃39;asynchronous-message&＃39;, &＃39;ping&＃39;)

但其实有更简单的方法&＃xff0c;使用 remote 模块来直接调用&＃xff1a;

const remote &＃61; window.nodeRequire(&＃39;electron&＃39;).remote;

var local &＃61; remote.require(&＃39;local&＃39;);

这样子就可以直接使用外部模块了&＃xff0c;这里为什么能引用 electron 模块&＃xff0c;而其他的不可以呢&＃xff1f;

继续看源码, Electron 重写了 Module._resolveFilename 函数&＃xff0c;在 require(‘electron&＃39;) 时&＃xff0c;就直接返回路径&＃xff0c;所以就可以找到啦。

// Patch Module._resolveFilename to always require the Electron API when

// require(&＃39;electron&＃39;) is done.

const electronPath &＃61; path.join(__dirname, &＃39;..&＃39;, process.type, &＃39;api&＃39;, &＃39;exports&＃39;, &＃39;electron.js&＃39;)

const originalResolveFilename &＃61; Module._resolveFilename

Module._resolveFilename &＃61; function (request, parent, isMain) {

if (request &＃61;&＃61;&＃61; &＃39;electron&＃39;) {

return electronPath

} else {

return originalResolveFilename(request, parent, isMain)

}

}

}.call(this, exports, require, module, __filename, __dirname); });

以上就是本文的全部内容&＃xff0c;希望对大家的学习有所帮助&＃xff0c;也希望大家多多支持脚本之家。