[Electron] 打包成執行檔

來源

要怎麼把 Electron 專案打包成 exe 或是安裝檔呢? 相信不少人也跟我一樣，在打包時碰到許多問題，這邊介紹的打包工具是 electron-builder，應該是我目前用過最簡單的打包工具了。

安裝

npm install electron-builder --dev

設定 package.json

這邊有兩個地方需要修改，一個是增加新的 script，一個是增加 build (設定打包參數)

執行打包

npm run pack      // 打包
npm run pack-dist // 打包成安裝檔

執行完之後會在根目錄底下增加一個 pack 資料夾，用來放打包後的檔案

[雷] 路徑不同步的問題

在程式碼內用的相對路徑，在開發以及打包後指到的路徑都會不一樣，像是

path.resolve( './test.txt' );
// 打包之前
D:/project/test.txt
// 打包之後
D:test.txt

目前這邊的解法是在 webpack plugins 內加入 Webpack.DefinePlugin 讓打包前跟打包後的 __dirname 路徑一致，這邊要注意是要放在 webpack 內後端plugins 的部分。

這時候我們再打包一次(打包前要記得還是要 webpack)

path.resolve( __dirname );
// 打包之前
D:/project/
// 打包之後
D:/project/

[雷] Native modules

如果打包後的程式，在執行上有問題且該出問題模組是 Native modules 的話，可以把本來開發資料夾 node_module 內的該模組整個資料夾蓋掉 pack 後的同目錄資料夾。

// 開發出問題的 abc module 路徑
/project/node_modules/abc
// 蓋掉 pack 後的 abc module 路徑
/project/pack/win-ia32-unpacked/resources/app/node_modules/abc

另外如果針對 webpack 不熟悉的朋友可以參考這一篇

[Node.js] 模組整合工具 Webpack

如果對於編譯原生模組不熟悉的朋友可以參考這一篇

[Electron] 安裝原生模組(Native Module)