【问题标题】:Chained msi Installer with Electron带 Electron 的链式 msi 安装程序
【发布时间】:2018-02-09 13:50:00
【问题描述】:

我是 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 上没有提供这方面的信息

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

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

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

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

【问题讨论】:

    标签: windows windows-installer installation electron


    【解决方案1】:

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

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

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

    在我们的例子中,我使用 gulp 脚本来包装 webpackelectron-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 中)类似于新用户设置和构建项目的以下步骤:

    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 Installer
    8. buildMSI.bat -- 这个 Windows 批处理脚本应该执行以下步骤:
      1. 通过使用 Wix 命令heat.exe 获取 /edist 目录的内容列表(在上面的目录树结构中看到并由步骤 6 创建)来准备清单文件(生成 .wxs 文件)
      2. 使用Wix命令candle.exe预处理和编译项目到对象(.wixobj)
      3. 使用 Wix 命令Light.exe 将 Wix 项目链接到其最终的可安装文件形式,生成安装 MSI 文件。

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

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

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

    【讨论】:

    • 你认为我可以用电子编译替换 webpack 吗?我的项目是使用electron-forge init 创建的
    【解决方案2】:

    使用 Squirrel 时不能在 Windows 上选择安装路径。未来似乎也不存在。他们不想支持这一点。 See herehere

    【讨论】:

      猜你喜欢
      • 2016-07-23
      • 2015-03-10
      • 2020-01-22
      • 2019-07-26
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-07-03
      • 2017-03-11
      相关资源
      最近更新 更多