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 相关文章推荐
Google Map API更新实现用户自定义标注坐标
Jul 29 Javascript
jquery多选项卡效果实例代码(附效果图)
Mar 23 Javascript
Javascript排序算法之计数排序的实例
Apr 05 Javascript
JavaScript中的Function函数
Aug 27 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
Dec 15 Javascript
jquery把int类型转换成字符串类型的方法
Oct 07 Javascript
jQuery实现文档树效果
Feb 20 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
Aug 04 Javascript
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
JS性能优化实现方法及优点进行
Aug 30 Javascript
微信小程序实现倒计时功能
Nov 19 Javascript
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
详解使用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
我的论坛源代码(四)
2006/10/09 PHP
php以fastCGI的方式运行时文件系统权限问题及解决方法
2015/05/11 PHP
php实现的mongodb操作类
2015/05/28 PHP
laravel添加前台跳转成功页面示例
2019/10/22 PHP
Laravel框架中队列和工作(Queues、Jobs)操作实例详解
2020/04/06 PHP
JavaScript中的Math.E属性使用详解
2015/06/12 Javascript
jquery组件WebUploader文件上传用法详解
2020/10/23 Javascript
Node.js Express 框架 POST方法详解
2017/01/23 Javascript
Bootstrap模态框使用详解
2017/02/15 Javascript
NodeJS学习笔记之Module的简介
2017/03/24 NodeJs
JS实现标签滚动切换效果
2017/12/25 Javascript
微信开发之微信jssdk录音功能开发示例
2018/10/22 Javascript
js字符串类型String常用操作实例总结
2019/07/05 Javascript
js回溯法计算最佳旅行线路代码实例
2019/09/11 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
2020/10/29 Javascript
Django原生sql也能使用Paginator分页的示例代码
2017/11/15 Python
使用Python实现从各个子文件夹中复制指定文件的方法
2018/10/25 Python
Python玩转Excel的读写改实例
2019/02/22 Python
如何使用python爬虫爬取要登陆的网站
2019/07/12 Python
pytorch实现focal loss的两种方式小结
2020/01/02 Python
python GUI库图形界面开发之PyQt5多线程中信号与槽的详细使用方法与实例
2020/03/08 Python
Django框架models使用group by详解
2020/03/11 Python
python网络编程之五子棋游戏
2020/05/14 Python
python中_del_还原数据的方法
2020/12/09 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
HTML5 embed标签定义和用法详解
2014/05/09 HTML / CSS
Orvis官网:自1856年以来,优质服装、飞钓装备等
2018/12/17 全球购物
Viking Direct爱尔兰:办公用品和家具
2019/11/21 全球购物
荷兰度假屋租赁网站:Aan Zee
2020/02/28 全球购物
梅西百货官网:Macy’s
2020/08/04 全球购物
波兰家居饰品和厨房配件网上商店:Maleomi
2020/12/15 全球购物
2013年办公室秘书的个人自我鉴定
2013/10/24 职场文书
小学生一分钟演讲稿
2014/08/26 职场文书
python 破解加密zip文件的密码
2021/04/22 Python
Python中Numpy和Matplotlib的基本使用指南
2021/11/02 Python
Vue elementUI表单嵌套表格并对每行进行校验详解
2022/02/18 Vue.js