文档章节

Angular 用electron打包桌面应用小坑

SwatNo27
 SwatNo27
发布于 2017/07/25 10:26
字数 916
阅读 148
收藏 0

目录

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 <sourcedir> <appname> --platform=<platform> --arch=<arch> --version=<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 <JS Object>
    1: /* anonymous */(aka /* anonymous */) [D:\dev\cobalt_wp\node_modules\webpack\lib\FlagDependencyExportsPlugin.js:77] [pc=0000026F721B51D6] (this=0000029851004131 <undefined>,dep=00000150FC6162C9 <a NormalModule with map 0000025741730C01>)
    2: arguments adaptor frame: 3->1
    3: 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安装的包是树形结构则不会造成这样的问题。

© 著作权归作者所有

SwatNo27
粉丝 5
博文 15
码字总数 22849
作品 0
成都
前端工程师
私信 提问
大漠穷秋/NiceFish-ionic

NiceFish-ionic NiceFish是一个系列教学项目,都是Angular这个技术栈。 NiceFish:美人鱼,这是一个微型Blog系统,前端基于Angular 4.x + PrimeNG。http://git.oschina.net/mumu-osc/NiceFis...

大漠穷秋
2018/04/24
0
0
使用 ng-packagr 打包 Angular

写在前面 为了让 Angular 类库应用范围更自由,Angular 提出一套打包格式建议名曰:Angular Package Format,包括 FESM2015、FESM5、UMD、ESM2015、ESM5、ES2015 格式,不同格式可以在不同的...

卡色
2018/09/29
0
0
NG-ZORRO 7.0.0-rc.1 发布,Ant Design 的 Angular 实现

NG-ZORRO 7.0.0-rc.1 发布了,NG-ZORRO 是 Ant Design 的 Angular 实现,用于开发和服务于企业级后台产品。 特性 提炼自企业级中后台产品的交互语言和视觉风格。 开箱即用的高质量 Angular ...

局长
2018/12/15
0
0
构建 Web 应用程序的开发平台 Angular 6.0.0-rc.5 发布

Angular 6.0.0-rc.5 发布了。Angular 是一个使用 TypeScript / JavaScript 和其他语言构建移动和桌面 Web 应用程序的开发平台。 官方暂未提供更新内容,您可以查看以下页面保持关注: 发布主...

周其
2018/04/15
1K
5
通往 Angular 6 的道路上:5.1.0 的开发到达新阶段

Angular 5 正式版已于上个月发布。Angular 5 的目标一如既往的是继续开发团队的重心工作:使 Angular 更小、更快且更易使用。当然我们也是一如既往的惊讶于 Angular 的发布频率,虽然这对于 ...

局长
2017/12/07
3.2K
9

没有更多内容

加载失败,请刷新页面

加载更多

安得一颗光明心——《王阳明大传》的读后感作文4100字

安得一颗光明心——《王阳明大传》的读后感作文4100字: 偶然听到一个关于王阳明的讲座,简直让我入了迷。多年前接触到阳明,是在思想史中读到的对阳明心学的介绍,晦涩难懂的学术词汇,让我...

原创小博客
5分钟前
0
0
单点登录-基于Redis+MySQL实现单点登录(SSO)

1. 为什么要用单独登录? 主要便于公司内部多系统统一认证授权管理,一次登录可访问多个跨域系统,也同时更加方便统一管理用户登录(员工离职需要拿掉登录权限、统计所有用户对系统的登录请求...

秋日芒草
19分钟前
1
0
827. Making A Large Island

思想: 将所有连通的 1 分成一个组,分配编号,然后使用BFS统计1的个数,得到这个组的面积。 遍历格子里所有为 0 的元素,检查四个方向的1所在的组并加上这个组面积。于是得到当前元素为 0 ...

reter
26分钟前
0
0
亿万pv的混合云规划实施

基础服务: keepalive,lvs,nginx,dns,ntp,redis集群,yum仓库,web资源 网络高可用 防火墙冗余,交换机堆叠 专线互联 物理机虚拟化 VMware vcenter/ Proxmox...

以谁为师
52分钟前
4
0
聊聊dubbo的LRUCache

序 本文主要研究一下dubbo的LRUCache LRUCache dubbo-2.7.2/dubbo-common/src/main/java/org/apache/dubbo/common/utils/LRUCache.java public class LRUCache<K, V> extends LinkedHashMap<......

go4it
54分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部