Electron 项目打包
in 软件 with 0 comment

Electron 项目打包

in 软件 with 0 comment

install_apps

Electron 项目打包

打包可算是项目开发的一个句号,在这过程中,我也踩过不少坑,这里简单记录下自己的要点,也希望这篇文章可以给大家一些参考。

目前打包我经常用2种方式:

先说下这两种大体上的区别:

electron-packager**

使用命令:npm install electron-packager --save-dev 可安装相关模块

安装好后配置 package.json 文件的 package 打包运行脚本

"scripts": {
    "start": "electron .",
    "dev": "electron . --debug",
    "package": "npm-run-all package:*",
    "package:mac": "electron-packager ./app --overwrite --platform=darwin --arch=x64 --out=out --icon=app/assets/app-icon/mac/app.icns --osx-sign.identity='Developer ID Application: GitHub'",
    "package:win": "electron-packager ./app --overwrite --platform=win32 --arch=ia32 --out=out --icon=app/assets/app-icon/win/app.ico",
    "package:linux": "electron-packager ./app --overwrite --platform=linux --arch=x64 --out=out"
  },
  • 注意: ./app 是我自己的项目目录,out 是打包后存放的目录名,实际情况请自行修改

打包对应的版本只需只需相关的命令即可,例如打包 mac 版本:npm run-script package:mac 即可。

这里会有个小问题,后面说

electron-builder

使用命令:npm install electron-builder -g 可安装相关模块,我的安装全局才可用

安装完后最好查看下是否成功: electron-builder version

成功后编辑项目文件夹下的 package.json 文件,添加electron builder编译所需要的属性

"scripts": {
    "start": "electron .",
    "dev": "electron . --debug",
    "pack": "electron-builder --dir",
    "dist": "electron-builder"
  },
  "build": {
      "appId": "site.suremotoo",
      "copyright": "Suremotoo",
      "productName": "e-tools",
      "dmg": {
        "background": "app/assets/app-icon/png/app.icns",
        "window": {
          "x": 100,
          "y": 100,
          "width": 500,
          "height": 300
        }
      },
      "win": {
        "icon": "app/assets/app-icon/win/app.ico"
      }
    }
  • 注意: build 属性均是演示数据,实际情况请自行修改。
  • 具体的属性可参考官方文档
一次打包所有平台命令有3种,任选其一:
具体打包命令参数,也是任选其一:
Mac 版

electron-builder -m

electron-builder -o

electron-builder --mac

electron-builder --macos

electron-builder --platform=mac

electron-builder --platform=darwin

Windows 版

electron-builder -w

electron-builder --win

electron-builder --windows

electron-builder --platform=win

electron-builder --platform=win32

Linux 版

electron-builder -l

electron-builder --linux

electron-builder --platform=linux

打包对应的版本只需只需相关的命令即可,例如打包所有版本:npm run-script pack 或者 npm run-script dist 即可。

  • 提示:如果只是执行 electron-builder 命令,默认会根据当前系统打包哟~

上面提到的问题

electron打包的时候需要下载一个版本库,速度会非常慢,即使开代理了,都不一定能解决,这里可以通过淘宝镜像源解决。

对于 cnpm 和 yarn,我都没有过多使用,我比较喜欢传统的 npm,也是最可靠的,唯一的缺点就是慢。一般都用 npm install 可以解决,像这种打包需要某种文件,这个我觉得临时使用镜像还是可以的。

以 electron-duilder 打包为例:

ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/ 你的命令
// 比如打包所有平台
ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/  electron-builder --platform=all