Electron-制作程序安装包

5,990 阅读5分钟

目标

  1. 了解如何把编写的程序封装成可执行程序

  2. 了解安装包的原理以及生成方法

  3. 了解程序迭代升级的流程以及接入方法

程序封装

当应用开发完成后,为了方便使用者的运行,我们需要把源码封装成一个可运行的程序

第一步,了解概念

asar

从 Electron 的官方文档可以了解到 asar 是一种将多个文件合并成一个文件的类 tar 风格的归档格式。 Electron 可以无需解压整个文件,即可从其中读取任意文件内容。

我们的目标是,将编写好的源码封装成一个 .asar 的文件,可以让 Electron 直接运行。

第二步,安装工具

全局安装 asar 命令行工具

npm install -g asar

第三步,通过 asar 命令生成 .asar 文件

假设我们的源码所在目录为 /projects/electron-app, 在目录 /projects 下,执行如下命令

asar pack ./electron-app app.asar

顺利完成后,我们可以在当前目录下得到 app.asar文件

第四步,验证 asar 文件是否可用

这一步骤主要是为了向各位看官解释为什么要生成 asar 文件

Electron 应用下会有一个文件夹 名为 Resources,把生成的 app.asar 文件拷贝到该目录下,再双击打开 Electron 应用,Electron 则会自动运行 app.asar 里面的内容。

Windows 系统下,可以直接在 Electron 应用的目录下找到 Resources 文件夹,mac 系统下,我们只能看到 Electron 应用目录下只有一个 Electron.app 图标,不要着急,右击 Electron.app,选择 “显示包内容”,即可看到 Resource 文件夹

5c1c92c4c6632

5c1c9306b87e1

5c1c93431226e

总结

至此不难想象,其实我们已经可以获得了可以发布给其他人直接运行的应用了。

如果想修改应用图标名称,修改 **Electron 执行文件(Electron.exe 或者 Electron.app)**的 名称 和 图标即可。

我们只需要把上述的 Electron.app(Windows的话,是Electron应用目录下的所有内容) 打包成一个压缩包,即可发给使用者,使用者解压完压缩包后,直接运行里面的 Electron.app 或者 Electron.exe 即可。

以上就是 Electron 应用封装的基础原理,无论是何种方式的程序封装或者安装包打包方案,都离不开上述的过程与原理,都是针对 压缩、解压 等流程的高度化封装 与 自动化运行。

生成安装包

截至 2018-12-21, 流行的安装包生成有如下几种:

  1. NSIS

  2. electron-packager

  3. electron-builder

  4. grunt-electron-installer

解释

  1. NSIS 与 grunt-electron-installer 只能打包出 Windows 平台下的安装包, NSIS 可以对安装包的流程,安装界面高度定制化;grunt-electron-installer 打包出来的可执行文件,双击打开后直接安装 并 生成快捷方式

  2. electron-packager 支持输出多个平台(Linux、mac、Windows)的可执行文件,可以理解为 “程序封装” 步骤的自动化工具,严格意义上并不是输出安装包

  3. electron-builder 几乎支持所有平台所有格式(Docker也支持),针对macOS系统,可以打包出 .dmg 安装文件,针对 Windows系统,可以打包出 .exe 或者 .msi 安装文件。可以生成 双击自动安装 并 创建程序运行入口 的安装应用,也可以生成基于 NSIS 的定制化安装过程的安装应用。

推荐方案

electron-builder

原因:electron-builder 已经提供了非常成熟的打包方案,面向各个平台,各种格式,同时也非常容易上手。

举例:

  1. 准备好源码

    5c2080bebf110

  2. 在 package.json 准备好打包配置

    5c20837b92b60

    解释:

    "build":electron-builder 使用的配置信息;

    "dependencies.ref":项目引用的原生模块,在被打包的时候,会被自动重新编译,ref 模块在 main.js 中被引入,如果编译失败,在运行时会失败;

    "directories.output":打包完成后,输出目录;

    "buildVersion":应用对应的版本信息,该信息会被整合到安装包中去;

    "electronVersion":目标 electron 版本;

  3. 运行命令进行打包

    5c2085aa56740

    5c208604b8ed5

    解释:

    在 package.json 的 script 中准备好打包命令,参数 --mac 意味着目标平台是 macOS,参数 --64 意味着目标版本是64位应用

    在图中可以看到,我们在 build 配置中设置了目标 electron 版本为 3.0.13,electron-builder 自动下载 electron-3.0.13 版本,并自动按照目标版本自动编译了原生模块 ref

  4. 检查打包输出

    5c208883955a2

    5c2088f019109

    解释:

    打包自动输出到当前目录的 build 目录下,默认输出了 .zip、.dmg 和 直接可运行的 .app 文件;

    双击打开 mac 目录下的 electron-quick-start.app,顺利打开应用,同时,Electron 的版本为 3.0.13;

总结

推荐直接使用 electron-builder 工具,如果目标系统是 Windows 且需要高度定制化安装流程以及安装界面,可以考虑使用 自定义 NSIS 或者 使用 electron-builder 工具自带的 NSIS 方案。

electron-builder 工具文档 非常详尽,看官们可以依照 electron-builder 的官方教程 和 自己的实际需要,快速生成安装包和应用。

额外补充一点,无论是哪一种安装包生成方案,都离不开应用封装的原理,看官们如果感兴趣的话,可以尝试基于 Electron 框架,编写一个高度定制的安装程序,安装程序 再 进行其他应用的安装。

关于升级

Electron 官方提供了 自动升级的检查与运行机制,参考文档:Electron AutoUpdate

Electron 官方与第三方已经提供了很多不同的方案进行升级(具体方案不进行详述),各位看官可以根据自己的需求选择合适的方案实现升级。如果现成的方案都不能满足需求,看官们在已经了解了 应用封装的原理后,完全可以自己实现一套应用更新的机制。

注意点

  1. Don’t expect that you can build app for all platforms on one platform. -- 不要尝试在一个平台上,为不同的平台生成安装包或者应用,目前来说这不可行

  2. asar 限制:有一些特性,在源码上可以正常工作,但是当源码打包成 asar 后,则不能正常工作。这些限制需要提前留意,详情查看 Electron 官方文档