Electron-开发实践：Mac打包

【前言】

当本地开发好一个 electron 应用后，

最想做的事情就是打包然后分享出去。

如何用 monorepo 管理一个 electron 项目，

可以看这里： Electron-开发实践：使用Monorepo管理Electron项目

【构建】

接上一篇，打包是在 packages/dishi-electron 中实现的，

且这里的 packages/dishi-main 下已经具备本地启动的能力，

main：主进程代码

renderer：渲染进程构建后的代码

package.json：入口

打包的第一步是将源代码构建或者复制到 dishi-electron 下，

这里可以用各种实现方式，本文采用 gulp 实现，

最终效果就是将 dishi-main 文件夹复制到 dishi-electron/dist 文件夹下，

并执行了 npm i，

这样做的好处是可以避免引入一些不需要的依赖，

【图标】

mac 应用包需要自己的一个图标，

如果不定制图标，打包启动后会默认使用 electron 的图标，

定制后的效果（虽然有点丑），

mac 图标的具体制作可以看这篇文章，

Electron-开发实践：制作icns图标

最后添加的脚本

    "icon": "electron-icns ./pack/icon/pic.webp",

执行的效果

【应用包】

接着是将本地应用打包为 mac 应用包，

即.app 后端的 mac 应用，

打包 mac 应用包有很多方案，

这里使用 electron-packager，https://github.com/electron/electron-packager ,

在 electron-packager 的基础上封装了一个包， https://qiao-electron-cli.vincentqiao.com/#/

配置文件在 dishi-electron/pack/electron.config.js 下，

// pkg
const pkg = require("../dist/package.json");

// const
const arch = process.arch;
const platform = process.platform;
const version = pkg.version;
const iconPath = `pack/icon/icon${platform === "darwin" ? ".icns" : ".ico"}`;

// log
console.log(`arch: ${arch}`);
console.log(`platform: ${platform}`);
console.log(`version: ${version}`);
console.log(`iconPath: ${iconPath}`);

// config
let config = {
  // 是否覆盖已经生成的文件
  overwrite: true,

  // 待打包的文件夹地址
  dir: "dist",

  // 打包的目标文件夹地址
  out: "out",

  // 是否将源码打包为 asar 格式
  asar: true,

  // 打包的 arch
  arch: arch,

  // 打包的platform
  platform: platform,

  // 应用的名称
  name: "dishi",

  // 应用的图标
  icon: iconPath,

  // 应用版本号
  appVersion: version,

  // 应用的版权说明
  appCopyright: "Copyright © 2023 insistime.com版权所有",
};

// qe config
module.exports = config;

脚本如下，

    "packmac": "qelectron pm ./pack/electron.config.js",

执行效果如下，

在 out 文件夹下生成应用包，

且本地双击可以打开，

【安装包】

应用包不方便是直接分发，

这里还需要打一个 mac 的安装包，

同样的还是使用封装的 qiao-electron-cli 这个包，

配置文件同上，