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您需要使用squirrel事件的内容编辑编辑：

将标题更改为“使用电子链接的msi安装程序”

请注意，安装程序第一次启动您的应用时，您的应用会看到--squirrel-firstrun标志。这允许您执行诸如显示启动画面或显示设置UI之类的操作。

Answer 1

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

webpack - 构建应用客户端可分发
electron-packager - 构建您的电子二进制文件（在本例中为 for Windows）
WiX工具集 - 构建Windows MSI安装程序。

当然，无论您选择使用何种类型的安装程序，都必须执行步骤1和步骤2。我发现webpack是打包角度网络应用程序（我正在处理的）最稳定，可配置和完整的解决方案，electron-packager是您可以使用的唯一工具。如果你想为你的应用程序实际构建特定于平台的二进制文件，请使用它。

在我们的例子中，我使用gulp脚本来包装webpack和electron-packager模块，我通过他们的API而不是命令行派生来调用这些模块，以便将它们保存在一致的javascript环境中，以便于构建过程中的维护和错误处理（命令行解决方案比javascript，imo中的包，模块，文件和函数更难以扩展和重新定位。）

通过了解我所指的项目类型，可以更容易地解释这一点。具体而言，如果您要构建具有完整项目结构的电子应用程序，例如：

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，配置，业力（客户端测试），用于打包操作的gulp（webpack的包装操作，电子打包器），用于运行WiX命令的Windows批处理文件等。

这种方法的流程（可能记录在您的README.md中）类似于新用户设置和构建项目的步骤：

git clone <project/path> - 将回购克隆克隆到本地计算机
npm install - 加载/安装node_modules
gulp lint - 验证代码并生成CI结果。（你选择的短裤）
gulp test - 运行服务器端和客户端单元测试，为每个
gulp build_web_client - 使用webpack API调用构建客户端Web项目。这应该产生一个名为＆＃34; dist＆＃34;的目录。在项目下创建
gulp build_electron_app - 使用electron-packager API构建Electron可执行文件。这应该产生一个名为＆＃34; edist＆＃34;的目录。在该项目下创建。
cd Installer
buildMSI.bat - 此Windows批处理脚本应执行以下步骤：
1. 通过使用Wix命令heat.exe
2. 使用Wix命令candle.exe
3. 使用Wix命令Light.exe将Wix项目链接到其最终可安装文件表单，生成安装MSI文件。

这只是一个建议。当然，您可以根据自己的选择使用其他工具。这只是我发现的一种方法，可用于开发用于部署到Windows目标的电子应用程序。关于这一点的好处是，使用Electron，您可以选择构建到许多目标操作系统，使用步骤1-6，然后如果您想要转到Windows或Mac，则使用不同的部署方法，执行步骤7和8。 / p>

是的，您可以使用electron-builder（或electron-forge来满足那些有简单需求的人）通过Squirrel打包您的应用程序，作为部署到所有可用电子操作系统的方式（这将是意味着用那些包装替代品替换我的步骤7和8）。根据我的经验和我们的上下文，Squirrel Windows部署解决方案似乎不如使用Wix进行部署。

关于您对安装的可配置性的原始问题，使用Wix的好处是您可以使用它来完全自定义您的安装UI和体验（包括目标路径）。

Answer 2

使用Squirrel时，无法在Windows上选择安装路径。它似乎也不存在。他们不想支持这一点。 See here和here。

与电子链接的msi安装程序

2 个答案: