zhen's blog

编译思想,编译人生

electron-builder进行DEBUG输出的正确方式

前言

使用Electron进行打包通常会用到electron-builder或者electron-packager两种工具。在使用electron-builder的时候,由于对机制的不熟悉,我们在打包过程中常常遇到很多环境错误,但最终只是一些简单的错误信息,难以排查问题。本文将介绍electron-builder进行DEBUG输出的正确方式来帮助排查打包过程中的各种问题。

本地node与electron内部的node

在对Electron进行打包的时候,需要对当前Electron项目中使用到的node原生C/C++模块进行额外的平台编译,这个过程被称为rebuild。有这样的一个步骤,是因为electron在运行主进程脚本的时候,是跑在了electron内部的一个nodejs环境的,electron内部的nodejs与开发机器上的nodejs并不一定是相同的。为了验证这一论点,我们进行如下的一个测试,来分别打印本地机器安装的node的版本和electon内部的node版本:

接下来是electron主进程脚本的node版本显示(main.js):

接下来是分别运行npm run show-local-node-versionnpm run start

可以看到输出确实和我们的理解是一致的,版本为11.2.0的electron内部的node版本呢是12,而我们本地机器上的node是14。这也侧面说明了为什么一般的electron应用程序会很大,因为一份electron应用程序,就有一个node的运行时。

electron-builder调试输出正确方式

electron-builder进行打包的时候,会建议你在此之前使用electron-builder install-app-deps的命令。该命令的作用就是针对即将打包的electron程序对应的node版本进行原生模块的编译工作,以达到模块运行时匹配。实际上,install-app-deps内部依然使用了node-gyp相关知识,关于这一块的知识,读者可以翻阅我之前的文章《node-pre-gyp以及node-gyp的源码简单解析(以安装sqlite3为例)》来了解,这里不再赘述。本文着重介绍electron-builder如何进行debug打印,好知道打包的过程中发生了什么。

  1. 首先我们准备在项目中,安装一个需要根据平台原生编译的npm包:images
  2. 然后在package.json中的scripts中添加一段脚本:"installappdeps": "electron-builder install-app-deps"
  3. 最后调用命令npm rum installappdeps执行该脚本

DEBUG环境变量

官方文档中指出了,你可以设置环境变量的方式来方便输出:

Set the DEBUG environment variable to debug what electron-builder is doing:

设置DEBUG环境变量值为字符串electron-builder

1
DEBUG=electron-builder

FPM_DEBUG 环境变量,将会显示更多关于构建Linux平台程序的细节(除了snap和appimage)。

  • cmd(Windows CMD)

On Windows the environment variable is set using the set command:

在Windows CMD设置环境变量可以使用如下命令:

1
set DEBUG=electron-builder
  • PowerShell

PowerShell uses different syntax to set environment variables:

PowerShell使用不同的语法来设置环境变量:

1
$env:DEBUG=electron-builder

在我们的机器上,我们同样设置该环境变量,然后执行:

发现输出了大量的关于electron-builder的DEBUG打印,为我们了解electron-builder install-app-deps提供了更多的信息。

verbose参数

然而,有的时候光是设置上述DEBUG环境变量还不够,因为electron-builder内部在进行rebuild操作的时候,还会以子进程方式调用node-gyp等工具,这些工具可不会查看上面的环境变量来输出调试信息的。我们需要在electron-builder调用node-gyp的时候,还能够打印这些工具的调试信息。熟悉node的读者可能会说,那我使用electron-builder的时候,传入--verbose怎么样?就像如下的方式:

1
"installappdeps": "electron-builder install-app-deps --verbose"

不幸的是,虽然--verbose能被node-gyp识别,无法被electron-builder识别,。当你直接这么调用的时候,会出错:

那么要如何解决这个问题呢?正确的做法是编写两个scripts

1
2
3
4
5
 "scripts": {
......
"installappdeps": "electron-builder install-app-deps",
"installappdeps-with-verbose": "npm run installappdeps --verbose"
},

然后在想要进行verbose打印的时候,执行npm rum installappdeps-with-verbose

可以看到,在install-app-deps的DEBUG打印前,我们还看到node给出的一些额外信息。