electron 项目打包

electron 项目打包

怎么将我们开发好的应用打包成.app.exe的执行文件,这就涉及到了重要的打包环节, 这里使用electron-quick-start项目进行打包

目前,主流的打包工具有两个electron-packagerelectron-builder

Mac打包window安装包需下载wine

brew install wine

如果有丢失组件,按照报错信息进行下载即可

electron-packager

electron-packager把你的electron打包成可运行文件(.app, .exe, etc)

执行npm i electron-packager -D进行安装

electron-packager . 快速打包

打包详解

1
electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> --out=out --icon=assets/app.ico --asar --overwrite --ignore=.git
  • sourcedir 项目入口 根据package.json的目录
  • appname 包名
  • platform 构建平台 包含 darwin, linux, mas, win32 all
  • arch 构建架构 包含ia32,x64,armv7l,arm64
  • out 打包后的地址
  • icon 打包图标
  • asar 是否生成app.asar, 不然就是自己的源码
  • overwrite 覆盖上次打包
  • ignore 不进行打包的文件

第一次打包需要下载二进制的包耗时会久一些,以后走缓存就快的多了。

命令比较长,每次要是都用这个命令来打包会很烦,可以使用第二种方法;

2、首先在项目根目录下面的 package.json 里添加代码,

1
2
3
"start": "electron .",
"packager": "electron-packager ./ SleeponWeb --mac --out ./OutApp --version-app 1.0.0 --overwrite --icon=./assets/app.icns"
},

PS:这里要注意,字段里的 项目名字,version,icon路径要改成自己的;
PS:注意,图标文件需要为 icns 格式的.

打包后目录为

其中electron-quick-start可以直接打开运行

缓存地址

  • Mac ~/Library/Caches/electron/
  • Windows $LOCALAPPDATA/electron/Cache or ~/AppData/Local/electron/Cache/
  • Linux $XDG_CACHE_HOME or ~/.cache/electron/

electron-builder

electron-builder是一个完整的解决方案,对于macos、windows、linux下的electron app,它可以提供打包及构建的相关功能。同时,它还提供开箱即用的“自动更新”功能支持

npm i electron-builder -D 下载

electron-builder打包

出现如下


同样是第一次打包时间会比较长,别着急,静候佳音。

会默认打包在dist目录,包含如下

mac文件里有运行时文件,默认使用asar方式进行打包

electron-builder --dir 只会生成包文件,对测试有用


本教程引用原文

© 2018 Ken的博客 All Rights Reserved. 本站访客数人次 本站总访问量