windows - 带 Electron 链接的msi安装程序

Question

我是Electron的新手，正在构建要在Windows上安装的应用程序。
我在Electron的docs中阅读了有关如何分发您的应用程序的文档，并且我知道:

electron-forge
electron-builder
electron-packager

目前，我正在与:

"electron-builder-squirrel-windows": "^19.20.0",
"electron-builder": "^19.20.0",
"electron": "^1.6.11"

鉴于此，我能够创建一个Setup.exe来安装我的应用程序，但是我当时是
无法为安装过程创建任何UI。

我想给用户选项，如果他需要，可以更改安装路径，并显示我希望他接受的最终许可，...

electron.atom.io上未提供有关此信息

看一下用Electron构建的Atom编辑器或Slack，我看到可以在安装过程中显示一些UI。通常这是怎么做的？

编辑:
我刚刚读到有关windows-installer的信息，您需要为此使用松鼠事件
编辑编辑:

更改标题为“带有Electron的链式msi安装程序”

Notice that the first time the installer launches your app, your app will see a --squirrel-firstrun flag. This allows you to do things like showing up a splash screen or presenting a settings UI.

Answer 1

作为使用整个 Electron 封装堆栈来开发Windows MSI安装交付的替代方法，您可以考虑使用以下机制作为另一种有用的解决方案:

Webpack -构建您的应用程序客户端可分发的

Electron 封装程序-构建您的 Electron 二进制文件(在这种情况下，
对于Windows)

WiX工具集-构建Windows MSI安装程序。

当然，无论您选择使用哪种安装程序，都必须执行步骤1和2。我发现webpack是打包有角度的Web应用程序(这是我从事的工作)的最稳定，可配置和完整的解决方案，而electron-packager是您想要真正构建平台时无法使用的一种工具您的应用的特定二进制文件。

在我们的案例中，我使用gulp脚本来 package webpack和electron-packager模块，我通过它们的API而不是通过它们的命令行派生来调用这些模块，以便将它们维护在一致的javascript上下文中，以便于在构建过程中进行维护和错误处理(命令与javascript，imo中的程序包，模块，文件和函数相比，线性解决方案的范围和重新用途要困难得多。

通过理解我指的是哪种项目，可以更容易地解释这一点。特别是如果您要构建的 Electron 应用程序具有完整的项目结构，例如:

C:.
+---assets/
+---ClientSide
¦   +---index.html
¦   +---app
¦   ¦   +---app.component.ts
¦   ¦   +---app.module.ts
¦   ¦   +---main.ts
¦   ¦   +---AppContent/
¦   ¦   +---help/
¦   ¦   +---modals/
¦   ¦   +---panels/
¦   ¦   +---shared/
¦   +---Styles
¦   ¦   +---dist/
¦   ¦   +---svgs/
¦   +---test
¦       +---AppContent/
¦       +---modals/
¦       +---panels/
¦       +---shared/
+---dist/
+---edist
|   \---Application-win32-ia32 [*location of binary source for the install]
+---ServerSide
¦   +---app.js
¦   +---server.js
¦   +---test/
+---Installer
    +---buildMSI.bat
    +---Application/

gulpfile.js
karma.conf.js
main.js
package.json
README.md
webpack.config.js

这种结构显示了一个项目，该项目具有您在真实开发环境中所需的所有部分，例如webpack，配置，业力(客户端测试)，用于 package 操作的gulp(用于webpack的 package 操作， Electron package 程序)，窗口用于运行WiX命令的批处理文件等。

对于新用户设置和构建您的项目，这种方法的流程将(可能在您的README.md中记录)类似于以下步骤:

git clone <project/path>-将存储库克隆到本地计算机

npm install-加载/安装node_modules

gulp lint-验证代码并产生CI结果。 (您选择的短绒棉)

gulp test-运行服务器端和客户端单元测试，为每个

生成代码覆盖CI结果

gulp build_web_client-使用webpack API调用构建客户端Web项目。这将在项目

下创建一个名为“dist”的目录。

gulp build_electron_app-使用electron-packager API构建Electron可执行文件。这将在项目下创建一个名为“edist”的目录。

cd Installer

buildMSI.bat-此Windows批处理脚本应执行以下步骤:

使用Wix命令heat.exe

来收集/edist目录的内容列表(在上面的目录树结构中看到，并由步骤6创建)，从而准备 list 文件(生成.wxs文件)。

使用Wix命令candle.exe

对项目进行预处理并将其编译为对象(.wixobj)

使用Wix命令Light.exe将Wix项目链接到其最终的可安装文件格式，从而生成安装MSI文件。

这只是一个建议。当然，您可以根据自己的最佳选择对每个步骤使用其他工具。这只是我发现的一种方法，可以很好地用于开发 Electron 应用程序并部署到Windows目标。这样做的好处是，使用Electron，您可以选择使用步骤1-6构建到许多目标OS，然后如果要转到Windows或Mac，Linux进行步骤7和8，则可以采用不同的部署方法。

是的，的确如此，您可以使用electron-builder(或对于那些有简单需求的用户，使用electron-forge)通过Squirrel打包您的应用程序，作为将其部署到所有可用于 Electron 操作系统的方式(这意味着将我的第7步和第8步替换为这些打包方法) )。根据我的经验，就我们的情况而言，Squirrel解决方案用于Windows部署似乎不如使用Wix进行部署。

对于您最初关于安装可配置性的问题，使用Wix的好处是您可以完全自定义安装UI和体验(包括目标路径)。