【Electron】应用打包需要分几步Electron 程序打包需要分几步？第一步，安装依赖；第二步，打包配置；第三步，

简单介绍

electron 是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架，很多桌面端程序都是通过 electron 开发的，比如说咱们程序员最熟悉的 VSCode。

当你开发完成了一个 electron 应用，就需要将它打包成应用程序，以后可以直接运行。

electron 的核心模块中没有配置打包或者分发文件的工具，需要借助额外的打包工具来实现，目前主流的两种打包工具是：electron-forge 和 electron-builder。这两个项目都是 Electron 官方团队维护的。

在官方教程文档是推荐使用 electron-forge，electron -forge 工具底层，将许多现有的 Electron 工具 (如 electron-packager、 @electron/osx-sign、electron-winstaller 等) 组合到一起，但在我的项目经验中，使用 electron-builder 作为打包工具的人更多。

electron-builder VS electron-packager

因为 electron-builder 内置自动升级机制，把打包的文件随意丢到 Web 服务器上即可完成自动升级。electron-packager 需要自己手动搭建服务器。

除此之外，使用 electron-packager 好处是配置简单，但有个痛处让开发者望而生畏，就是只能打你当前计算机环境的包，比如在 mac 下无法打 win 的包，非常痛苦，而且只能打包 dmg 和 exe。而使用 elctron-builder 可以一步到位。

说说使用 electron-builder 打包的几个好处：

可以打包 web 内容为 asar
可以生成 windows 下的 nsis（安装程序），mac 下 dmg
mac 下也可以打包 windows，打包机一台 mac 搞定
打包程序可以生成 latest.yml，用于自动更新，不需要多次打包
支持 autoupdate

介绍完打包工具，接下来说一下使用 electron builder 简单打包流程。

第一步：安装依赖

// yarn
yarn add electron --dev
yarn add electron-builder --dev
// npm
npm install electron -D
npm install electron-builder -D

第二步：builder配置

builder 的配置也很简洁，主要有两种方式

package.json 中直接配置使用，比较常用也方便
新建 electron-builder.yml 文件配置

在 package.json 中简单的配置

// package.json
{
  // 其他配置省略
  "main": "main.js", // 入口文件
  "script": {
    "start": "electron .",
		"build": "electron-builder" // 打包命令
  },
  "build": {  // electron-builder 配置
    "productName":"xxxx",// 项目名 这也是生成的 exe 文件的前缀名
    "appId": "com.xxx.xxxxx",// 包名  
    "copyright":"xxxx",// 版权信息
    "directories": { // 输出目录名
      "output": "releases"
    }, 
    // windows 相关的配置
    "win": {  
      "icon": "xxx/icon.ico"// 图标路径 
    }  
  }
}

加上这些基础配置后就可以打包出来简单的文件，有可执行程序 exe，点击也能正常运行。但这并不是我们想要的，我们目的是打包成安装程序。

打包成安装程序有两种方式：

使用 nsis 工具对上一步打包出来的文件夹再次进行打包
在 build 配置 nsis 直接打包成 exe

我们按照第2种方式进行配置 nsis，nsis 配置是指安装过程的配置，比如安装目录指定，是很重要的配置之一。如果不配置 nsis 应用程序会自动安装在 C 盘，没有用户选择的空间。

下面是部分 nsis 的配置：

"nsis": {
  "oneClick": false, // 是否一键安装
  "allowElevation": true, // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
  "allowToChangeInstallationDirectory": true, // 允许修改安装目录
  "installerIcon": "./build/aaa.ico",// 安装图标
  "uninstallerIcon": "./build/bbb.ico",//卸载图标
  "installerHeaderIcon": "./build/aaa.ico", // 安装时头部图标
  "createDesktopShortcut": true, // 创建桌面图标
  "createStartMenuShortcut": true,// 创建开始菜单图标
  "shortcutName": "xxxx", // 图标名称
  "include": "build/installer.nsh", // 包含的自定义nsis脚本 这个对于构建需求严格得安装过程相当有用。
},

installer.nsh的配置如下：

; Script generated by the HM NIS Edit Script Wizard.

; HM NIS Edit Wizard helper defines custom install default dir
!macro preInit
    SetRegView 64
    WriteRegExpandStr HKLM "${INSTALL_REGISTRY_KEY}" InstallLocation "D:\electron-builder-start-exe"
    WriteRegExpandStr HKCU "${INSTALL_REGISTRY_KEY}" InstallLocation "D:\electron-builder-start-exe"
    SetRegView 32
    WriteRegExpandStr HKLM "${INSTALL_REGISTRY_KEY}" InstallLocation "D:\electron-builder-start-exe"
    WriteRegExpandStr HKCU "${INSTALL_REGISTRY_KEY}" InstallLocation "D:\electron-builder-start-exe"
!macroend