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 相关文章推荐
Prototype使用指南之selector.js说明
Oct 26 Javascript
JavaScript 原型继承之构造函数继承
Aug 26 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
May 20 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
Feb 05 Javascript
让IE8浏览器支持function.bind()方法
Oct 16 Javascript
AngularJS入门教程中SQL实例详解
Jul 27 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
Sep 14 Javascript
ES6学习教程之模板字符串详解
Oct 09 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
Oct 10 Javascript
JavaScript变量作用域及内存问题实例分析
Jun 10 Javascript
javascript中的this作用域详解
Jul 15 Javascript
详解如何在JS代码中消灭for循环
Dec 11 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
详细介绍:Apache+PHP+MySQL配置攻略
2006/09/05 PHP
php实现的常见排序算法汇总
2014/09/08 PHP
dedecms中使用php语句指南
2014/11/13 PHP
浅析php单例模式
2014/11/25 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
javascript下对于事件、事件流、事件触发的顺序随便说说
2010/07/17 Javascript
jquery控制listbox中项的移动并排序的实现代码
2010/09/28 Javascript
jQuery+AJAX实现网页无刷新上传
2015/02/22 Javascript
jQuery解析XML文件同时动态增加js文件的方法
2015/06/01 Javascript
AngularJS中的过滤器使用详解
2015/06/16 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
2017/02/20 Javascript
vue 左滑删除功能的示例代码
2019/01/28 Javascript
深入解析koa之异步回调处理
2019/06/17 Javascript
JS实现随机抽选获奖者
2019/11/07 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
2019/12/04 Javascript
Vue中避免滥用this去读取data中数据
2021/03/02 Vue.js
[58:12]Ti4第二日主赛事败者组 LGD vs iG 3
2014/07/21 DOTA
[04:28]DOTA2亚洲邀请赛小组赛第五日 TOP10精彩集锦
2015/02/03 DOTA
[01:48]帕吉至宝加入游戏,遗迹战场现“千劫神屠”
2018/04/07 DOTA
编写Python脚本来实现最简单的FTP下载的教程
2015/05/04 Python
Python的Flask框架标配模板引擎Jinja2的使用教程
2016/07/12 Python
Django在win10下的安装并创建工程
2017/11/20 Python
Python3 操作符重载方法示例
2017/11/23 Python
Python判断两个对象相等的原理
2017/12/12 Python
python字符串,元组,列表,字典互转代码实例详解
2020/02/14 Python
python爬虫使用正则爬取网站的实现
2020/08/03 Python
html5定制表单_动力节点Java学院整理
2017/07/11 HTML / CSS
收银员的岗位职责范本
2014/02/04 职场文书
绿色环保标语
2014/06/12 职场文书
公司的门卫岗位职责
2014/09/09 职场文书
2014年销售经理工作总结
2014/12/01 职场文书
小学英语教学反思范文
2016/02/15 职场文书
《圆明园的毁灭》教学反思
2016/02/16 职场文书
python中的被动信息搜集
2021/04/29 Python
BCL经典机 SONY ICF-5900W电路分析
2022/04/24 无线电
win10识别不了U盘怎么办 win10系统读取U盘失败的解决办法
2022/08/05 数码科技