electron-builder 打包项目并生成安装包的方法

Electron-build 是一套 Electron 项目的打包工具，使用 Electron-build 可以快速打包项目，并生成基于 Nsis 的可视化安装包，方便分发。

正文

1. 安装
   使用 Electron-build 打包项目，首先需要安装 Electron-Build 依赖。

   # 可以选择将其安装至 global 或是项目开发依赖
   yarn add electron-builder -D
   

   安装完成后，在 package.json 中 devDependencies项可以见到它。

2. 配置打包命令
   在 package.json 的 scripts 中添加两条新命令 pack 和 dist：

   "scripts": {
       "start": "electron .",
       "pack":"electron-builder --dir",
       "dist":"electron-builder"
   }
   

   • pack命令不会打包，只会生成一个包文件夹压缩包，用于测试流程。
   • dist会先生成打包后的文件夹(xxx-unpacked)，再将其打包成一个 Setup 安装包。
3. 配置 build 参数
   build 参数由 electron-builder 使用，我们的打包参数可以在此配置。
   详细参数及适用平台参考：https://www.electron.build/configuration/configuration

   //package.json
   "build":{
       "appId":"com.azimiao.test",
       "asar":true,
       "afterPack":"./build/afterPack.js",
       "directories":{
           "buildResources":"build",
           "output":"dist"
       },
       "win":{
           "target": [{
               "target":"nsis"
           }],
           "icon":"build/favicon.ico",
           "asarUnpack":[
               "src/**",
               "README.md"
           ]
       },
       "nsis":{
           "oneClick":false,
           "allowElevation":true,
           "allowToChangeInstallationDirectory":true,
           "installerIcon":"build/install_favicon.ico",
           "uninstallerIcon":"build/uninstall_favicon.ico",
           "createDesktopShortcut": true,
           "createStartMenuShortcut": true
       }
   }
   

   简单介绍下打包参数内的重要配置项：

   • directories.buildResources:默认值为 build，是打包时的资源文件夹，该文件夹不会被打包至程序内，可以放置一些打包需要用的图标、资源等。
   • directories.output：默认值 dist，打包输出文件夹。
   • afterPack：生成 Unpack 文件夹后要执行的脚本，运行的时机在打包之后，在生成安装包之前。我用它来删除 README.md 等不需要放入安装包的文件。
   • win.target：默认值 nsis，指定 win 平台的打包类型，例如appx、msi、zip等。
   • win.asarUnpack：不会压缩进 app.asar 的资源。
   • nsis.allowToChangeInstallationDirectory：生成的安装包是否允许改变安装位置。

   我的 afterPack.js 内容：

   const fs = require("fs");
   const path = require("path");
   async function afterPack(context){
       // 删除 README 文件，使其不加入 Setup 包中。
       let readmePath = path.join(context.appOutDir,"resources/app.asar.unpacked/README.md");
       if(fs.existsSync(readmePath)){
           fs.unlinkSync(readmePath);
       }
   }
   module.exports = afterPack;
   

4. 打包
   执行如下命令：

   yarn dist
   

   如果得法，打包完毕后 dist 文件夹内容如下：

   

   其中unpacked是制作安装包的源文件夹，Setup为基于 Nsis 的安装包。Setup.exe可以直接用于分发。

5. 测试
   双击 Setup 文件，可以安装我们打包好的程序。