【electron】打包bug汇总

electron-builder

Error: Unresolved node modules: bufferutil, utf-8-validate

解决方案

方案一

将electron-builder包升级至最新版22.9.1

npm uninstall electron-builder
// or yarn remove electron-builder
npm i electron-builder -D
// or yarn add electron-builder -D

方案二

下载electron-builder@20.19.2放到node_modules目录下,并手动安装依赖

// node_modules/electron-builder
npm i 
// or yarn

方案三

删除本地的electron-builder 使用全局的electron-builder来进行打包

// project
npm uninstall electron-builder
// or yarn remove electron-builder
npm i -g electron-builder
// or yarn add global http-server

解题思路

授人以鱼不如授人以渔

1. 该bug虽然给的提示是缺少bufferutil, utf-8-validate两个包,但是实际则是app-builder-lib包的问题
2. 当你尝试安装这两个包后还在报该问题,我们就需要去解决提问题的人,毕竟这是最快的方案
3. 当你进入app-builder-lib目录下不难发现,app-builder-lib目录下并没有src这个目录
4. 那么现在该怎么办? 我们应该找别的方式,比如electron-builder是可以使用全局包来打包的,然后我们先下载全局包yarn add global electron-builder, 然后执行electron-builder --dir来测试性的打一个包,发现是可以打包完成的
5. 那么问题基本可以锁定在包的依赖上面,最快的解决方案是,直接使用最新的包,但是有些项目的话,并不能使用最新的包,那么,我们应该做的是
6. 去npmjs找到对应的包,然后

通过Repository进入该包的github主页,

通过tags找到对应版本的包,下载下来并放入到node_modules目录下,手动安装依赖来使用

1. 在这个时候,你就需要注意包下的package.json中对应的版本是否和你安装的版本一致

1. 最后在看看对应文件,找找提出问题的人,然后你基本可以确定问题点出在哪里(目前该问题后续无法复现,解决后我尝试复现该问题,但是发现20.19.2在没有出现该问题,目前仅有一张截图,也是从我的小伙伴那里得到的)目前windows使用electron的体验总体来说不是很好,劝退新人的概率还是很大,大家有什么问题,也欢迎一起讨论

推荐

vue + electron

electron-vue

如果你需要调用dll,或者使用winax一类的需要编译后使用的包,还是比较推荐electron-vue的,至少你遇到的问题相对会少,如果你喜欢挑战的话,推荐vue-cli-plugin-electron-builder

vue-cli-plugin-electron-builder

如果你只是需要一个chrome的壳,那么推荐你使用vue-cli-plugin-electron-builder, 同时搭配上vuetify使用,效果更棒
如我的开源项目: weChatTool

当然我还是比较中意vue-cli-plugin-electron-builder