14.《Electron 跨平台开发实战》- chapter14 构建部署应用

Electron Packager

设置 Electron Packager

安装

 cnpm install --save-dev electron-packager

npm:https://www.npmjs.com/package/electron-packager
github:https://github.com/electron/electron-packager

添加build脚本

package.json文件中添加简单的build脚本


  "scripts": {
    ...
    "build": "electron-packager .", 
    "build-win32": "electron-packager ./ clipsmarter ./ --platform=win32"
  }
electron-packager .

仅仅是创建一个针对当前架构和平台的版本的程序。
更多的设置参数如下:

electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]
  • sourcedir: ./ 表示的是当前目录,也就是package.json文件所在的目录
  • appname: 当前构建应用的名称
  • platform: 要构建的平台类型,可取的值有 darwin, linux, mas, win32

使用Electron-packager

执行build脚本,

cnpm run build

项目中出现一个新的目录,目录名由三部分组成:

  • 应用的名称
  • 当前使用的平台名称
  • 当前使用的CPU架构名称

常用的打包设置

{
  "name": "clipmaster-9000",
  "productName": "Clip Master 9000",
  "version": "1.0.0",
  "description": "clipmaster-9000 无系统托盘版本",
  ...
  "scripts": {
    ...
    "build": "yarn run build-win &&  yarn run build-mac &&  yarn run build-linux",
     "build-win": "electron-packager . --platform=win32 --out=build --icon=./app/icons/icon.ico --asar --overwrite",
    "build-mac": "electron-packager .  --platform=darwin --out=build --icons=./app/icons/icon.icns --asar --overwrite",
    "build-linux": "electron-packager .  --platform=linux --out=build --icons=./app/icons/icon.png --asar --overwrite"
  },
  • productName:程序名称,默认缺 name 的值,但是name的局限是必须都是小写,不能有空格,所以设置productName的值,打包时程序名取productName的值
  • electron-packager . :表示的是当前目录,也就是package.json文件所在的目录
  • --platform:要构建的平台类型,可取的值有 darwin, linux, mas, win32
  • --out:输出文件, --out=build将构建文件放到 build目录下
  • --icons:程序的图标,一般Mac图标格式为icns, windows为ico ,
    特别注意:图片的文件名不能有大写字母,否则无法换应用图标
    |__Clipmaster-charp14-Sperctron
         |__ app
           |__ main.js
           |__ index.html
           |__ renderer.js
           |__ icons
             |__ icon.ico
             |__ icon.icns
             |__ icon.png
           |__ ...
         |__ package.json
         |__ test
             |__ spec.js 
  • --asar: Electron使用的一种档案文件格式
    为什么使用asar档案文件:
    Node已入文件速度提高,解决windows文件名太长(文件名必须少于260字符,目录名必须少于248字符)导致的问题。
    并非用于保护或隐匿源代码
  • --overwrite:覆盖之前的已经存在的build文件

其它参数:
https://electron.github.io/electron-packager/master/interfaces/electronpackager.options.html

Electron Fore

electron-icon-builder

生成应用程序图标文件

yarn add electron-icon-builder --dev

Electron Builder

github:https://github.com/electron-userland/electron-builder
https://www.electron.build/configuration/configuration
一个打包工具,支持自动升级,
把打包文件随意存储在一个web服务器上即可完成自动升级

安装

yarn add electron-builder --dev

 cnpm install  electron-builder --save-dev
原文地址:https://www.cnblogs.com/easy5weikai/p/13186462.html