解决 electron-builder 打包依赖问题

大概是三个月前, 写了 使用 Electron 重写 convert2fnt 这篇文章, 文章大概讲了我用 Electron 重写之前的一个 BMFont 字体生成工具的事情.

开发的过程还是比较顺利的, Node.js 的生态非常给力, 加上 Chrome, VSCode 加持, 开发和调试都很爽. 但由于我没有 WEB 开发的基础, 整过过程只能摸索加网上查资料, 中间之曲折, 自不足为外人道也, 但最终磕磕绊绊的也算搞出来了.

呃, 其实也没有那么完美.

Windows 版打包后发现运行不太正常, 但 Win 开发版以及 Mac 开发/发布版都运行正常.

有些诡异, 不过我自己只在 Mac 上使用, 加上工作比较忙, 便搁置了起来. 但谁愿意在自己头上悬在一把利剑呢, 万一哪天着急用 Win 版的怎么办.

趁着国庆放假还没有什么安排的时候, 赶紧搞一下.


首先要搞明白无法正常运行的原因是什么, 打开 Chrom 开发者工具后发现了错误内容. 项目的一个依赖项 jimp 没有加载成功, 在调用这个模块的一个函数后抛出错误:

1
2
3
4
const Jimp = require("jimp");
Jimp.read(imagePath, function (err, lenna) {}
---
Uncaught TypeError: Jimp.read is not a function

试着断点跟踪了下 require("jimp") 的过程, 由于自己对 js 的细节知之甚少, 也没有发现什么异常. 各种关键字组合 Google 也没有结果, 一度陷入了毫无头绪的困境.

在搜索的过程中发现 electronelectron-builder 都有了新的版本, 于是抱着侥幸的心态试着升级了下这两个库.

1
2
3
4
- "electron-builder": "^19.11.1",
- "electron": "^1.6.11"
+ "electron-builder": "^19.33.0",
+ "electron": "^1.7.8",

没想到, 竟然 … … 还是没有解决这个问题. 好吧, 其实也还在预料之中. 但是也有 “好消息”, 出错的地方和之前不一样了.

1
module.js:472 Uncaught Error: Cannot find module 'bmp-js'

又是一番折腾, 尝试各种解决方案, 各种猜想, 各种组合. 这些尝试多没有什么变化, 有的尝试反而将我带到沟里, 离真相越来越远.

最后我坚定了一个想法:

我的代码是没有任何问题的, 一定是打包的配置有问题.

果然, 在仔细阅读官方文档的时候发现了这个 Two package.json Structure , 原来官方已经推荐使用两个配置文件来配置各种参数, 一个配置开发时的参数, 一个配置打包时的参数. 于是便有了这样的目录结构:

1
2
3
4
5
6
├── app
│   ├── index.html
│   ├── index.js
│   ├── package-lock.json
│   └── package.json
└── package.json

同时, 官方还建议在开发的 config.json 中增加一个 "postinstall": "electron-builder install-app-deps" 来自动触发安装 app 目录中的依赖.


哈哈, 问题已经解决, 都是没有仔细看官方文档惹的祸, 但从此 Win 下同学也可以用上新版的工具啦.