带电子链接的msi安装程序 [英] Chained msi Installer with Electron

问题描述

我是Electron的新手，我正在构建一个要在Windows上安装的应用程序。
我在Electron的 docs 中阅读了有关如何分发应用程序的文档 a>，而我知道：

 电子伪造
电子制造商
电子包装商
  

当前，我正在使用：

  electron-builder-squirrel-windows： ^ 19.20.0，
 electron-builder： ^ 19.20.0，
 electron ： ^ 1.6.11 
  

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

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

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

查看 Atom 编辑器或 Slack ，我看到可以在安装过程中显示一些UI。通常如何完成？

编辑：
我刚刚读到有关 Windows安装程序，您需要为此
使用松鼠事件编辑编辑：

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

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

解决方案

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

1. webpack -建立可分发的应用程序客户端


2. electron-packager -建立电子二进制文件（在本例中为
   for Windows）


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

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

在我们的案例中，我使用 gulp 脚本包装 webpack 和 electron-packager 模块，我通过它们的API而不是它们的命令行衍生物来调用它们，以便将它们维护在一致的javascript上下文中，以便于在构建过程中轻松维护和错误处理（命令行解决方案很难确定范围和重新使用-目的比javascript，imo中的程序包，模块，文件和函数还要多。）

这可以通过理解我指的是哪种项目来解释。具体来说，如果您要构建的电子应用程序具有完整的项目结构，例如：

  C:。 
 +-资产/ 
 +-ClientSide 
 ¦ + --- index.html 
 ¦ + --- app 
 ¦ +- -app.component.ts 
 ¦ + --- app.module.ts 
 ¦ + --- main.ts 
 ¦ + --- AppContent / 
 ¦ ¦ + ---帮助/ 
 ¦ ++ + --- modals / 
 ¦ ++ + --- panels / 
 ¦ ++ + -shared / 
 ¦ + ---样式
 ¦ + --- dist / 
 ¦ + --- svgs / 
 ¦ + ---测试
 ¦ + --- AppContent / 
 ¦ + --- modals / 
 ¦ + --- panels / 
 ¦ + --- shared / 
 + --- dist / 
 +- edist 
 | \ --- Application-win32-ia32 [*安装的二进制源位置] 
 +-服务器端
 ¦ + --- app.js 
 ++ +- server.js 
 ¦ + ---测试/ 
 + ---安装程序
 + --- buildMSI.bat 
 +-应用程序/ 
 
 gulpfile.js 
 karma.conf.js 
 main.js 
 package.json 
 README.md 
 webpack.config.js 
  

这种结构显示了一个项目，该项目具有您在真实开发环境中想要的所有部分，例如webpack，配置，业力（客户端测试），打包操作（用于webpack的包装操作，电子打包程序），用于运行WiX命令的Windows批处理文件等。

这样的方法的一部分（可能记录在您的README.md中）类似于以下步骤，供新用户设置和构建您的项目：

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


2. npm install -加载/安装node_modules


3. gulp皮棉-验证代码并生成CI结果。 （您选择的Linter）


4. gulp测试-运行服务器端和客户端单元测试，为每个测试生成代码覆盖率CI结果


5. gulp build_web_client -使用 webpack API构建客户端Web项目电话。这应该会在项目下创建一个名为 dist的目录


6. gulp build_electron_app -使用<$ c $构建Electron可执行文件c> electron-packager API。这将在项目下创建一个名为 edist的目录。


7. cd安装程序


8. buildMSI.bat -此Windows批处理脚本应执行以下步骤：
   
   
   
   
   1. 准备清单通过使用Wix命令 heat.exe
   
   
   2. 预处理并使用Wix命令 candle.exe
   $将项目编译为对象（.wixobj）。 b $ b
   3. 使用Wix命令 Light.exe 将Wix项目链接到最终的可安装文件格式，从而生成安装MSI文件。
   
   




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



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

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

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

Currently I'm working with:

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

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, ...

No information on this is given on the electron.atom.io

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?

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

• Changing title to "Chained msi Installer with Electron"

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.

解决方案

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 - 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.

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.

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

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.

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> -- 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. 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.

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.

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.

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).

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