# Electron打包

常见的打包方案：

electron-packager
electron-builder(推荐)
Electron-forge

常见问题：

windows平台能打包MacOS的包吗？不能，不能跨架构。可以使用CI/CD工具进行跨平台打包。
dmg是mac平台安装镜像，pkg是系统安装包，如插件。

# 演示

在推荐的模板项目：https://github.com/cawa-93/vite-electron-builder (opens new window)中就提供了compile命令：

"compile": "electron-builder build --config electron-builder.config.js --config.asar=false",

但是，官方文档中也说明的非常清楚：

Using the npm script compile: This script is configured to compile the application as quickly as possible. It is not ready for distribution, it is compiled only for the current platform and is used for debugging.

这个命令只是用于打包测试，并不是真正的打包分发。

最终形态，通过CICD的工具来打包多平台应用。

Using GitHub Actions: The application is compiled for any platform and ready-to-distribute files are automatically added as a draft to the GitHub releases page.

# 准备

# 作者信息

修改package.json文件，需要添加两个属性：

{
  // ...
  "author": {
    "name": "brian",
    "email": "brian@toimc.com"
  },
  "description": "A Community Project use the Electron!",
  // ...  
}

配置node的版本为16，因为最新的electron 16需要node>=16的环境。

可以使用nvm进行安装：

MacOS：https://github.com/nvm-sh/nvm (opens new window)

Windows：https://github.com/coreybutler/nvm-windows (opens new window)

然后就可以测试compile命令了！打包结果：

说明：MacOS上的小伙伴打包会失败，没有关系，后续还需要配置证书。

# 图标与安装图片

MacOS -> icon.icns（不小于512像素）
Windows -> icon.ico（不小于256像素）
asar属性：简单打包属性，添加源码至应用包（增量更新的时候，可以使用asar）

mac平台上图标生成的方式：

创建一个createicns.sh文件：

#!/bin/bash

input_filepath="logo1024x1024.png"
output_iconset_name="icon.iconset"
mkdir $output_iconset_name

sips -z 16 16     $input_filepath --out "${output_iconset_name}/icon_16x16.png"
sips -z 32 32     $input_filepath --out "${output_iconset_name}/icon_16x16@2x.png"
sips -z 32 32     $input_filepath --out "${output_iconset_name}/icon_32x32.png"
sips -z 64 64     $input_filepath --out "${output_iconset_name}/icon_32x32@2x.png"
sips -z 128 128   $input_filepath --out "${output_iconset_name}/icon_128x128.png"
sips -z 256 256   $input_filepath --out "${output_iconset_name}/icon_128x128@2x.png"
sips -z 256 256   $input_filepath --out "${output_iconset_name}/icon_256x256.png"
sips -z 512 512   $input_filepath --out "${output_iconset_name}/icon_256x256@2x.png"
sips -z 512 512   $input_filepath --out "${output_iconset_name}/icon_512x512.png"
sips -z 1024 1024   $input_filepath --out "${output_iconset_name}/icon_512x512@2x.png"

iconutil -c icns $output_iconset_name

rm -R $output_iconset_name

设置执行命令

chmod +x ./craeteicns.sh

然后，放置到同级的logo1024x1024.png目录中，打开命令行，执行脚本，即可以得到icns的图标文件了。

windows平台上，可以借助到在线平台上的工具：ICO converter，https://www.icoconverter.com/ (opens new window)

安装图片的设置(mac)

同样的，放置到buildResources目录即可。

打包配置(mac)

修改electron-builder.config.js文件：

dmg: {
  background: 'buildResources/background.tiff'
},

打包命令(mac)

"compile:pack": "electron-builder build --config electron-builder.config.js --config.asar=false",

# 应用名称

修改electron-builder.config.js文件：

productName: 'toimc技术社区HD',

# 构建打包&测试

步骤：

配置名称描述
添加appId，注意不要有下横线。
配置平台

参考这个部分：https://www.electron.build/configuration/configuration#configuration (opens new window)
添加图标启动图片
配置脚本
打包

electron-builder配置electron-builder.config.js文件：

const path = require('path')

if (process.env.VITE_APP_VERSION === undefined) {
  const now = new Date()
  process.env.VITE_APP_VERSION = `${now.getUTCFullYear() - 2000}.${
    now.getUTCMonth() + 1
  }.${now.getUTCDate()}-${now.getUTCHours() * 60 + now.getUTCMinutes()}`
}

/**
 * @type {import('electron-builder').Configuration}
 * @see https://www.electron.build/configuration/configuration
 */
const config = {
  appId: 'com.toimc.community.desktop',
  directories: {
    output: 'dist',
    buildResources: 'buildResources'
  },
  publish: {
    provider: 'github'
  },
  files: ['packages/**/dist/**', 'packages/main/locales/**'],
  extraMetadata: {
    version: process.env.VITE_APP_VERSION
    // version: '1.0.0'
  },
  productName: 'toimc技术社区HD',
  dmg: {
    background: 'buildResources/background.tiff'
  },
  mac: {
    category: 'public.app-category.lifestyle',
    icon: 'buildResources/icon.icns',
    // target: ['dmg'],
    entitlements: 'buildResources/entitlements.mac.plist',
    entitlementsInherit: 'buildResources/entitlements.mac.plist',
    provisioningProfile: path.join(__dirname, './buildResources/toimchd.provisionprofile'),
    hardenedRuntime: true
    // bundleVersion: 2,
    // bundleShortVersion: 1.0.0
  },
  win: {
    target: ['nsis', 'zip']
    // windows受信证书大概需要3000一年。
    // verifyUpdateCodeSignature: false,
    // signingHashAlgorithms: ['sha256'],
    // certificateFile: 'XXX.pfx',
    // certificatePassword: 'XXXX'
  },
  nsis: {
    oneClick: false,
    allowToChangeInstallationDirectory: true,
    shortcutName: 'toimc技术社区'
  },
  linux: {
    target: ['deb', 'tar.xz'],
    category: 'Office',
    executableName: 'toimc-community',
    icon: 'buildResources/icon.png'
  },
  afterSign: 'electron-builder-notarize'
  // afterSign: 'scripts/notarize.js'
}

module.exports = config

# MacOS证书配置

如果没有证书会有一个打包提示：

证书分类：

软件签名证书（分平台），主要的作用就是在安装的时候不会提示未受信的开发者。
macOS开发者证书

申请证书的过程，可以参考：苹果开发者介绍

如果只是分发到第三方平台，不需要上架到AppStore，可以申请Developer ID Application类型的证书。

导出证书到特定的目录：

如果本地登录了开发者，使用compile命令，会自动匹配。

如果未登录开发者，可以通过环境变更进行设置

export CSC_LINK=/your-cert-path/cert.p12

export CSC_KEY_PASSWORD=your-cert-key-password

然后再打包即可。

← 原生应用通知多平台打包 →