• Electron Forge 打包

    文章目录

    electron 应用打包方式有很多，比如 electron-builder。但现在官方主推的是 Electron Forge。

    图标

    https://www.electronforge.io/guides/create-and-add-icons

    Electron Forge

    文档：https://www.electronforge.io/
    api：https://js.electronforge.io

    概念

    forge 有两种使用场景：

    1. 使用 forge 模板从零搭建项目，里面配置好了打包
    2. 导入已有项目进行打包
      1. 使用 forge-cli import 脚本导入项目
      2. 手动配置 forge，导入项目进行打包

    注意：forge 只支持 npm 或 yarn，推荐 npm。

    模板

    electron forge 提供了 5 个模板：

    Templates

    • template-base
    • template-vite
    • template-vite-typescript
    • template-webpack
    • template-webpack-typescript

    https://www.electronforge.io/templates/vite-±typescript
    https://js.electronforge.io/modules/_electron_forge_template_vite_typescript.html

    导入已有项目

    我们本次使用属于第二种情景，导入已有项目。

    https://www.electronforge.io/import-existing-project

    cd my-app
npm install --save-dev @electron-forge/cli
npm exec --package=@electron-forge/cli -c "electron-forge import"

    • 1
    • 2
    • 3

    依赖包

    它会自动安装一些包。

    {
  "devDependencies": {
    "@electron-forge/cli": "^7.3.0",
    "@electron-forge/maker-deb": "^7.3.0",
    "@electron-forge/maker-rpm": "^7.3.0",
    "@electron-forge/maker-squirrel": "^7.3.0",
    "@electron-forge/maker-zip": "^7.3.0",
    "@electron-forge/plugin-auto-unpack-natives": "^7.3.0",
    "@electron-forge/plugin-fuses": "^7.3.0",
    "electron": "^29.0.1"
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    这些包都是 Electron Forge 的组成部分，它们提供了不同的功能和插件，用于构建和打包 Electron 应用。下面是每个包的作用：

    1. @electron-forge/cli - Electron Forge 的命令行接口 (CLI)，它提供了一组命令，如 start, package, make, publish 等，用于启动、打包、创建分发包和发布你的 Electron 应用。
    2. @electron-forge/maker-deb - 一个 maker，用于创建 Debian (.deb) 格式的安装包，这些包通常用于 Debian 和 Ubuntu 等 Linux 发行版。
    3. @electron-forge/maker-rpm - 一个 maker，用于创建 Red Hat Package Manager (.rpm) 格式的安装包，这些包通常用于 Red Hat、Fedora、CentOS 等 Linux 发行版。
    4. @electron-forge/maker-squirrel - 一个 maker，用于创建 Squirrel.Windows (.msi, .exe) 格式的安装包，这些包用于 Windows 系统。
    5. @electron-forge/maker-zip - 一个 maker，用于创建 zip 压缩包，通常用于分发没有特定安装程序的简单应用版本。
    6. @electron-forge/plugin-auto-unpack-natives - 一个插件，用于自动解包原生 Node 模块，这样它们就可以在打包的应用中被正确加载。
    7. @electron-forge/plugin-fuses - 一个插件，用于在打包过程中设置一些“熔丝”(fuses)，这些熔丝可以控制应用的行为，比如禁用调试功能、防止应用被篡改等。

    脚本命令

    除了自动安装依赖包，还会自动添加一些脚本命令。

    {
  // ...
  "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package", // 打包
    "make": "electron-forge make", // 构建分发包
    "publish": "electron-forge publish"
  }
  // ... 
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    打包和创建分发包：
    打包是将应用程序和 Electron 运行时打包成可执行的形式。而创建分发包则是将这些可执行文件和必要的安装脚本、元数据打包成用户熟悉的安装包格式。

    一句话总结：

    • package 为将应用打包成免安装包形式，会有一堆文件，里面有一个 exe 文件，双击运行。
    • make 为打包出一个安装包，安装包只有一个单独的文件，所以可以挂在应用市场或者官网分发，所以叫分发包。
      • 并且执行 make 打包成安装包时，必然会先进行 package 打包。所以 make 命令会有两个类型的包产物。

    make 命令具体有三个产物：

    1. 安装包：{appName} Setup.exe
    2. 用于更新的 NuGet 包文件：{appName}-full.nupkg
    3. 用于检查更新是否可用的元数据文件：RELEASES

    踩坑：执行npm run make时报错

    • Error: Cannot find module ‘@electron-forge/plugin-fuses’

    把这个包手动安装为开发依赖即可。

    npm install --save-dev @electron-forge/plugin-fuses

    • 1

    配置

    配置可写在一个单独的文件里，也可直接在 packa.json 中添加。更推荐单独 js 文件的形式。

    // package.json
{
  // ...
  "config": {
    "forge": {
      "packagerConfig": {},
      "makers": []
    }
  }
  // ...
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    // forge.config.js
module.exports = {
  packagerConfig: { /* ... */ },
  rebuildConfig: { /* ... */ },
  makers: [],
  publishers: [],
  plugins: [],
  hooks: { /* ... */ },
  buildIdentifier: 'my-build'
};

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    上面列出的是主要的几个顶层配置。另外，所有配置项都是可选的。

    在 Electron Forge 的 forge.config.js 配置文件中，你可以定义多个关键配置项来控制构建、打包和发布过程。下面是每个配置项的作用：

    1. packagerConfig:
      • 这个对象包含了传递给 electron-packager 的配置选项，用于自定义打包过程。例如，你可以在这里配置应用程序的名称、版本、图标、输出目录、是否使用 ASAR 打包等。
    2. rebuildConfig:
      • 这个对象包含了传递给 electron-rebuild 的配置选项，用于重新编译原生 Node.js 模块，以确保它们与 Electron 的 Chromium 构建兼容。这通常在打包过程中自动执行。
    3. makers:
      • 这个数组定义了用于创建可分发安装包的 makers。每个 maker 都是一个插件，它知道如何将打包好的 Electron 应用转换成特定平台的安装包格式，如 .deb、.rpm、.dmg、.zip 等。
    4. publishers:
      • 这个数组定义了用于发布应用程序的发布者。发布者可以是例如 GitHub、S3 存储桶或其他任何支持 Electron Forge 的发布服务。
    5. plugins:
      • 这个数组定义了在构建过程中使用的插件。插件可以扩展 Electron Forge 的功能，例如自动解包原生模块、设置应用熔丝、优化资源等。
    6. hooks:
      • 这个对象允许你定义在 Electron Forge 生命周期中的特定时刻执行的钩子函数。例如，你可以在打包之前或之后运行自定义脚本。
    7. buildIdentifier:
      • 这个字符串用于标识构建的唯一性。在持续集成或多个环境之间进行构建时，这可以帮助区分不同的构建输出。

    这些配置项共同工作，提供了对 Electron 应用构建和打包过程的精细控制。你可以根据项目的需求和目标平台来定制这些配置。更多关于 Electron Forge 配置的详细信息，可以参考其官方文档。

    下面是一个较为完整的 forge.config.js 配置文件示例，它展示了如何配置打包选项、makers、plugins 和 hooks。这个配置文件假设你正在为一个 Electron 应用程序创建 Windows、macOS 和 Linux 的安装包，并且使用了 electron-rebuild 插件来重新编译原生模块。

    const { resolve } = require('path');

module.exports = {
  // 打包配置
  packagerConfig: {
    // 应用名称
    name: 'MyApp',
    // 应用版本
    version: '1.0.0',
    // 应用图标路径
    icon: resolve(__dirname, 'src/assets/icon'),
    // 是否使用 asar 打包
    asar: true,
    // electron-packager 的其他配置项
  },
  // 重新编译原生模块的配置
  rebuildConfig: {},
  // 安装包创建配置
  makers: [
    {
      // 创建 Windows 安装程序的 maker
      name: '@electron-forge/maker-squirrel',
      config: {
        // Squirrel.Windows 的配置项
      },
    },
    {
      // 创建 macOS dmg 安装包的 maker
      name: '@electron-forge/maker-dmg',
      config: {
        // dmg 安装包的配置项
      },
    },
    {
      // 创建 Linux deb 安装包的 maker
      name: '@electron-forge/maker-deb',
      config: {
        // deb 安装包的配置项
      },
    },
    {
      // 创建 Linux rpm 安装包的 maker
      name: '@electron-forge/maker-rpm',
      config: {
        // rpm 安装包的配置项
      },
    },
    // 可以继续添加更多的 makers
  ],
  // 插件配置
  plugins: [
    [
      // 自动重新编译原生模块的插件
      '@electron-forge/plugin-rebuild',
      {
        // electron-rebuild 的配置项
      },
    ],
    // 可以继续添加更多的 plugins
  ],
  // 钩子配置
  hooks: {
    // 在打包之前执行的钩子
    prePackage: async (forgeConfig, packageJSON, buildPath) => {
      // 在这里执行一些自定义操作
    },
    // 在创建安装程序之后执行的钩子
    postMake: async (forgeConfig, makeResults) => {
      // 在这里执行一些自定义操作
    },
    // 可以继续添加更多的 hooks
  },
  // 构建标识符
  buildIdentifier: 'my-build',
};


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76

    最主要的是基础的打包配置 packagerConfig和各个平台的安装包配置maker。

    packagerConfig

    完整配置：
    Options | @electron/packager

    在 Electron Forge 的 packagerConfig 配置中，你可以指定许多选项来定制你的 Electron 应用程序的打包过程。这些选项将被传递给 electron-packager，它是 Electron Forge 用于打包应用程序的底层工具。

    以下是一些常用的 packagerConfig 配置项：

    1. dir - 指定包含应用程序的源代码的目录。默认为 .（当前目录）。
    2. out - 指定打包后的应用程序应该放置的目录。默认为 ./out。
    3. appBundleId - macOS 应用程序的捆绑标识符（CFBundleIdentifier）。
    4. appCategoryType - macOS 应用程序的类别类型（LSApplicationCategoryType）。
    5. appName - 应用程序的名称，将显示在窗口标题和应用程序的快捷方式中。
    6. appVersion - 应用程序的版本号。
    7. arch - 打包的目标架构，可以是 ia32, x64, armv7l, arm64, universal 等。
    8. asar - 是否使用 ASAR 打包应用程序的资源。可以是布尔值或对象，用于更细粒度的控制。
    9. asarUnpack - 指定哪些文件或目录不应该被包含在 ASAR 包中，而是应该单独放置。
    10. background-color - 应用程序窗口的背景颜色（十六进制颜色代码）。
    11. copyright - 应用程序的版权信息。
    12. electronVersion - 使用的 Electron 版本。
    13. icon - 应用程序的图标路径，可以是 icns 或 ico 文件。
    14. ignore - 一个正则表达式或数组，用于指定打包时应该忽略的文件或目录。
    15. overwrite - 是否覆盖已存在的输出目录。默认为 false。
    16. platform - 打包的目标平台，可以是 linux, win32, darwin 等。
    17. prune - 是否移除未使用的代码。默认为 true。
    18. asarunpackdir - 指定一个目录，该目录中的所有文件都将被解包到 ASAR 包之外。
    19. win32metadata - Windows 应用程序的元数据，如版本信息、版权信息等。

    asar 是什么？

    ASAR（Atom Shell Archive Format）是 Electron 应用程序的一种文件打包格式。它将应用程序的资源（如 HTML、CSS、JavaScript 文件、图片等）和 Electron 运行时环境打包成一个单一的 .asar 文件。这个文件实际上是类似于 tar 的存档格式，但是它允许 Electron 以文件系统的方式直接访问其内容，而不需要解压整个文件。
    一句话总结：asar 就是一个资源压缩包。里面的文件不用解压，程序就能直接访问。

    注意：icon 配置，文件不要加后缀，electron 会根据平台自动加。

    Forge will automatically add the correct extension for each platform, so appending .ico or .icns to the path is not required.

    Electron Forge 官方网站指出，你不能覆盖 dir, arch, platform, out 或 electronVersion 这些选项，因为它们是由 Electron Forge 内部设置的。
    这意味着这些选项是由 Electron Forge 根据你的项目配置和运行环境自动决定的，你不应该在 forge.config.js 文件中显式地设置它们。
    看起来很奇怪，既然不允许改，为啥还给出这几个配置？因为这几个配置是electron-packager这个工具的配置。electron forge 只是内部使用了这个工具，并且只是 forge 不允许你改这几个配置。但是如果你单独使用 electron-packager 工具，那就能改了。

    下面是一个 packagerConfig 的示例配置：

    packagerConfig: {
  dir: './src',
  out: './dist',
  appName: 'MyApp',
  appVersion: '1.0.0',
  arch: 'x64',
  asar: true,
  asarUnpack: ['node_modules/some-native-module/*.node'],
  icon: './src/assets/icon',
  ignore: /src\/ignore\/this\/folder/,
  overwrite: true,
  platform: 'win32',
  prune: true,
  win32metadata: {
    CompanyName: 'My Company',
    ProductName: 'MyApp',
    OriginalFilename: 'MyApp.exe',
  },
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    在这个例子中，我们配置了打包的源代码目录、输出目录、应用程序名称、版本号、目标架构、ASAR 打包、图标、忽略的文件、覆盖输出目录、目标平台以及 Windows 应用程序的元数据。请根据你的应用程序的具体需求调整这些配置项。确保你已经阅读了 Electron Forge 和相关插件的官方文档，以了解所有可用的配置选项和最佳实践。

    maker

    以 Windows 平台为例。

    在 Electron Forge 的 makers 配置中，针对 Windows 平台的常用配置项通常与 @electron-forge/maker-squirrel 和 @electron-forge/maker-zip 有关。

    下面是一些常用的配置项示例：

    1. @electron-forge/maker-squirrel 配置项：
      • name: 应用程序的名称，将显示在 Windows 安装程序和开始菜单中。
      • setupExe: 生成的安装程序的可执行文件名。
      • setupIcon: 安装程序的图标路径。
      • iconUrl：控制面板展示的图标，只能是http url，不能是本地文件url。
      • loadingGif: 安装过程中的加载动画 GIF 图像路径。
      • noMsi: 是否禁止生成 MSI 包（默认为 false）。
      • remoteReleases: 用于更新检查的远程发布服务 URL。
      • authors: 应用程序的作者信息。
      • certificateFile: 用于代码签名的证书文件路径。
      • certificatePassword: 证书的密码。
      • runtimeDependencies: 应用程序运行时依赖的 Windows 应用程序列表。
    2. @electron-forge/maker-zip 配置项：
      • 此 maker 没有特定的配置项，它只是将打包好的应用程序文件夹压缩成一个 .zip 文件，供用户下载和使用。

    下面是一个使用 @electron-forge/maker-squirrel 的示例配置：

    makers: [
  {
    name: '@electron-forge/maker-squirrel',
    config: {
      name: 'MyApp',
      setupExe: 'MyAppSetup.exe',
      setupIcon: 'src/assets/icon.ico',
      loadingGif: 'src/assets/install-spinner.gif',
      noMsi: true,
      authors: 'My Company',
      // 如果需要代码签名，可以添加以下配置
      // certificateFile: 'path/to/certificate.p12',
      // certificatePassword: 'your-certificate-password',
    },
  },
  // ... 可以添加更多的 makers
]

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    在这个例子中，我们配置了 Squirrel.Windows maker 来创建 Windows 安装程序，包括应用程序的名称、安装程序的可执行文件名、图标、加载动画等。如果你还需要为 Windows 平台创建 .zip 压缩包，你可以添加 @electron-forge/maker-zip 到 makers 数组中。

    案例

    番茄钟：

    const { FusesPlugin } = require("@electron-forge/plugin-fuses");
const { FuseV1Options, FuseVersion } = require("@electron/fuses");

module.exports = {
    packagerConfig: {
        asar: true,
        name: "pomodoro",
        icon: "./pomodoro"
    },
    rebuildConfig: {},
    makers: [
        {
            name: "@electron-forge/maker-squirrel",
            config: {
                name: "pomodoro",
                setupExe: "pomodoro_setup_1.0.0_x64.exe",
                setupIcon: "./pomodoro.ico",
                loadingGif: "./img/ikun.gif"
            }
        },
        {
            name: "@electron-forge/maker-zip",
            platforms: ["darwin"]
        },
        {
            name: "@electron-forge/maker-deb",
            config: {}
        },
        {
            name: "@electron-forge/maker-rpm",
            config: {}
        }
    ],
    plugins: [
        {
            name: "@electron-forge/plugin-auto-unpack-natives",
            config: {}
        },
        // Fuses are used to enable/disable various Electron functionality
        // at package time, before code signing the application
        new FusesPlugin({
            version: FuseVersion.V1,
            [FuseV1Options.RunAsNode]: false,
            [FuseV1Options.EnableCookieEncryption]: true,
            [FuseV1Options.EnableNodeOptionsEnvironmentVariable]: false,
            [FuseV1Options.EnableNodeCliInspectArguments]: false,
            [FuseV1Options.EnableEmbeddedAsarIntegrityValidation]: true,
            [FuseV1Options.OnlyLoadAppFromAsar]: true
        })
    ]
};


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
  • 相关阅读:
    【虹科】物联网时代，加个网关or加个软件，设备上云原来如此简单
    SSM学习——数据源对象管理与加载properties文件（4）
    java毕业生设计医院取药系统计算机源码+系统+mysql+调试部署+lw
    初识C++ (一)
    Redis 事务
    传统Android 开发与 Android 音视频开发的差距……
    知名工业企业代表团赴实在智能交流，共同推动企业数字化转型
    打牌的贝贝(卡特兰数+组合数学)
    运行时应用自我保护（RASP）：应用安全的自我修养
    Data too long for column ‘xxxx‘ at row 1 解决办法
  • 原文地址：https://blog.csdn.net/qq_43220213/article/details/136467653