如何解决 electron-api-demo 的打包白屏问题

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

electron官方有个electron-api-demo的例子，是个学习electron的好帮手。从github拉取到对应的代码后，我们可以成功的start这个项目。但是，我们试图构建这个项目到可执行文件后，却会遇到白屏等问题。那么，苏南大叔在本篇文章中，将要讲述如何处理解决这个问题。

本文测试环境：electron@1.7.9，mac。

问题描述

本篇文章的主角代码可以从这里下载到：

• https://github.com/electron/electron-api-demos

下面的命令是调试启动命令：

npm start

然后，苏南大叔通过package.json里面定义好的打包命令，进行打包。您可以根据您的实际情况，选择打包win还是mac。

npm run package:mac
npm run package:win

然后，执行得到的可执行文件的时候，你就可能会看到这样的错误提示，提示缺少glob模块。

解决了这个问题后，我们还可能碰到下面的错误提示。

解决方案

解决方案是这样的：

npm install glob electron-settings --save
npm run package:mac

同时，考虑到electron的版本问题（参见 https://newsn.net/say/electron-packager-control-version.html )，我们还可以直接修改package.json文件，然后再执行yarn和packager。修改的地方，如下图所示。

这样处理过的packager的安装包，就可以顺利使用了。而不会白屏，或者提示缺少模块了。

重点是下面这句话，--save是重点中的重点，--save-dev/-D在默认情况下，打包之后是会丢失的。

npm install glob electron-settings --save

经过实践，用yarn安装glob和electron-settings的话，可能是不能解决问题的。还是换成最正统的npm吧。

总结

白屏问题，在electron开发的过程中，比较常见。如果排除掉写的代码错误后，一般可以定位为node_modules文件内的问题。可以删除掉这个文件夹内的内容，然后重新yarn。看看是否正常。或者利用devtools，来查找缺失的模块，再利用npm安装对应模块到项目根目录，然后再重新打包。

更多苏南大叔带来的electron的精彩文章，请点击这里查看:

• https://newsn.net/tag/electron/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。