最近启动了一个新项目 eyasliu/electron-startkit，在打包构建上有一些研究，主要是针对于 windows 程序的打包，其他平台的构建方式没有深入

试过了两个打包工具，

electron-packager
electron-builder

另外对优化打包后的体积优化有一些研究

electron-packer

这个工具做的事情很单一：构建好之后把程序放在一个文件夹下，文件夹的 [应用名].exe 就是应用启动入口，我们写的代码都被放到了 resource/app[.asar] 里面。这就是这个工具做的全部事情。

尽管做的事情单一，但是其提供了很多可选项

正是因为它的功能比较单一，所以用法也很简单，而且构建好的包很通用，可以配合其他工具一起使用，比如 electron-winstaller 或者 electron-wix-msi 进一步的打包成为 msi 安装包, 单个 exe 执行文件等等

使用方法：

# 命令行形式: 
# electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]
electron-packager . DesktopApp --platform=win32 --arch=x64 --out=build --icon=icons/icon --asar

// 使用 js api
const packager = require('electron-packager')
packager({
  arch: process.env.ARCH_TARGET || 'x64',
  asar: true,
  dir: path.join(__dirname, './'),
  icon: path.join(__dirname, './icons/icon'),
  out: path.join(__dirname, './build'),
  overwrite: true,
  platform: process.env.BUILD_TARGET || 'all'packager({
}).then(() => {
  console.log('build done!')
}).catch(err => {
  console.error('build error!!!')
})

这里给出一点配置的建议：

asar: true 设置为 true 可以使自己写的代码经过加密并打包到一个app.asar 文件中
prune: true 设置为 true，只会将 package.json 的 dependencies 依赖包复制到 resources/app, 否则会将devDependencies 的依赖包也放进 resources/app 下面。当然，在最新版它默认就是 true[/斜眼笑]

配合其他工具二次打包

配合 electron-winstaller 打包成 msi

更多更详细配置见：https://github.com/electron/windows-installer#usage

const packager = require('electron-packager')
const electronInstaller = require('electron-winstaller');

packager({ /*上一步的配置*/}).then(() => {
  appDirectory: './build/[your app name]-[platform]-[arch]', // 上一步使用 packager 打包好的目录
  outputDirectory: './build/msi-installer',
  authors: 'My App Inc.',
  msi: true // 指定要 msi
}).then(() => {
  console.log('build msi installer done')
})

这样打包好之后 setup.exe 就是单个 exe 执行文件，setup.msi 就是windows 安装文件。

配合 electron-wix-msi 几乎和 electron-winstaller 一模一样，只是配置项有些不太一样。

electron-builder

官方网站与官方文档：https://www.electron.build/

electron-builder 这个工具就很强大了，几乎涵盖了构建所需要的大部分功能。官方的描述

A complete solution to package and build a ready for distribution Electron, Proton Native or Muon app for macOS, Windows and Linux with “auto update” support out of the box. 一个完整的解决方案，可以为macOS，Windows和Linux打包并构建一个可供分发的 Electron，Proton Native 或Muon应用程序，并提供开箱即用的“自动更新”支持。

所以它不但提供了构建功能，还提供了自动更新的功能。下面先看看它的构建功能

构建包

部分配置项解读

配置项分为 公共部分 和 特定平台部分，公共部分主要是设置程序通用的选项

公共部分

appId 必须要设置，是一个程序的唯一标识符，还与后面的程序自动更新有关
asar 设置为 true 可以把自己的代码合并并加密
productName 指定一下程序名称，这个对于后面创建桌面快捷方式和开始菜单都有关系
compression 压缩级别，如果要打包成安装包的话建议设为 maximum 可以使安装包体积更小，当然打包时间会长一点点

win 特定部分

这里只讲 windows 相关的构建，特地说下windows的配置

target 打包的类型，决定了打包后的文件类型
- nsis 打包成一个独立的 exe 安装程序，下方会详细说nsis配置
- nsis-web web安装程序(其实我还有些懵这是什么)，总之打包之后生成一个 exe 文件和一个 7z 压缩包，双击 exe 会直接启动应用
- portable 打包成单个 exe 独立执行程序，双击该 exe 直接启用应用，如果要用这个，请将 compression 设置为 store，不然你的应该会启动的非常慢
- appx 打包成 Windows Store（windows 应用商店）的程序，只有 windows 10 才可用
- msi 打包成 msi 安装程序
- squirrel 使用 squirrel 打包，该工具已不再维护，但是还可用，建议使用nsis替代
- 7z 压缩成 7z 文件，解压后可双击打开
- zip 压缩成 zip 文件，解压后可双击打开
- tar.xz 压缩成 tar.xz 文件，解压后可双击打开
legalTrademarks 公司名称

所以如果想要程序可以安装，请选择 msi 或者 nsis，如果想要作为独立执行程序，使用选择 portable

下面说下nsis的配置

nsis

对于打包 windows 程序来说，nsis这个配置是最主要的，nsis 本身是一个 Windows 系统下安装程序制作程序 http://nsis.sourceforge.net

这里对于它的一些配置特地说明

oneClick 建议为 false，可以让用户点击下一步、下一步、下一步的形式安装程序，如果为true，当用户双击构建好的程序，自动安装程序并打开，即：一键安装（one-click installer）
perMachine 安装的时候是否为所有用户安装
allowToChangeInstallationDirectory 建议为 true，是否允许用户改变安装目录，默认是不允许
installerIcon uninstallerIcon installerHeader installerHeaderIcon installerSidebar uninstallerSidebaruninstallDisplayName 定制安装与卸载的图标和界面
displayLanguageSelector 安装的时候是否让用户选择语言
createDesktopShortcut 是否创建桌面图标
createStartMenuShortcut 是否在开始菜单创建入口
menuCategory 是否在开始菜单创建一个分类入口
include 指定要包含 nsis 的脚本，基于内置的nsis脚本进一步扩展
script 指定自定义使用 nsis 的脚本，完全自己控制nsis 的打包

include nsis

命令行的使用

先去这里看看命令行的所有选项 https://www.electron.build/cli

在使用命令行工具的时候必须要指定平台(platform) 和架构(arch)，它还提供了快捷选项，比如 --linux --win --x64 --ia32 等等，这里我建议再指定一下 --config 使用对应的构建配置文件

# 默认就是 build 命令
electron-builder --config scripts/builder.json --win --64
#等价于
electron-builder build --config scripts/builder.json --win --64

js API

尚不明确，无文档

构建包体积优化

包体积的优化有以下几点：

package.json

在打包的过程中，electron 会读取package.json 的 dependencies 依赖列表，并使用该列表重新解析依赖，将解析到的依赖复制到 resources/app 中，也就是我们的代码资源包，所以优化体积最主要就是减小 node_modules 的体积，那么 dependencies 的依赖尽量少，那么 node_modules 体积就会小，所以尽可能的把不必要的依赖包不要放到 dependencies，而是放到 devDependencies. 尤其安装的时候注意

npm install -D xxx
npm install --save-dev xxx

yarn add --dev xxx

webpack

使用 webpack 合并压缩代码，可以混淆代码并减小代码体积，在webpack的 externals 配置设置为 package.json 的 dependencies。在以后的编码中如果一个包你能确定它只有 js 文件用上了，就把它放到 devDependencies ，如果出了js 文件外还有其他二进制文件，就放到 dependencies。

比如 lodash 放到 devDependencies， sqlite3 因为包含有二进制文件就放到 dependencies。

// weback.config.js
const npmPackage = require('./package.json')
module.exports = {
  // ...
  externals: [ ...Object.keys(npmPackage.dependencies) ],
  // ...
}

至此，node_modules 的体积应该是大幅度减少了。

yarn autoclean

因为在构建过程中，解析好依赖后是直接复制当前目录的 node_modules 下面的包，那么用 yarn autoclean 命令自动清理掉 node_modules 下面没用的文件，比如 .md, .txt, doc/ 等等文件全清理掉，进一步优化 node_modules 体积

yarn autoclean --init
yarn autoclean

自动更新

官方文档： https://www.electron.build/auto-update

要使用自定更新功能，那么首先在配置文件中要配置一下 publish，你需要准备好一个静态服务器，你要有权限往静态服务器的目录上传文件，就这样

{
  "publish": [
    {
      "provider": "generic",
      "url": "http://localhost:8888/download/",
      "channel": "latest"
    }
  ],
}

provider 使用哪种策略作为更新服务，这里指定用 generic，因为这是最简单最通用的
url 静态服务器的url
channel 频道，会决定检查更新的时候请求哪个文件，如果是 latest，就会请求 latest.yml

然后在main进程的入口文件加上代码

require("electron-updater").autoUpdater.checkForUpdatesAndNotify()

如果按照上面的配置，那么更新流程是：

请求 ${url}/${channel}.yml 文件，对比本地的客户端版本，如果没有新版本，什么都不做，否则下一步
请求 ${url}/${latest.yml中定义的文件名} 下载好安装包
提醒用户新安装包下载好了，下次重启更新，或者立即更新
自动安装更新

每当构建好一个版本，把构建完后生成的 latest.yml 和安装包上传到那个静态服务器的目录，就可以实现版本更新了，如果你有兴趣，完全可以自己动手写个后端服务基于这个流程解锁更多姿势

其中上面的更新流程，你应该留意到了一切都是自动完成，如果想要自定义这些规则，可以这样

监听autoUpdater的事件，一有更新状态变化就会发事件

error 检查更新错误
checking-for-update 正在检查更新
update-available 有新的可用更新
update-not-available 没有可用的更新，也就是当前是最新版本
download-progress 正在下载更新版，会有更新进度对象
update-downloaded 新安装包下载完成

还有一些 api 可以控制流程

.checkForUpdates() 执行一次检查更新
.checkForUpdatesAndNotify() 执行一次检查更新，如果有新的可用更新，还会自定弹出一个自带的通知提示告诉用户有新的更新
.downloadUpdate(cancellationToken) 执行下载安装包
.quitAndInstall(isSilent, isForceRunAfter) 退出应用并安装更新， isSilent 是否静默更新，isForceRunAfter更新完后是否立即运行

还有一些配置项

autoDownload = true 有可用更新时是否自动下载
autoInstallOnAppQuit = true 如果安装包下载好了，那么当应用退出后是否自动安装更新
allowPrerelease = false 是否接受开发版，测试版之类的版本号
allowDowngrade = false 是否可以回退版本，比如从开发版降到旧的稳定版

更优雅的更新

其实有个更好的更新方案，每次安装更新的时候都是全量下载安装包更新，但是electron的应用呢，通常只会更新 resources/app.asar 这个文件，但是这个文件是非常小的，在更新的时候可以只更新这一个文件，这样更轻量，更可控，这就需要自己动手写个后端服务配合了，当然这里只是给出一个方案并没有demo。

展示

以下是最终配置后的安装过程截图

项目地址 https://github.com/eyasliu/electron-startkit

qq 20180913165941 qq 20180913165951 qq 20180913165958 qq 20180913170005 qq 20180913170018 qq 20180913170022

Sep 05 '18 02:09 eyasliu

写的很详细，👍👍👍赞一个

Oct 19 '18 09:10 guandaxia

非常感谢, 省走很多路

Dec 18 '18 08:12 JimmyNi

https://github.com/wxnacy/study/tree/master/node/electron/electron-builder https://github.com/QDMarkMan/CodeBlog/blob/master/Electron/electron-builder%E6%89%93%E5%8C%85%E8%AF%A6%E8%A7%A3.md https://github.com/QDMarkMan/electron-builder-start/blob/master/package.json https://wxnacy.com/2018/05/10/use-electron-builder/ https://www.javascriptcn.com/read-5865.html

Apr 08 '19 14:04 stvenyin

最近需要

May 20 '19 09:05 zWingz

很详细

May 20 '19 09:05 ShiChenCong

最近边做边学也做了个小工具 (https://github.com/Symbolk/SmartCommit/ )，但是貌似现在windows下有更新无法弹出提醒，不知道怎么解决，看来是open两年的issue了：

https://github.com/electron-userland/electron-builder/issues/2700 https://github.com/electron/electron/issues/10864

Jul 18 '19 10:07 Symbolk

请问我再nsis中设置了 LICENCE.txt 这个文件后，打包完成显示的是乱码怎么解决？我试了UTF-8 等都不行呢。

Sep 25 '19 09:09 ideacco

@ideacco 我倒是没遇到乱码问题，你先确定一下你的nsis的字符编码是什么（其实我也不会看），再转成对应的字符编码。或者你可以先试试转成 ANSI ，或者转成UTF8带BOM的格式

Sep 26 '19 01:09 eyasliu

@ideacco我倒是没遇到乱码问题，你先确定一下你的nsis的字符编码是什么（其实我也不会看），再转成对应的字符编码。或者你可以先试试转成ANSI，或者转成UTF8带BOM的格式

好的，我已经解决了

Oct 22 '19 11:10 ideacco

最近发现一个坑，我有一个拖拽文件上传的功能，在开发测试的时候没有问题的，但是打包之后，win10系统在拖拽的时候就会出现一个禁止的图标，然后无法触发鼠标监听了，同样的程序在WIN7 和MAC下没有任何问题，在WIN10 的开发环境下也没有问题，打包了就出问题了。目前还在寻找解决方案，哪位有爬过坑的希望帮个忙呗谢啦

Oct 29 '19 08:10 ideacco

最近发现，在设置了autoInstallOnAppQuit = true之后，虽然可以在退出后安装更新包，但部分用户反应桌面快捷方式失效，双击快捷方式后提示快捷方式存在问题，不知道哪里出的问题

Nov 26 '19 07:11 zwdgit

请问安装和卸载完成之后弹网页怎么做？

Dec 09 '19 11:12 smi1lee

@smi1lee 按照 NSIS文档的说法，通过调用系统命令实现，你可以试试用 Exec "explorer" "https://www.xxxx.com"，我没有试过不确定行不行，或者你可以试试把 NSIS文档那个函数复制直接用

Dec 10 '19 08:12 eyasliu

@smi1lee 按照 NSIS文档的说法，通过调用系统命令实现，你可以试试用 Exec "explorer" "https://www.xxxx.com"，我没有试过不确定行不行，或者你可以试试把 NSIS文档那个函数复制直接用

我是写了个 Function un.onUninstSuccess HideWindow ExecShell "open" "https://www.xxxx.com" FunctionEnd 但是好像是和electron-builder里面是有冲突的还有一个检测程序是否在运行，虽然文档里面没有写，我看了源码是有可以自己定义的，不过我的环境好像出问题了，现在一build就报错

Dec 11 '19 02:12 smi1lee

!include logiclib.nsh !include x64.nsh !include nsProcess.nsh SilentInstall normal

!macro customCheckAppRunning ${GetProcessInfo} 0 $pid $1 $2 $3 $4 ${if} $3 != "${APP_EXECUTABLE_FILENAME}" ${if} ${isUpdated} # allow app to exit without explicit kill Sleep 100 ${endIf}

${nsProcess::FindProcess} "${APP_EXECUTABLE_FILENAME}" $R0
${if} $R0 == 0
  ${if} ${isUpdated}
    # allow app to exit without explicit kill
    Sleep 1000
    Goto doStopProcess
  ${endIf}
  Push "0"
  Quit
  doStopProcess:
    DetailPrint `Closing running "${PRODUCT_NAME}"...`
    nsExec::Exec `taskkill /im "${APP_EXECUTABLE_FILENAME}" /fi "PID ne $pid"` $R0
    Sleep 100


  ${nsProcess::FindProcess} "${APP_EXECUTABLE_FILENAME}" $R0
  ${if} $R0 == 0
    # wait to give a chance to exit gracefully
    Sleep 1000
    # do not use /t tree kill - app was killed softly already
    nsExec::Exec `taskkill /f /im "${APP_EXECUTABLE_FILENAME}" /fi "PID ne $pid"` $R0
    ${If} $R0 != 0
      DetailPrint `Waiting for "${PRODUCT_NAME}" to close (taskkill exit code $R0).`
      Sleep 2000
    ${endIf}
  ${endIf}
${endIf}

${endIf} !macroend

!macro preInit !insertmacro customCheckAppRunning $R0 ${If} $R0 == "0" MessageBox MB_ICONSTOP "The program is running. Please close the program before install." Quit ${EndIf} !macroend

ShowInstDetails show ShowUnInstDetails show

!macro customUnInit
!insertmacro customCheckAppRunning $R0 ${If} $R0 == "0" MessageBox MB_ICONSTOP "The program is running. Please close the program before uninstall. " Quit ${EndIf} !macroend

Function .onInstSuccess HideWindow ExecShell "open" "https://www.xxx.com" FunctionEnd

Function un.onUninstSuccess HideWindow ExecShell "open" "https://www.xxx.com" FunctionEnd

Dec 11 '19 02:12 smi1lee

!macro CHECK_APP_RUNNING !ifmacrodef customCheckAppRunning !insertmacro customCheckAppRunning !else !insertmacro _CHECK_APP_RUNNING !endif !macroend 源码路径\node_modules\app-builder-lib\templates\nsis\include\allowOnlyOneInstallerInstance.nsh 和卸载（下面代码）定义是一样的，所以我觉得应该是可以定义的，只是在官方文档中没有说明，只说明了部分可自定义 !ifmacrodef customUnInit !insertmacro customUnInit !endif

Dec 11 '19 02:12 smi1lee

请问安装和卸载完成之后弹网页怎么做？

卸载弹网页

!ifdef BUILD_UNINSTALLER
  !include "xxx.nsh"
!endif

xxx,nsh 放置位置放scripts或其它打包时能找到的位置如果有自动升级加上升级判断

Function un.onUninstSuccess
    HideWindow
    ExecShell "open" "https://www.xxx.com"
FunctionEnd

Dec 19 '19 08:12 smi1lee

请问，在win打包的时候没有生成latest.yml文件是什么原因？已经配置了publish参数

Dec 29 '19 09:12 big-zhangjun

请教下，是否有遇到打包后的应用无法卸载？网上找到的卸载方式。https://youtu.be/7NFaJtbv6fI

Feb 28 '20 18:02 xiaokaike

减少包大小这里我用了electron-builder 的双package.json 策略。主要原因是因为不想影响开发时对依赖的定义。使用这种方式我可以在根目录下声明一个app 的目录然后把应用所需的一些二进制包放到这个目录里面的node_modules 里面。但是包体积依旧比较大因为一些二进制的包还是会有相关依赖。怎么才能让我只复制二进制包而不复制其依赖呢？

May 25 '20 15:05 StitchC

Mark

Nov 26 '20 08:11 weichaozhan

👍

Dec 24 '20 15:12 catmade

大佬，如果要在这个页面加一个是否开机自启动的选项，结合 electron-builder 的 nsis 要怎么写呀？感谢大佬~

Jan 14 '21 08:01 FE-linmu

@eyasliu 请教一个关于 electron-builder files 配置的问题，Electron 项目根目录下有个 dist 文件夹：

我想只打包 dist 文件下 EleRenjia 中非 EleRenjia文件夹、非 EleRenjia.7z 的其它所有文件夹和文件改怎么写？

Jun 23 '21 02:06 glk-hll

怎么实现覆盖安装，就是我在没有卸载旧版本的应用时，就直接安装的新版本时这个该怎么实现

Aug 26 '21 15:08 Liting1

两点疑问：

lodash为什么是放在 devDependencise？
如果 electron 只处理 dependencise 的依赖，那么 devDependencise 的怎么搞，比如我此时将 loadsh 放在 devDependencise 中，electron 打包之后我在 app.asar 解压后的 node_modules 是看不到 lodash 包的，但是我代码中又用到了 lodash ，这时候按道理来说是找不到依赖的，讲道理electron打包应该是会gg的。为什么能运行呢？

虚心请教，还望回复～

Sep 23 '21 02:09 PDKSophia

@xiaokaike @eyasliu nsis 配置了默认路径为D盘，但是打包后安装的默认路径还是C盘，这个是什么原因呢，有解决方案吗? electron-builder: 22.10 electron: 11.0.2

Mar 31 '22 08:03 camellieeee

有没有办法绕过UAC，现在D盘权限是有的，但是electron-builder内部判断的是UAC admin权限

Oct 10 '22 10:10 mqliutie

已解决，导致的原因是公司电脑的权限问题，在安装软件的时候，禁止修改注册表，导致注册表中的默认路径没有被修改，开放权限就好了。

Oct 10 '22 10:10 camellieeee

请问有没有办法指定文件夹路径，在安装/自动升级的时候只有这个路径不被覆盖重装？

Aug 14 '23 09:08 AtonalStar

blog
blog copied to clipboard

electron 构建打包总结

electron-packer

使用方法：

配合其他工具二次打包

electron-builder

构建包

部分配置项解读

公共部分

win 特定部分

nsis

include nsis

命令行的使用

js API

构建包体积优化

package.json

webpack

yarn autoclean

自动更新

展示

blog blog copied to clipboard

electron 构建打包总结

electron-packer

使用方法：

配合其他工具二次打包

electron-builder

构建包

部分配置项解读

公共部分

win 特定部分

nsis

include nsis

命令行的使用

js API

构建包体积优化

package.json

webpack

yarn autoclean

自动更新

展示

blog
blog copied to clipboard