當一個react-electron項目做好之后就可以開始進行打包,首先就是打包react,這個自然不用多說,不過事先要記住一點,項目目錄主進程文件main.js最好放在根目錄,再執行打包命令
npm run build
這個時候目錄結構應該是這樣
這個時候需要強調的是,react項目已經打包完成,這個時候完全可以只靠main.js主進程文件和build文件夾就可以運行起來我們的項目,換句話說,剩下的文件與打包electron沒有任何關系,甚至可以直接刪除,但是畢竟是項目源代碼,肯定是不建議刪的,此時可以隨便新建一個文件夾,將main.js文件和build文件夾拷貝過去,package.json最好也復制過去
然后此時的package.json文件里面的dependencies肯定留有大量在開發過程中保留的依賴,這就是打包之后體積巨大的一個主要原因。解決方法很粗暴,直接刪除這一項里面的數據,變成這樣
"devDependencies”里面也刪掉
這個時候在新文件夾一次在安裝一次和electron有關,你在main.js主進程里才用得到的依賴(這步很重要,其實說白了就像是在一個新文件夾初始化一個electron項目一樣)
npm install electron -dev-save npm install electron-store -dev-save ....
然后安裝打包工具
npm install electron-packager -dev-save-g
然后開始打包,注意:打包時候控制台一定要以管理員身份運行,不然會報錯
electron-packager ./ HHH--win32 --out --electron-version 5.0.4"
解釋一下這條命令:
./ 你的項目所在目錄(注意是這個新文件夾,而不是你的那個react-electron完整項目文件夾,弄錯前功盡棄)
HHH 生成的程序包名稱
--win32 打包的平台
其余的都是些可選配置,詳細的可以去看electron-packager官方
然后就打包完成,此時打包出來的文件夾只有150M左右,再使用相關打包軟件制作成exe安裝包,體積有望壓縮到100M以內