1. 为什么需要安装程序

当我们在Windows平台开发Electron应用时,直接运行exe文件是最简单的操作方式。但实际交付场景中,用户期望的是完整的安装体验:创建开始菜单快捷方式、写入系统注册表、选择安装路径等专业功能。这就像网购时收到的包裹——没人希望收到散装的零件,而是期待精美的包装盒和完整的说明书。

electron-builder作为Electron官方推荐的打包工具,与NSIS(Nullsoft Scriptable Install System)的结合就像搭乐高积木。前者负责将Electron应用编译成可执行文件,后者则像专业装修队,把各种文件精准部署到指定位置,并创建完整的安装流程。

2. 环境准备与项目配置

2.1 基础环境搭建

确保已安装:

# Node.js v16+(建议使用LTS版本)
node -v
# npm v7+
npm -v
# Windows环境下需要安装Visual Studio Build Tools
# 安装包可在微软官网下载

2.2 项目初始化

在现有Electron项目根目录执行:

npm install electron-builder --save-dev

修改package.json配置:

{
  "build": {
    "appId": "com.example.myapp",
    "win": {
      "target": "nsis",
      "icon": "build/icon.ico"
    },
    "nsis": {
      "oneClick": false, // 禁用一键安装
      "allowToChangeInstallationDirectory": true
    }
  },
  "scripts": {
    "dist": "electron-builder --win"
  }
}

3. 完整打包示例演示

3.1 基础打包命令

npm run dist

该命令会在dist目录生成:

  • myapp-1.0.0.exe(便携版)
  • myapp Setup 1.0.0.exe(安装程序)
  • latest.yml(自动更新配置文件)

3.2 进阶配置示例

创建builder-config.js:

module.exports = {
  extraResources: [
    {
      from: "assets/database",  // 需要额外打包的静态资源
      to: "data"  // 安装后存放路径
    }
  ],
  nsis: {
    include: "installer.nsh",  // 自定义安装脚本
    license: "LICENSE.txt"  // 安装时显示的许可协议
  }
};

在package.json中引入配置:

{
  "build": {
    "extends": null,
    "extraFiles": "./builder-config.js"
  }
}

4. NSIS高级定制开发

4.1 自定义安装页面

创建installer.nsh:

!define MUI_WELCOMEPAGE_TITLE "欢迎使用MyApp安装程序"
!define MUI_FINISHPAGE_RUN "$INSTDIR\MyApp.exe"

; 添加自定义安装类型选择页
!insertmacro MUI_PAGE_COMPONENTS
!insertmacro MUI_PAGE_DIRECTORY
!insertmacro MUI_PAGE_INSTFILES

Function .onInit
  ; 设置默认安装路径
  StrCpy $INSTDIR "$PROGRAMFILES\MyCompany\MyApp"
FunctionEnd

Section "主程序" SecMain
  SetOutPath "$INSTDIR"
  File /r "dist\win-unpacked\*.*"
SectionEnd

Section "桌面快捷方式" SecShortcut
  CreateShortcut "$DESKTOP\MyApp.lnk" "$INSTDIR\MyApp.exe"
SectionEnd

4.2 多语言支持配置

在package.json中添加:

{
  "build": {
    "nsis": {
      "language": "zh_CN",
      "multiLanguageInstaller": true
    }
  }
}

5. 应用分发场景分析

5.1 企业内部分发

  • 局域网部署时需考虑离线安装包大小控制
  • 使用自定义安装脚本实现静默安装参数:
MyAppSetup.exe /S /D=C:\Program Files\MyApp

5.2 在线更新机制

配置自动更新时需注意:

provider: generic
url: https://update-server.com/path
channel: latest

6. 技术方案对比评估

6.1 electron-builder优势

  • 开箱即用的签名支持
  • 自动生成delta更新包
  • 支持Squirrel.Windows自动更新框架

6.2 NSIS核心优势

  • 生成的可执行文件体积仅增加约200KB
  • 脚本级安装流程控制
  • 20年历史验证的稳定性

6.3 潜在问题清单

  • 杀毒软件误报(需代码签名证书)
  • 中文路径支持需特殊处理
  • 旧版本覆盖安装时残留文件处理

7. 实战注意事项

7.1 安装包签名必须

使用signtool进行代码签名:

signtool sign /t http://timestamp.digicert.com /f mycert.pfx /p password "installer.exe"

7.2 路径处理规范

在Electron应用中应使用:

const userDataPath = app.getPath('userData')

7.3 版本管理策略

采用语义化版本控制:

{
  "version": "2.1.0-beta.1",
  "build": {
    "publish": {
      "provider": "github",
      "releaseType": "draft"
    }
  }
}

8. 完整解决方案总结

通过electron-builder+NSIS组合,我们实现了从基础打包到企业级分发的完整链路。这种方案特别适合以下场景:

  1. 需要定制安装流程的商业软件
  2. 包含额外依赖项的中大型应用
  3. 有自动更新需求的桌面程序
  4. 需要控制安装包体积的交付场景

对于需要快速迭代的SAAS类应用,建议开启delta更新功能;而对于需要严格权限控制的政务类软件,则应强化安装过程中的UAC验证。