Electron 如何调用本地模块的方法


Posted in Javascript onFebruary 01, 2019

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

那么如何在页面中调用 Node API 呢?

碰到了一些坑…

先从页面加载方式说起,Electron 中加载页面的方式有两种:
一种是直接加载本地文件,另一种是通过 http 网络请求页面。

//方法1 本地路径
win.loadURL(url.format({
  pathname: path.join(__dirname, '/dist/index.html'),
  protocol: 'file:',
  slashes: true
}));
//方法2 网络路径
win.loadURL('http://localhost:3000');

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

var local = window.nodeRequire('local');

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

can not find module xxx

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

Electron 如何调用本地模块的方法

重点在下面两个变量,从 Http 加载页面时,由于路径是网络地址,所以 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 时,pathname 指向正确的路径,而且 paths 中也包含了多个 node_modules 路径,module在初始化时会将当前路径以及上一级、上上一级…直到根目录的 node_modules 作为搜索路径。

Electron 如何调用本地模块的方法

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

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

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

Module._resolveFilename = function(request, parent, isMain) {
 if (NativeModule.nonInternalExists(request)) {
  return request;
 }

 var resolvedModule = Module._resolveLookupPaths(request, parent);
 var id = resolvedModule[0];
 var paths = resolvedModule[1];

 // look up the filename first, since that's the cache key.
 debug('looking for %j in %j', id, paths);

 var filename = Module._findPath(request, paths, isMain);
 if (!filename) {
  var err = new Error("Cannot find module '" + request + "'");
  err.code = 'MODULE_NOT_FOUND';
  throw err;
 }
 return filename;
};

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

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

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

// In main process.
const {ipcMain} = require('electron')
ipcMain.on('asynchronous-message', (event, arg) => {
 console.log(arg) // prints "ping"
 event.sender.send('asynchronous-reply', 'pong')
})

ipcMain.on('synchronous-message', (event, arg) => {
 console.log(arg) // prints "ping"
 event.returnValue = 'pong'
})
// In renderer process (web page).
const {ipcRenderer} = require('electron')
console.log(ipcRenderer.sendSync('synchronous-message', 'ping')) // prints "pong"

ipcRenderer.on('asynchronous-reply', (event, arg) => {
 console.log(arg) // prints "pong"
})
ipcRenderer.send('asynchronous-message', 'ping')

但其实有更简单的方法,使用 remote 模块来直接调用:

const remote = window.nodeRequire('electron').remote;
var local = remote.require('local');

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

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

// Patch Module._resolveFilename to always require the Electron API when
// require('electron') is done.
const electronPath = path.join(__dirname, '..', process.type, 'api', 'exports', 'electron.js')
const originalResolveFilename = Module._resolveFilename
Module._resolveFilename = function (request, parent, isMain) {
 if (request === 'electron') {
  return electronPath
 } else {
  return originalResolveFilename(request, parent, isMain)
 }
}

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js渐变显示渐变消失示例代码
Aug 01 Javascript
js setTimeout()函数介绍及应用以倒计时为例
Dec 12 Javascript
动态加载脚本提升javascript性能
Feb 24 Javascript
javascript弹出拖动窗口
Aug 11 Javascript
分享javascript实现的冒泡排序代码并优化
Jun 05 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
Jul 01 Javascript
js设置和获取自定义属性的方法
Oct 20 Javascript
简单理解vue中el、template、replace元素
Oct 27 Javascript
前端开发必知的15个jQuery小技巧
Jan 22 Javascript
基于 Bootstrap Datetimepicker 联动
Aug 03 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
Mar 01 Javascript
微信小程序之高德地图多点路线规划过程示例详解
Jan 18 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
Feb 01 #Javascript
原来JS还可以这样拆箱转换详解
Feb 01 #Javascript
微信小程序拍照和摄像功能实现方法示例
Feb 01 #Javascript
微信小程序常用简易小函数总结
Feb 01 #Javascript
使用Angular自定义字段校验指令的方法示例
Feb 01 #Javascript
angular中如何绑定iframe中src的方法
Feb 01 #Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
Feb 01 #Javascript
You might like
php自动加载机制的深入分析
2013/06/08 PHP
PHP调用MySQL存储过程并返回值的方法
2014/12/26 PHP
利用“多说”制作留言板、评论系统
2015/07/14 PHP
php实现异步数据调用的方法
2015/12/24 PHP
验证坐标在某坐标区域内php代码
2016/10/08 PHP
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
2013/02/04 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
2015/04/15 Javascript
JavaScript常用数组算法小结
2016/02/13 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
AngularJS基础 ng-repeat 指令简单示例
2016/08/03 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
2017/01/18 Javascript
详解小程序不同页面之间通讯的解决方案
2018/11/23 Javascript
微信小程序官方动态自定义底部tabBar的例子
2019/09/04 Javascript
JavaScript中ES6规范中let和const的用法和区别
2020/08/06 Javascript
pandas求两个表格不相交的集合方法
2018/12/08 Python
对pandas读取中文unicode的csv和添加行标题的方法详解
2018/12/12 Python
Python实现的旋转数组功能算法示例
2019/02/23 Python
pycharm修改文件的默认打开方式的步骤
2019/07/29 Python
Python3多线程版TCP端口扫描器
2019/08/31 Python
Python Django view 两种return的实现方式
2020/03/16 Python
详解Python openpyxl库的基本应用
2021/02/26 Python
CSS3实现10种Loading效果
2016/07/11 HTML / CSS
GLAMGLOW格莱魅美国官网:美国知名的面膜品牌
2016/12/31 全球购物
Linux面试题LINUX系统类
2014/11/19 面试题
交通专业个人自荐信格式
2013/09/23 职场文书
实习教师个人的自我评价
2013/11/08 职场文书
《奇妙的国际互联网》 教学反思
2014/02/25 职场文书
欢迎横幅标语
2014/06/17 职场文书
公司采购主管岗位职责
2014/06/17 职场文书
关于诚信的活动方案
2014/08/18 职场文书
校园环保广播稿(3篇)
2014/09/15 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
货款欠条范本
2015/07/03 职场文书
小学语文教师研修日志
2015/11/13 职场文书
八年级地理课件资料及考点知识分享
2019/08/30 职场文书
Python中的pprint模块
2021/11/27 Python