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

目录

• Electron Packager
  • 设置 Electron Packager
    • 安装
    • 添加build脚本
    • 使用Electron-packager
  • 常用的打包设置
• Electron Fore
• electron-icon-builder
• Electron Builder

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