如何为使用Electron Framework构建的应用程序创建Windows安装程序

本文概述

1.准备工作区
2.安装Electron winstaller模块
3.管理桌面快捷方式(安装, 更新和卸载事件)
4.构建你的应用
5.从你的应用程序创建安装程序
重要笔记

如果要创建而不是基于Squirrel的安装程序, 而要创建MSI(Microsoft安装程序)安装程序, 请改用本教程。
作为开发人员, 你可能知道Linux具有软件包管理器, 因此开发人员不需要” 需要” 安装程序。开发人员只需要为发行版提供一个软件包, 然后每个发行版都有一种安装此软件包的方式, 这种方式可以在终端(apt-get)中或通过图形界面(例如Ubuntu软件中心。但是, Windows不是Linux。

如何为使用Electron Framework构建的应用程序创建Windows安装程序

文章图片
几乎所有安装程序都是由工具创建的(例如WiX, Nsis, Inno Setup等)。在本文中, 你将学习如何使用electronic-winstaller模块为Windows创建Windows安装程序, 该模块使用Squirrel(Windows桌面应用程序的安装和更新框架)。
1.准备工作区而且, 这并不意味着你应该清洁计算机。为了使本教程易于理解, 我们将在桌面上创建一个名为” electron-workspace” 的文件夹, 该文件夹将包含在一个文件夹中, 该文件夹包含你的Electron Project的源代码：

文章图片
在这种情况下, 该文件夹将位于C：\ Users \ sdkca \ Desktop \ electron-workspace, 并且电子项目的源代码将位于其中(myapp-source)。
2.安装Electron winstaller模块现在, 我们需要安装将有助于我们创建安装程序的模块, 在这种情况下, 我们将使用electron-winstaller。该NPM模块使用Squirrel为Electron应用程序构建Windows安装程序。启动NodeJS命令提示符, 然后使用导航到工作区(请注意, 模块需要安装在工作区中, 而不是项目中)：

cd C:\Users\sdkca\Desktop\electron-workspace

然后使用以下命令安装模块：

npm install electron-winstaller

安装模块后, 我们的工作区现在将具有2个文件夹：

文章图片
3.管理桌面快捷方式(安装, 更新和卸载事件) 可以安装的应用程序, 但是一旦关闭, 便找不到可执行文件来启动它, 这是没有用的。因此, 我们将使用电子松鼠启动模块, 它将帮助你实现我们的目标。它处理最常见的命令, 例如管理桌面快捷方式(安装事件, 更新事件和卸载事件)。
该模块需要安装在项目内部, 而不是工作空间中, 因此请使用NodeJS命令提示符导航到Electron项目的源代码文件夹, 在这种情况下, 我们将使用：

cd C:\Users\sdkca\Desktop\electron-workspace\myapp-source

然后使用以下命令安装模块：

npm install electron-squirrel-startup

安装模块后, 我们需要用一些代码来指导我们要做什么。我们将添加一些代码, 尤其是在Electron Project的main.js文件中。在文件的开头(在声明应用变量之后), 添加以下几行：

// Module to control application life. (this variable should already exist)const app = electron.app// this should be placed at top of main.js to handle setup events quicklyif (handleSquirrelEvent(app)) {// squirrel event handled and app will exit in 1000ms, so don't do anything elsereturn; }

handleSquirrelEvent函数希望将app变量作为第一个参数, 可以将该函数添加到main.js文件的末尾：
注意 【如何为使用Electron Framework构建的应用程序创建Windows安装程序】仅当应用程序在安装程序中时, 才会执行以下代码, 因此在你处理项目时不会执行此代码。

function handleSquirrelEvent(application) {if (process.argv.length === 1) {return false; }const ChildProcess = require('child_process'); const path = require('path'); const appFolder = path.resolve(process.execPath, '..'); const rootAtomFolder = path.resolve(appFolder, '..'); const updateDotExe = path.resolve(path.join(rootAtomFolder, 'Update.exe')); const exeName = path.basename(process.execPath); const spawn = function(command, args) {let spawnedProcess, error; try {spawnedProcess = ChildProcess.spawn(command, args, {detached: true}); } catch (error) {}return spawnedProcess; }; const spawnUpdate = function(args) {return spawn(updateDotExe, args); }; const squirrelEvent = process.argv[1]; switch (squirrelEvent) {case '--squirrel-install':case '--squirrel-updated':// Optionally do things such as:// - Add your .exe to the PATH// - Write to the registry for things like file associations and//explorer context menus// Install desktop and start menu shortcutsspawnUpdate(['--createShortcut', exeName]); setTimeout(application.quit, 1000); return true; case '--squirrel-uninstall':// Undo anything you did in the --squirrel-install and// --squirrel-updated handlers// Remove desktop and start menu shortcutsspawnUpdate(['--removeShortcut', exeName]); setTimeout(application.quit, 1000); return true; case '--squirrel-obsolete':// This is called on the outgoing version of your app before// we update to the new version - it's the opposite of// --squirrel-updatedapplication.quit(); return true; }};

前面的代码应该处理在系统中安装新应用时发生的基本事情, 例如, 快捷方式将添加到” 开始” 菜单和桌面中, 并且在执行卸载程序时它将删除快捷方式, 此外, 它无需任何修改即可工作。如果需要, 可以随意添加更多代码。
4.构建你的应用完成了完成已安装应用程序的基本任务所需的修改, 现在继续构建你的应用程序。我们假设你知道如何使用电子包装程序之类的工具来构建应用程序。如果不这样做, 请阅读以下有关如何在Windows中使用电子打包程序从你的应用程序创建发行版的文章。
在知道如何构建你的应用程序之后, 继续进行操作。导航到工作空间(以便在其中创建项目)：

cd C:\Users\sdkca\Desktop\electron-workspace\myapp-source

并构建项目, 例如, 我们将使用以下命令构建项目：

electron-packager C:\Users\sdkca\Desktop\electron-workspace\myapp-source --platform=win32 --arch=x64 myapp-source-built

这将在电子工作空间文件夹中创建具有以下结构的myapp-source-built-win32-x64文件夹：

文章图片
5.从你的应用程序创建安装程序构建项目后, 你可以从中创建安装程序。创建一个将在其中创建安装程序的文件夹, 特别是在我们的工作空间(C：\ Users \ sdkca \ Desktop \ electron-workspace)中, 并使用你想要的名称, 在这种情况下, 它将是myapp-source-built-installers。你不会触摸此文件夹, 因为安装程序将在下一步自动创建。在这一步, 你应该有4个文件夹(myapp-source-built-installers为空)：

文章图片
现在创建一个脚本来创建我们的安装程序, 在电子工作区(C：\ Users \ sdkca \ Desktop \ electron-workspace)中创建build.js文件, 其中包含以下代码：
注意如果你不习惯使用相对路径, 则可以在第一次尝试中使用绝对路径来了解正在发生的事情。

// C:\Users\sdkca\Desktop\electron-workspace\build.jsvar electronInstaller = require('electron-winstaller'); // In this case, we can use relative pathsvar settings = {// Specify the folder where the built app is locatedappDirectory: './myapp-source-built-win32-x64', // Specify the existing folder where outputDirectory: './myapp-source-built-installers', // The name of the Author of the app (the name of your company)authors: 'Our Code World Inc.', // The name of the executable of your builtexe: './myapp-source-built.exe'}; resultPromise = electronInstaller.createWindowsInstaller(settings); resultPromise.then(() => {console.log("The installers of your application were succesfully created !"); }, (e) => {console.log(`Well, sometimes you are not so lucky: ${e.message}`)});

注意你可以在上一个脚本的设置中更改图标和其他属性。在此处检查所有受支持的选项。
要从你的应用程序构建安装程序, 只需执行此脚本即可。但是, 如果你发现此错误：
Component / @ Id属性的值” your-app-exe-name.exe” 不是合法标识符。标识符可以包含ASCII字符A-Z, a-z, 数字, 下划线(_)或句点(。)。每个标识符必须以字母或下划线开头。
必须在/your-built-project/resources/app/package.json文件中编辑项目的name属性, 并删除或替换所有连字符(-符号), 例如, 如果package.json看起来像：

{"name": "electron-quick-start"}

更改为：

{"name": "electron_quick_start"}

如果你已经对此进行了验证, 请继续执行build.js脚本, 并使用NodeJS命令提示符导航到工作空间：

cd C:\Users\sdkca\Desktop\electron-workspace

并执行脚本：

node build.js

安装程序文件将被创建, 并且将花费一些时间。创建安装程序后, 你将在控制台中看到以下消息：

文章图片
最后, 打开installers文件夹(在本例中为C：\ Users \ sdkca \ Desktop \ electron-workspace \ myapp-source-built-installers), 你会发现3个安装程序(msi安装程序, 可执行安装程序和nuGET软件包) )：

文章图片
你可以尝试以管理员身份执行Setup.exe文件在本地安装你的应用程序。然后, 迷你安装程序将在你的系统上安装该应用程序, 你将能够在Windows的开始菜单中以及桌面的快捷方式中看到它：
注意如果你在build.js脚本的loadingGif选项中提供了要在安装过程中显示的gif文件的路径, 则可以更改设置加载动画。

文章图片
请注意, 可执行文件的名称, 描述和其他属性可以在应用程序的package.json和winstaller模块的选项中进行更改, 有关更多信息, 请访问存储库以查看文档。
重要笔记对于开发或内部使用, 创建没有签名的安装程序是可以的, 但是对于生产应用程序, 你需要对应用程序进行签名。 Internet Explorer的SmartScreen筛选器将阻止你的应用程序下载, 并且许多防病毒供应商都将你的应用程序视为恶意软件, 除非你获得有效的证书。
任何对” Authenticode代码签名” 有效的证书都可以在这里使用, 但是如果你获得了正确的代码证书, 也可以选择加入Windows错误报告。此MSDN页面包含有关在何处获得WER兼容证书的最新链接。为此, “ 标准代码签名” 证书就足够了。
编码愉快！