electron 爬坑记
前言
最近在学习react,打算开发一款压缩图片的客户端工具练练手,于是开始了electron的学习,这过程中遇到了一些坑,就此记录下来。
在浏览器环境中使用 nodejs api
因为开发结合了react,所以会用到webpack,在调试环境下electron打开的是webpack提供的服务器地址:
// Create the browser window.mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { webSecurity: false } })mainWindow.setMinimumSize(800, 600)mainWindow.webContents.openDevTools()// and load the index.html of the app.// mainWindow.loadFile('index.html')mainWindow.loadURL('http://127.0.0.1:3000')
复制代码
所以要是在react工程中直接require nodejs的原生包,就会报运行错误,因为nodejs原生包调用了很多的底层api,浏览器当然没有给到这个权限,所以,要想在浏览器中使用nodejs的api,需要用下面这种方式引入原生Nodejs包:
const electron = window.require('electron')
const process = window.require('process')
const fs = window.require('fs')
const Https = window.require('https')
复制代码
electron将nodejs api挂载在了window对象上,来与底层进行通信,所以需要调用window上的require函数来引入 nodejs 包。
在浏览器环境中使用app对象
在electron主进程中使用app对象直接require electron就行了
const { app } = require('electron')
复制代码
但是在渲染进程中使用app对象则需要这样引入:
const electron = window.require('electron')
const app = electron.remote.app
复制代码
哈哈,不知道的话很懵逼吧。
在浏览器环境中使用第三方nodejs包
如果在浏览器中require第三方nodejs包肯定是会报错的,所以需要创建window的时候预先引入第三方依赖包,代码如下
// main.js
mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { webSecurity: false,preload: path.resolve(__dirname, './public/renderer.js')},
})
复制代码
// ./public/renderer.js
global.imagemin = require('imagemin')
复制代码
// window环境下代码
const imagemin = window.imagemin
复制代码
打包后无法运行二进制文件
这个压缩图片的工具用到了 imagemin这个npm包,在开发的时候压缩图片没任何问题,但是经过electron打包,一旦压缩图片,就会报错,如图所示:
起初我是懵逼的,因为这看不到有效的报错信息啊,但是经过阅读源码网上查找解决方案,最终发现了端倪。在debugger的过程中,发现imagemin是使用二进制可执行文件来对图片进行压缩的,执行二进制的函数是child_process.spawn,这个函数对于文件路径有限制,因为electron打包后,会把依赖项压缩成一个文件,导致这个函数判断路径时报错,对于这个问题,如果是自己的代码中使用了二进制文件,则可以将child_process.spawn替换为child_process.execFile函数来执行二进制文件。
但是我这里引用的是别人的包,如果擅自修改非本源的包,可能会导致项目无法在其他的环境中运行,所以得找例外的解决方案,皇天不负苦心人,终于找到了解决方案,那就是electron打包时,不对依赖项进行压缩,那样就能得到一个正确的路径了。
解决方案
修改package.json中的build选项,这个选项是对electron打包的一系列配置。将其中的 asar 修改为false,就能让electron在打包时,不对依赖进行压缩,如下所示:
"build": {"appId": "com.richard.image_compress","mac": {"category": "tool"},"extends": null,"files": ["build", "*.js", "public"],"asar": false
}
复制代码
尾声
随着爬完了这一系列的坑,图片压缩的客户端工具终于完成。
git repo: github.com/Richard-Cho…
electron 爬坑记相关推荐
- 我在「小米爬坑记」里,看到的 3 个创业真相
小米把10年的创业经历,做了一次「开源」. 就在昨晚,雷军做了小米十周年的公开演讲.在演讲中,雷军对小米10年的发展做了一次大梳理,既有成绩,也有反思,还有小米历史上一些非常关键的发展节点.其实上个月 ...
- 小小甜菜深度学习爬坑记
小小甜菜深度学习爬坑记 主要目的是整理一路学习的技术分享贴.我的电脑是笔记本联想拯救者R720,显卡是GTX1050Ti.其它环境仅供参考. 安装ubuntu+win10双系统 详情见技术贴用 Eas ...
- Spring Cloud Contract 爬坑记
前言:spring-cloud-starter-contract-verifier:2.1.1.RELEASE. spring-cloud-contract-maven-plugin:2.2.1.RE ...
- 小小甜菜百度AI爬坑记
小小甜菜百度AI爬坑记 作为国内较好的深度学习平台,我是在2018百度开发者大会拉入坑的.其可分为语音识别,语音合成,文字识别,图像识别,人体分析,人脸识别,理解与互交技术,AR增强现实等多个方向.我 ...
- npm run build 打包爬坑记(1)
npm run build 打包爬坑记 先说说打包过程,npm run build 后放入phpstudy里面,访问本地ip,查看phpstudy的端口号,就能访问页面了(访问地址:http://19 ...
- 小小甜菜keras爬坑记
小小甜菜keras爬坑记 前言 安装(参考深度学习爬坑记安装ubuntu16.04+cuda9+cudnn+tensorflow1.9.0) 视频资料 相关模型资料 学习笔记 ssd模型 yolov3 ...
- 小小甜菜Movidius爬坑记
小小甜菜Movidius爬坑记 我是在神经计算棒+树莓派3B上看到实际效果后决定使用本方案的,实际项目中使用树莓派CM3作为核心板卡,使用Movidius 2或Movidius X(具体版本看项目需求 ...
- 小白爬坑记:C语言学习点滴——我对单、双引号的理解
小白爬坑记:C语言学习点滴--我对单.双引号的理解 一.单引号的作用: 二.双引号的作用: 三.字符或字符串容易犯的错误: 三.做个小题: 一.单引号的作用: 将单引号中间的所有符号直接转换为ASCI ...
- linux mono jexus性能,docker运行jexus+mono爬坑记,
docker运行jexus+mono爬坑记, 新的.net core都已经支持docker.手头有一些原来开发的asp.net旧项目,用的asp.net mvc开发的,跑在.net formwork ...
- python接口自动化(十七)--Json 数据处理---一次爬坑记(详解)
简介 有些 post 的请求参数是 json 格式的,这个前面发送post 请求里面提到过,需要导入 json模块处理.现在企业公司一般常见的接口因为json数据容易处理,所以绝大多数返回数据也是 j ...
最新文章
- 2011年计算机等级考试二级java笔试练习题(10)_2010年3月计算机等级考试二级Java笔试题及答案...
- 随机变量的分布函数-定义域问题
- Hulu:如何实现大型比赛直播系统自动扩容
- yaf(5) smarty
- eviews曲线图怎么做_【干货速递】Eviews:你不可不知的经典问答!
- thinkphp图片加载_标题栏ico展示
- android布局时长分析,Android性能优化:布局优化 详细解析(含、、讲解 )
- python基础--闭包函数和装饰器
- FreeBSD从零开始---Web服务器搭建(二)
- 打开计算机 显示不支持此接口,不支持此接口,教你如何解决电脑Windows系统显示不支持此接口...
- UG NX 12 坐标系的操作
- AAE 对抗自编码(一)
- 【JAVA今法修真】 第七章 洞天风云起,索引混乱平
- win7计算机名怎么是感叹号,Win7连接wifi信号后出现感叹号三种原因和解决方法
- Latex 表格的模版笔记
- ffmpeg获取音频信息
- 电影院和计算机和字典的英语怎么拼,电影院用英语怎么读
- JavaScript实现蜘蛛纸牌
- win10打开word时候报错,应用程序无法正常启动:0xc0000142
- 一篇文章入门Mysql
热门文章
- 深入理解 Python 异步编程(上)
- java初级开发一系列的工具安装配置
- WPF学习笔记-如何按ESC关闭窗口
- http://jingyan.baidu.com/article/636f38bb3eb78ad6b8461082.html
- python模块--hashlib
- SpringCloud的Hystrix(二) 某消费者应用(如:ui、网关)访问的多个微服务的断路监控...
- iOS 关于修饰代理用weak还是assign
- YIi2 Pjax简单使用
- c#项目遇到的问题及解决(1)
- C++ 入门2 ---- 类型转换