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 相关文章推荐
跨浏览器的设置innerHTML方法
Sep 18 Javascript
JS Date函数整理方便使用
Oct 23 Javascript
JQuery each打印JS对象的方法
Nov 13 Javascript
javascripit实现密码强度检测代码分享
Dec 12 Javascript
js获取select选中的option的text示例代码
Dec 19 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
Mar 30 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
Apr 14 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
Jun 13 Javascript
vue生成token并保存到本地存储中
Jul 17 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 Javascript
javascript实现移动端红包雨页面
Jun 23 Javascript
基于原生JS封装的Modal对话框插件的示例代码
Sep 09 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合并数组中相同元素的方法
2014/11/13 PHP
php用户注册信息验证正则表达式
2015/11/12 PHP
用JavaScript实现动画效果的方法
2013/07/20 Javascript
jquery中each方法示例和常用选择器
2014/07/08 Javascript
jquery访问ashx文件示例代码
2014/08/11 Javascript
使用jquery实现放大镜效果
2014/09/02 Javascript
Ajax中解析Json的两种方法对比分析
2015/06/25 Javascript
基于JavaScript实现动态添加删除表格的行
2016/02/01 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
2016/02/29 Javascript
js实现html table 行,列锁定的简单实例
2016/10/13 Javascript
CSS+jQuery实现简单的折叠菜单
2016/12/20 Javascript
js实现图片360度旋转
2017/01/22 Javascript
easy ui datagrid 从编辑框中获取值的方法
2017/02/22 Javascript
Angular.JS通过指令操作DOM的方法
2017/05/10 Javascript
vue-star评星组件开发实例
2018/03/01 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
2018/09/11 Javascript
Vue实现移动端左右滑动效果的方法
2018/11/27 Javascript
vue自定义正在加载动画的例子
2019/11/14 Javascript
关于angular引入ng-zorro的问题浅析
2020/09/09 Javascript
vue项目中js-cookie的使用存储token操作
2020/11/13 Javascript
讲解python参数和作用域的使用
2013/11/01 Python
python之Socket网络编程详解
2016/09/29 Python
Python 中urls.py:URL dispatcher(路由配置文件)详解
2017/03/24 Python
深入学习Python中的上下文管理器与else块
2017/08/27 Python
Python爬虫包BeautifulSoup实例(三)
2018/06/17 Python
详解如何将python3.6软件的py文件打包成exe程序
2018/10/09 Python
python中aioysql(异步操作MySQL)的方法
2019/04/11 Python
python程序快速缩进多行代码方法总结
2019/06/23 Python
python中metaclass原理与用法详解
2019/06/25 Python
Python可视化工具如何实现动态图表
2020/10/23 Python
Shopee越南:东南亚与台湾电商平台
2019/02/03 全球购物
Myprotein芬兰官网:欧洲第一运动营养品牌
2019/05/05 全球购物
马来西亚在线购物市场:PGMall.my
2019/10/13 全球购物
监察建议书范文
2014/03/12 职场文书
使用springMVC所需要的pom配置
2021/09/15 Java/Android
MySQL Server 层四个日志
2022/03/31 MySQL