如何在Windows中为Electron Framework应用程序创建MSI安装程序

本文概述

• 1.打包(构建)你的电子应用程序
• 2.安装WiX工具集
• 3.配置构建脚本
• 4.创建安装程序

为基于Electron的应用程序创建Windows安装程序的最常见方法是通过Windows-installer模块, 该模块不需要管理员权限, 并且与自动更新程序捆绑在一起。但是, 如果你需要按照Microsoft打算安装软件的方式创建传统的MSI, 则此模块是你的朋友。它创建一个独立的MSI, 将你的应用程序安装到Program Files或任何用户定义的目录, 非常类似于Office, Node.js或其他流行应用程序的安装程序。它允许升级和降级。

在本文中, 我们将向你介绍如何使用Electron WiX MSI软件包轻松为你的Electron Framework应用程序创建安装程序的Windows版本。

1.打包(构建)你的电子应用程序

第一步, 你需要准备好要打包的电子项目。你可以使用Electron Packager模块创建Electron应用程序的发行版。 Electron Packager是一个命令行工具和Node.js库, 它将基于Electron的应用程序源代码与重命名的Electron可执行文件和支持文件捆绑在一起, 准备分发。

要生成此版本的应用程序, 请使用以下命令在计算机中全局安装Electron Packager模块：

npm install electron-packager -g

你可以在此处找到有关如何从头开始包装电子应用程序的更详细的教程。在我们的情况下, 我们将使用以下命令快速打包应用程序：

electron-packager . --platform=win32 --arch=x64 OurCodeWorld

这将创建应用程序的可分发版本, 并创建一个包含其运行内容的完整目录：

这将是本教程中MSI文件上包含的目录。

2.安装WiX工具集

为了创建安装程序, 我们将使用本机工具。该模块依赖于WiX Toolset构建工具, 该工具包含在开发和构建机器上创建安装所需的一切。你可以从此处的Github存储库中的项目的”发行”页面下载最新发行版。在此页面中, 你可以找到下载的选项：

• wix311.exe是WiX Toolset构建工具的安装程序。
• wix311exe.zip在.zip文件中包含wix311.exe安装程序, 如果你的IT部门禁止直接下载.exe文件, 则该文件很有用。
• wix311-binaries.zip包含组成WiX工具集的文件, 如果你不想安装工具集, 例如, 如果你只是将WiX签入源代码管理中, 则wix311-binaries.zip很有用。
• wix311-debug.zip包含WiX源代码和符号(.pdb)文件的参考副本, 这在调试WiX问题时非常有用。

我们感兴趣的是第一个选项, 即WiX工具集的安装程序, 它是一个如下所示的可执行文件：

单击安装, 等待安装完成, 完成后, 你将在C：\ Program Files(x86)\ WiX Toolset v3.11 \中找到安装文件。安装WiX之后, 你需要将WiX Toolset的二进制路径公开给Windows的PATH环境变量。在Windows的开始菜单中搜索环境变量, 可以轻松完成此操作：

然后单击环境变量：

在新窗口中, 搜索”系统变量”, 然后查找”路径”变量, 选择并编辑它：

一旦在路径中公开了WiX工具集的二进制路径, 你就可以从CLI(以及electronic-wix-msi模块)运行Candle和Light可执行文件。

3.配置构建脚本

安装WiX工具集之后, 你将能够使用Electron Wix模块来创建安装程序。该模块要实现的逻辑如下, 你将需要创建一个脚本来生成安装程序。你实际上可以在项目中执行此操作, 因此请使用以下命令将模块与NPM一起安装：

npm install electron-wix-msi --save-dev

有关此软件包的更多信息, 请访问Github上的官方存储库。将模块安装到项目中之后, 你可以继续创建脚本, 该脚本将与你的项目一起构建MSI文件。

在电子项目的根目录中创建一个脚本build_installer.js, 并在其中添加以下内容：

// ./build_installer.js

// 1. Import Modules
const { MSICreator } = require('electron-wix-msi');
const path = require('path');

// 2. Define input and output directory.
// Important: the directories must be absolute, not relative e.g
// appDirectory: "C:\\Users\sdkca\Desktop\OurCodeWorld-win32-x64", const APP_DIR = path.resolve(__dirname, './OurCodeWorld-win32-x64');
// outputDirectory: "C:\\Users\sdkca\Desktop\windows_installer", const OUT_DIR = path.resolve(__dirname, './windows_installer');

// 3. Instantiate the MSICreator
const msiCreator = new MSICreator({
    appDirectory: APP_DIR, outputDirectory: OUT_DIR, // Configure metadata
    description: 'This is a demo application', exe: 'OurCodeWorld', name: 'Our Code World Desktop App', manufacturer: 'Our Code World Inc', version: '1.0.0', // Configure installer User Interface
    ui: {
        chooseDirectory: true
    }, });

