素材巴巴 > 程序开发 >

Angular 用electron打包桌面应用小坑

程序开发 2023-09-11 22:43:29

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

目录

1.使用electron参考的资料链接

2.electron打包应用的操作

3.electron图标的格式问题

4.electron打包时v8内存溢出的问题

 

一、使用electron参考的资料链接

API文档:https://electron.org.cn/docs/api/browser-window.html

使用Angular和TS来构建electron应用: https://segmentfault.com/a/1190000008427041

使用electron打包桌面应用:http://blog.csdn.net/frank_hehe/article/details/52811026

一口气完成electron学习:https://segmentfault.com/a/1190000006207600

个人总结: https://my.oschina.net/twleo2016/blog/997745

 

二、electron打包应用的操作

 全局安装Node.js模块electron-package 。运行命令:

electron-packager   --platform= --arch= --version= [optional flags...]
 

 

三、electron图标的格式问题

第一次使用electron package设置应用的图标的时候我自己使用的是png格式的图片,然后一直没有生效也没有报错,我一开始以为是路径问题,代码如下

"scripts": {"start": "electron .","package":"electron-packager ./ eagleeye --out --win --arch=x64 --electron-version=1.6.11 --overwrite --icon=./logo.png"}

因为这个错误比较弱智然后多博文提到的关注点是路径问题所以我也就是从路径这个点来排查的问题,研究了很久也没有解决,最后发现错误的原因很简单,因为图片只能用ico格式的,把图片的格式进行转换然后把命令改成这样就可以了。

"scripts": {"start": "electron .","package":"electron-packager ./ eagleeye --out --win --arch=x64 --electron-version=1.6.11 --overwrite --icon=./logo.ico"}

 

四、electron打包时v8内存溢出的问题

70% building modules 1345/1345 modules 0 active
 <--- Last few GCs --->
 ms: Mark-sweep 703.9 (837.9) -> 701.4 (811.9) MB, 331.3 / 0 ms [allocation failure] [GC in old space requested].
 ms: Mark-sweep 701.4 (811.9) -> 701.4 (790.9) MB, 350.5 / 0 ms [allocation failure] [GC in old space requested].
 ms: Mark-sweep 701.4 (790.9) -> 698.0 (760.9) MB, 433.7 / 0 ms [last resort gc].
 ms: Mark-sweep 698.0 (760.9) -> 692.7 (751.9) MB, 328.7 / 0 ms [last resort gc].<--- JS stacktrace --->==== JS stack trace =========================================Security context: 00000298510373A9 1: /* anonymous */(aka /* anonymous */) [D:devcobalt_wpnode_moduleswebpacklibFlagDependencyExportsPlugin.js:77] [pc=0000026F721B51D6] (this=0000029851004131 ,dep=00000150FC6162C9 )2: arguments adaptor frame: 3->13: InnerArrayForEach(aka InnerArrayForEach) [native array.js:~924] [pc=0000026F71EE3DCD] (this=000002985100413...FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - process out of memory

在配置完成后运行命令发现electron会在运行20分钟左右的时候包这个错误,发现是内存溢出的问题。

解决的过程中我参考了凌云之翼博客里提到的解决方式结合ng群里大神的经验之谈,准备通过修改内存上限解决问题。(博客的链接如下http://www.cnblogs.com/liugang-vip/p/6857595.html)

但在运用v8的 --max_old_space_size属性修改了内存上限后问题还是没有解决,问题依旧。

在研究一下午无果之后我第二天研究出的解决方法是:

删除掉node_module后在用electron打包,然后在打包完成后再将node_module包放到electron生成的应用文件下用来存放源码的app目录下然后再将整个app目录压缩为asar文件,运行生成的exe文件,项目运行正常。

通过后续的研究得出问题的原因其实是跟node_module的目录结构有关系因为ng部分依赖的报被墙了所以我是通过cnpm安装的包,这些包之间是平级的目录结构,electron在打包过程中会消耗很长的时间以及大量内存,而通过npm安装的包是树形结构则不会造成这样的问题。

转载于:https://my.oschina.net/twleo2016/blog/1486721


标签:

素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。