带 Electron 的链式 msi 安装程序 [英] Chained msi Installer with Electron

问题描述

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

I'm new to Electron and I am building an app that I would like to install on Windows. I read the documentation on how to distribute your app in Electron's docs, and I know about:

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.

Given this, I was able to create a Setup.exe to install my App, BUT I was not able to create any UI for the installation process.

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

I want to give the option to the user to change the installation path if he needs, show eventual Licences I want him to accept, ...

electron.atom.io

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

Look at Atom editor or Slack, that are built with Electron, I can see that it is possible to show some UI during the installation. How is this usually done?

我刚刚读到 windows-installer 你需要为此使用松鼠事件编辑

I just read about windows-installer that you need to use squirrel events for this Edit

• 将标题更改为使用 Electron 的链式 msi 安装程序"

请注意，安装程序首次启动您的应用时，您的应用将看到一个 --squirrel-firstrun 标志.这使您可以执行诸如显示初始屏幕或显示设置 UI 之类的操作.

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.

推荐答案

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

As an alternative to using the entire electron package stack for developing Windows MSI installation delivery, you might consider using the following mechanisms as another useful solution:

1. webpack - 构建您的应用程序客户端可分发
2. electron-packager - 构建您的电子二进制文件(在这种情况下Windows)
3. WiX 工具集 - 构建您的 Windows MSI 安装程序.

1. webpack - to build your application client distributable
2. electron-packager - to build your electron binaries (in this case for Windows)
3. WiX tool set - to build your Windows MSI installers.

当然，无论您选择使用哪种安装程序，您都必须执行第 1 步和第 2 步.我发现 webpack 是打包 Angular Web 应用程序(这是我的工作)的最稳定、可配置和完整的解决方案，而 electron-packager 是如果您想为您的应用实际构建特定于平台的二进制文件，则无法使用一种工具.

Of course, you have to do steps 1 and 2 regardless of what kind of installer you choose to employ. I've found webpack to be the most stable, configurable and complete solution for packaging an angular web app (which is what I work on), and electron-packager is the one tool you can't get around using if you want to actually build platform specific binaries for your app.

在我们的例子中，我使用 gulp 脚本来包装 webpack 和 electron-packager 模块，我通过它们的 API 而不是调用它们它们的命令行衍生品，以便在一致的 javascript 上下文中维护它们，以便在构建过程中轻松维护和错误处理(命令行解决方案比 javascript、imo 中的包、模块、文件和函数更难以确定范围和重新调整用途)).

In our case, I use gulp scripts to wrap the webpack and electron-packager modules, which I call via their API's rather than their command line derivatives in order to maintain them in a consistent javascript context for ease maintenance and error handling in the build process (command line solutions are much more difficult to scope and re-purpose than packages, modules, files and functions in javascript, imo).

通过了解我所指的项目类型可以更容易地解释这一点.这特别适用于您正在构建具有完整项目结构的电子应用程序，例如:

This can be explained a bit easier by understanding what kind of project I am referring to. This is specifically if you are building an electron application that has a full project structure such as this:

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 批处理文件等.

This kind of structure shows a project that has all the parts that you'd want in a real dev environment such as webpack, configuration, karma (client side testing), gulp for packaging operations (wraps operations for webpack, electron packager), windows batch file for running WiX commands, and more.

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

The flow of such an approach would be (probably documented in your README.md) something like these steps for new users setting up and building your project:

1. git clone <project/path> -- 将 repo 克隆到本地机器
2. npm install -- 加载/安装 node_modules
3. gulp lint -- 验证代码并生成 CI 结果.(您选择的短绒)
4. gulp test -- 运行服务器端和客户端单元测试，为每个测试生成代码覆盖 CI 结果
5. gulp build_web_client -- 使用 webpack API 调用构建客户端 Web 项目.这应该会在项目下创建一个名为dist"的目录
6. gulp build_electron_app -- 使用 electron-packager API 构建 Electron 可执行文件.这应该会在项目下创建一个名为edist"的目录.
7. cd 安装程序
8. buildMSI.bat -- 此 Windows 批处理脚本应执行以下步骤:

1. git clone <project/path> -- clone the repo to your local machine
2. npm install -- load/install the node_modules
3. gulp lint -- Validate code and produce CI results. (your choice of linters)
4. gulp test -- Run server side and client side unit tests, produce code coverage CI results for each
5. gulp build_web_client -- Build the client side web project using webpack API calls. This should produce a directory called "dist" created under the project
6. gulp build_electron_app -- Build the Electron executable using electron-packager API. This should produce a directory called "edist" created under the project.
7. cd Installer
8. buildMSI.bat -- this Windows batch script should do the following steps:

1. 通过使用Wix命令heat.exe<获取/edist目录的内容列表(在上面的目录树结构中看到并由步骤6创建)来准备清单文件(生成一个.wxs文件)/代码>
2. 使用 Wix 命令 candle.exe 将项目预处理并编译为对象 (.wixobj)
3. 使用 Wix 命令 Light.exe 将 Wix 项目链接到其最终的可安装文件形式，生成安装 MSI 文件.

1. prepare the manifest file (resulting in a .wxs file) by harvesting the content listing of the /edist directory (seen in the directory tree structure above and created by step 6) by using Wix command heat.exe
2. preprocess and compile the project into and object (.wixobj) using Wix command candle.exe
3. link the Wix project into its final installable file form using Wix command Light.exe, generating the install MSI files.

这只是一个建议.当然，您可以根据自己的最佳选择为每个步骤使用其他工具.这只是我发现的一种方法，它适用于开发用于部署到 Windows 目标的电子应用程序.这样做的好处是，使用 Electron，您可以选择使用步骤 1-6 构建到许多目标操作系统，然后如果您想使用 Windows 或 Mac、Linux 进行步骤 7 和 8，则可以使用不同的部署方法.

This is just one suggestion. You can, of course, use other tools for each of the steps as you choose best. This is just one approach that I've found works well for development of electron applications for deployment to a Windows target. The nice thing about this is that with Electron, you could choose to build to many target OSes, using steps 1-6, and then have different deployment approach if you wanted to go to Windows or Mac, Linux for steps 7 and 8.

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

Yes, it is true, you could use electron-builder (or electron-forge for those with simple needs) to package your app via Squirrel as a way to deploy to all OSes available to electron (which would mean replacing my steps 7 and 8 with those packaging alternatives). From my experience, and for our context, the Squirrel solution to Windows deployment seemed less desirable than using Wix for deployment.

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

To your original question about configurability to your installation, the nice thing about using Wix is that you get with it the ability to completely customize your installation UI and experience (including target pathing).

这篇关于带 Electron 的链式 msi 安装程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！