// 4. Create a .wxs template file
msiCreator.create().then(function(){

    // Step 5: Compile the template to a .msi file
    msiCreator.compile();
});

基本上, 在此脚本中, 要创建没有自定义的第一个安装程序, 只需更改appDirectory和outputDirectory, 分别需要在其中分别提供电子打包版本的绝对路径以及MSI文件将存储的目录。 MSICreator类作为第一个参数接收的配置对象可以包含以下属性：

• appDirectory(字符串)-安装程序的源目录, 通常是电子包装程序的输出。

• outputDirectory(字符串)-输出目录。将包含完成的msi以及中间文件.wxs和.wixobj。

• exe(字符串)-exe的名称。

• description(字符串)-应用程序的描述。

• 版本(字符串)-应用程序的版本。

• 名称(字符串)-应用程序的名称。

• 制造商(字符串)-制造商的名称。

• appUserModelId(字符串, 可选)-在快捷方式上设置为appUserModelId的字符串。如果没有通过, 则将其设置为com.squirrel。(Name)。(exe), 该名称应与Squirrel给你的应用提供的ID相匹配。

• shortName(可选, 字符串)-应用的简称, 在不允许空格和特殊字符的地方使用。如果未定义, 将使用该名称。

• shortcutFolderName(字符串, 可选)-Windows”开始”菜单中的快捷方式文件夹的名称。如果未定义, 将使用制造商字段。

• 快捷方式名称(字符串, 可选)-Windows”开始”菜单中的快捷方式名称。如果未定义, 将使用应用程序的名称字段。

• programFilesFolderName(字符串, 可选)-应用程序将位于其中的文件夹的名称。如果未定义, 将使用应用程序的名称。

• upgradeCode(字符串, 可选)-应用程序用来标识自身的唯一UUID。该模块将为你生成一个模块, 但是重用它以实现无冲突升级很重要。

• 语言(数字, 可选)-安装程序使用的Microsoft Windows语言代码标识符。如果未定义, 将使用1033(英语, 美国)。

• certificateFile(字符串, 可选)-Authenticode代码签名证书的路径。

• certificatePassword(字符串, 可选)-用于解密certificateFile中给定证书的密码。

• signWithParams(字符串, 可选)-传递给signtool.exe的参数。覆盖certificateFile和certificatePassword。

• 扩展名(数组, 可选)-指定要使用的WiX扩展名, 例如[‘WixUtilExtension’, ‘C：\ My WiX Extensions \ FooExtension.dll’]

• ui(UIOptions, 可选)-启用UI的配置。请参阅下面的详细信息。

• arch(字符串, 可选)-定义要为其构建MSI的体系结构。值可以是x86或x64。如果未定义, 则默认值为x86。

UI配置(可选)

传递给安装程序实例的选项中的ui属性允许更详细地配置UI。它具有以下可选属性：

• enabled(布尔值, 可选)-是否显示典型的用户界面。默认为true。如果设置为false, Windows将显示最小的” Windows正在配置NAME_OF_APP”界面。
• 模板(字符串, 可选)-替换你自己的XML, 该XML将在编译安装程序以自定义UI选项之前插入最终的.wxs文件。
• 选择目录(布尔值, 可选)-如果设置为true, 则最终用户将能够选择安装目录。默认情况下设置为false。如果使用自定义模板, 则无效。
• images(可选)-使用自定义文件覆盖默认安装程序映像。我推荐JPG。
  • 背景-(可选, 字符串)493 x 312在欢迎和完成对话框中使用的背景位图。将用作WixUIDialogBmp。
  • 横幅-(可选, 字符串)493×58在大多数不使用背景的对话框中使用的顶部横幅。将用作WixUIBannerBmp。
  • exclamationIcon-(可选, 字符串)32 x 32 WaitForCostingDlg对话框中的感叹号图标。将用作WixUIExclamationIco。
  • infoIcon-(可选, 字符串)32 x 32取消和错误对话框上的信息图标。将用作WixUIInfoIco。
  • newIcon-(可选, 字符串)16 x 16″浏览”对话框的”新文件夹”图标。将用作WixUINewIco。
  • upIcon-(可选, 字符串)16 x 16″浏览”对话框的”向上”图标。将用作WixUIUpIco。

4.创建安装程序

最后, 你只需要运行用于构建MSI文件的脚本。使用node轻松运行它：

node build_installer.js

只要你可以从Windows命令提示符的PATH目录中获得Candle和light可执行文件, 这将开始构建安装程序, 并且将花费一些时间。它将在窗口上输出以下字符串：

安装程序(在本例中为OurCodeWorld)将在windows_installer目录中生成：

如果运行它, 将有一个大家都知道的基本设置：

在我们的情况下, 该配置将允许用户更改安装目录：

就是这样, 在那里你有一个用于Electron Framework应用程序的常规Windows安装程序。作为重要提示, Electron目录的压缩版本约为142 MB, 但与MSI安装程序打包在一起, 其大小为60MB。

编码愉快！