【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