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

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 为

重点在下面两个变量,从 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 作为搜索路径。

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); });

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

(0)

相关推荐

  • 前端Electron新手入门教程详解

    Electron 是什么 定义 Electron是一个能让你使用传统前端技术(Nodejs, Javascript, HTML, CSS)开发一个跨平台桌面应用的框架.这里所说的桌面应用指的是在Windows.OSX及Linux系统上运行的程序. 历史 2013年的时候,Atom编辑器问世,作为实现它的底层框架Electron也逐渐被熟知,到2014年时被开源,那时它还是叫Atom Shell. 接下来的几年,Electron在不断的更新迭代,几乎每年都有一个重大的里程碑 2013年4月11日,

  • electron-vue利用webpack打包实现多页面的入口文件问题

    项目需要在electron的项目中新打开一个窗口,利用webpack作为静态资源打包器,发现在webpack中可以设置多页面的入口,今天来讲一下我在electron中利用webpack建立多页面入口的踩坑经验. 1.webpack的核心概念 •Entry:入口,Webpack执行构建的第一步从Entry开始: •Module:模块,在Webpack里一切皆模块,一个模块对应着一个文件.Webpack会从配置的Entry开始递归找出所有依赖的模块. •Chunk:代码块,一个Chunk由多个模块组

  • Electron-vue开发的客户端支付收款工具的实现

    目前实现了支付宝当面付的扫码支付功能.二维码支付功能,即主动扫和被动扫.测试请使用支付宝沙箱环境,支付宝是沙箱版. 最终效果如下: 前端页面使用阿里的组件,ant-design-vue 通过node,使用nedb内存数据库进行本地数据存储 安装文件支持自定义.生成的exe,安装过程如下 程序代码简述 main.js import devtools from '@vue/devtools' import Vue from 'vue' import axios from 'axios' import

  • 详解使用webpack+electron+reactJs开发windows桌面应用

    electron是一两年前挺火的一个框架 本质上是一个浏览器,但是集成了很多windows系统的功能,让前端开发也可以直接操作windows的窗体,做成一个实打实的桌面软件 (当然听说mac上也可以用electron,不过没试过) (没错我还在用windows,不是mac也不是linux,我是个lowB) 团队主要的技术栈是react,所以考虑用react开发,方便维护. PS.由于项目是大半年前做的,所以一些细节可能记忆有误请见谅 几个重点: 1.想要能调试必须使用webpack打包,不能用r

  • 利用Electron简单撸一个Markdown编辑器的方法

    Markdown 是我们每一位开发者的必备技能,在写 Markdown 过程中,总是寻找了各种各样的编辑器,但每种编辑器都只能满足某一方面的需要,却不能都满足于日常写作的各种需求. 所以萌生出自己动手试试,利用 Electron 折腾一个 Markdown 编辑器出来. 下面罗列出我所理想的 Markdown 编辑器的痛点需求: 必须要有图床功能,而且还可以直接上传到自己的图片后台,如七牛: 样式必须是可以自定义的: 导出的 HTML 内容可以直接粘贴到公众号编辑器里,直接发布,而不会出现格式的

  • 解决Vue+Electron下Vuex的Dispatch没有效果问题

    这个问题是解决基于 vue 和 electron 的开发中使用 vuex 的 dispatch 无效的问题,即解决了 Please, don't use direct commit's, use dispatch instead of this. 问题. 先允许我梳理一下目录结构,以便阅读的时候不会一头雾水,你到底说的这个文件是哪个-- 其中 /src/main 是存放主配置文件的,/src/render 下面有 store.router.components 等. components 下面就

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

    Electron 结合了 Chromium.Node.js 和用于调用操作系统本地功能的 API(如打开文件窗口.通知.图标等,基于 Electron 的开发,就好像开发一个网页一样,而且能够无缝地使用 Node.或者说:就好像构建一个 Node app,并通过 HTML 和 CSS 构建界面. 那么如何在页面中调用 Node API 呢? 碰到了一些坑- 先从页面加载方式说起,Electron 中加载页面的方式有两种: 一种是直接加载本地文件,另一种是通过 http 网络请求页面. //方法1

  • go module化 import 调用本地模块 tidy的方法

    目录 如何调用自己写的本地模块 其他注意点: 参考文献 如何调用自己写的本地模块 在项目根目录$ go mod init 任意名称(比如abc.com/cde) 编写本地模块,在其他文件里import该模块(abc.com/cde/该模块的路径)并使用 其他注意点: 被调用模块里包名不要写main,比如packge abc,那么其他包调用它时就叫abc(vscode里可以看到相当于import 该包 as abc) 被调用模块可以不写main方法 被调用模块同级目录可以有多个go文件,但不能有相

  • Nodejs调用Dll模块的方法

    公司项目采用Electron(electronjs.org/)开发pc应用,会涉及到与底层硬件设备的通信,而sdk封装 基本上都是通过 C++ 动态链接库dll实现的. 有两种方案可供选择: 方案一: 使用node-ffi 方案二: 使用C++编写一个node addon,通过LoadLibrary调用dll 以上两种方案都可以解决dll调用问题,方案选型要个人对C++ 的掌握程度,如果熟悉C++开发,可以直接选择方案二最方便.如果完全不了解C++,那么只能采用方案一. 由于笔主不太懂C++,最

  • thinkphp3.2实现跨控制器调用其他模块的方法

    本文实例讲述了thinkphp3.2实现跨控制器调用其他模块的方法.分享给大家供大家参考,具体如下: thinphp中前台后台都有互相调用方法,这样可以省去重复内容. $hello = new \Admin\Common\Fun\hello(); $hello->hehe(); 调用其他地方的方法同理. 如果是在同控制器里模块名可以省略. 如调用common里面的某个类的方法: $hello = new \Common\Fun\hello(); $hello->hehe(); 框架里面提供了跨

  • 易语言调用易模块的方法

    易模块就是,易语言前辈把一些函数.常用的子程序. 编辑起来,方便新手学习! 1.打开易语言,里面,窗口程序.控制程序.动态连接库.易语言模块. 这里面可以用到模块的有[窗口程序.控制程序.动态连接库.]易语言模块是编写易模块的程序. 2.我们就以窗口程序程序进行操作,点击进入[双击]. 进入设计面板,点击[程序],在点击[模块引用],然后[添加模块] 1.使用方法 添加完毕模块!最好先更新下模快引用信息,让语言兼容! 添加完毕模块!最好先更新下模快引用信息,让语言兼容! 2.在打开易语言模块信息

  • Android WebView调用本地相册的方法

    本文实例为大家分享了Android WebView调用本地相册的具体实现方法,供大家参考,具体内容如下 首先要知道android本身的WebView是并不支持调用手机文件并上传的,其次WebView的内核在android每次更新的时候都是不太一样的,也是够坑爹的:不过需求又不能改,H5需要调用系统相册,还好最后还是找到方法解决了,就是要重写里面的一个方法,不过这种情况也是在5.0之前有效,5.0之后就需要重写另外的一个方法,先将这些方法一个个的列出 注意在这里我们需要重写的方法是在这个WebCh

  • C#调用Python模块的方法

    当下,C#与Python都是比较热门的计算机编程语言,他们各有优缺点,如果能让他们互相配合工作,那是多么美好的事情,今天我来讲解一下如何利用C#来调用Python. 如果让C#支持调用Python模块,我们首先需要安装一些扩展,这里推荐使用IronPython库. 第一步,我们需要下载IronPython库的安装包,这里请大家移步官网http://ironpython.codeplex.com/,下载并安装相关库文件. 第二步,我们新建一个C#控制台测试项目,并将IronPython安装目录中的

  • python操作jira添加模块的方法

    目录 JIRA介绍: python操作jira 首先安装jira模块 导入jira模块 编写添加模块代码 获取当前项目的模块信息 从excel表读取信息 主方法中调用添加模块等方法 JIRA介绍: JIRA是Atlassian公司出品的项目与事务跟踪工具,被广泛应用于缺陷跟踪.需求收集.流程审批.任务跟踪.项目跟踪和敏捷管理等工作领域. 在开发工作中,Jira通常用作BUG管理和任务跟踪管理等,项目经理,测试人员,开发人员等在Jira上进行提交BUG,提交任务,修改任务进度等操作. 当项目逐渐多

  • python调用java模块SmartXLS和jpype修改excel文件的方法

    本文实例讲述了python调用java模块SmartXLS和jpype修改excel文件的方法.分享给大家供大家参考.具体实现方法如下: # -*- coding: utf8 -*- """ 使用java的模块SmartXLS和jpype修改excel 和xlrd,xlwt不同的是它可以生成和保持图表 """ from __future__ import print_function, division import os import jpyp

  • Python调用C语言的方法【基于ctypes模块】

    本文实例讲述了Python调用C语言的方法.分享给大家供大家参考,具体如下: Python中的ctypes模块可能是Python调用C方法中最简单的一种.ctypes模块提供了和C语言兼容的数据类型和函数来加载dll文件,因此在调用时不需对源文件做任何的修改.也正是如此奠定了这种方法的简单性. 示例如下 实现两数求和的C代码,保存为add.c //sample C file to add 2 numbers - int and floats #include <stdio.h> int add

随机推荐