Electron+React應(yīng)用打包全流程
(第一次用 Typora 寫博,希望效果不錯(cuò)~)
這幾天有個(gè)創(chuàng)意編程比賽,要寫一個(gè)電腦端應(yīng)用。我準(zhǔn)備用 React.js + Electron 做(因?yàn)槭煜),編程部分一路風(fēng)雨無阻,到了打包卻出現(xiàn)了問題。Electron 沒打過包不知道,一打包一下兩天兩夜就沒了(T_T)但最后還是打包成功了~ 由于里面坑很多,把我打包的流程淺寫在下面,供需要的人參考。
1. 打包工具的選擇
粽鎖粥汁,Electron 的打包工具有兩個(gè):electron-packager 和 electron-builder。它們都可以把 Electron 應(yīng)用打包成可執(zhí)行文件。這里我果斷選擇了 electron-builder。原因有兩點(diǎn):
1. 打包文件體積小。用 electron-packager 我試著打了下包,打出來一下子兩個(gè) G。要知道我寫的只是一個(gè)小程序,就占用兩個(gè) G…… 而使用 electron-builder 打包出來的文件才 91M 多。裝在電腦上也才 400 多 M。
2. 和普通應(yīng)用幾乎沒有區(qū)別。electron-packager 只能生成“綠色版”,也就是沒有安裝程序,直接運(yùn)行里面的 exe。而 electron-builder 使用 NSIS,可以把安裝包打包出來。運(yùn)行安裝包可以安裝應(yīng)用,電腦設(shè)置也能識(shí)別得到,也很方便卸載。
2. 生成靜態(tài)文件
這一步我們就是要把 React 項(xiàng)目的靜態(tài)文件打包出來。這一步雖然簡(jiǎn)單,但也有幾個(gè)坑需要注意。如果你使用 React Router,那 BrowserRouter 要替換成 HashRouter,因?yàn)?BrowserRouter 打包之后路由使用不了,路由組件本應(yīng)該顯示的部分直接白屏。

然后就可以執(zhí)行打包命令了。這個(gè)應(yīng)該有學(xué)過。對(duì)于 npm,運(yùn)行 npm run build。對(duì)于 yarn,就把前面的 npm 換成 yarn。
打包生成出來的文件也不能直接用。如果直接用的話 index.html 加載不出 js 文件會(huì)導(dǎo)致白屏。打開生成出來的 index.html,把引入 js 的語句加上一個(gè)點(diǎn)。它代表從當(dāng)前目錄下的 static 加載 js。因?yàn)榇虬鰜碇髮蛹?jí)變了,直接使用 / 就變成從根路徑加載 js 了。

最后就是把你應(yīng)用的圖標(biāo) favicon 的大小調(diào)整成 256x256。Electron 的應(yīng)用圖標(biāo)大小必須要大于等于 256x256。別問我為什么,人家 electron-builder 要求的(T_T)

3. Electron 入口文件配置
Electron 入口文件(就是 main.js,Electron 開啟的時(shí)候從這個(gè)文件開始加載)也是一個(gè)大坑。一不小心配置錯(cuò)誤打包出來就又白屏了。Electron 入口文件的坑主要在于加載頁面。
之前開發(fā)的時(shí)候使用的 loadURL(“localhost:3000”) 用不了了,因?yàn)槲覀円虞d的是剛剛生成出來的靜態(tài)頁面。這里需要用到 loadFile 來加載一個(gè) html 文件。毫無疑問肯定是要引入我們剛剛打包出來的 index.html。
首先把入口文件名字改為 main.js 然后移動(dòng)到項(xiàng)目根目錄(與 package.json 同級(jí)),然后把之前的 loadURL 刪了,改成 loadFile(“build/index.html”),代表加載 build 下的 index.html 文件。網(wǎng)上大部分教程都是教的 path.join(__dirname, “xxx”) 這種形式,親測(cè)無效。最簡(jiǎn)單的就是最好的~

4. electron-builder 配置
這是最重要的決定成敗的一步。打開 package.json,首先你需要把 main 屬性的值設(shè)置為 ./main.js,就是剛剛的那個(gè) Electron 入口文件。
然后是 electron-builder 的配置了。這里我們只打包 Windows 的安裝包。往 package.json 里加入如下代碼。粘貼的時(shí)候注釋“閱后即焚”~
"build": {
"appId": "XXX", // 軟件包名,填你軟件的名字
"productName": "XXX", // 產(chǎn)品名稱,也填你軟件的名字
"copyright": "GPL 3.0", // 使用版權(quán)的名稱,可選
"directories": { // 一些用到的文件夾
"buildResources": "build", // 需要打包的靜態(tài)文件目錄
"output": "dist" // 打包文件目錄,默認(rèn)為 dist
},
"nsis": { // 安裝包生成程序 NSIS 的配置
"oneClick": false, // 是否一鍵安裝
"language": "2052", // 語言為中文
"perMachine": true, // 按機(jī)器安裝
"allowToChangeInstallationDirectory": true // 允許用戶自定義安裝路徑
},
"win": { // Windows 下的配置
"icon": "./build/favicon.png", // 圖標(biāo)路徑
"target": "nsis" // 使用 NSIS 生成安裝包
},
"files": [ // 需要打包進(jìn)去的文件
"build/**/*", // build 下所有靜態(tài)文件
"./main.js" // 入口文件 main.js
],
"extends": null // 不使用擴(kuò)展
}
最后在 script 里添加一個(gè)條目 builder,如下:

保存,就配置完成了~
(如果你想要配置其它平臺(tái)或是其它配置,請(qǐng)參考官網(wǎng)配置說明:https://www.electron.build/configuration/configuration)
5. 準(zhǔn)備打包文件
到這一步我們就可以安裝打包工具 electron-builder 了。直接一行代碼:npm i electron-builder --save-dev 或是 yarn add electron-builder -D。
electron-builder 在打包時(shí)需要很多依賴,從官方下載地址下載非常慢,所以我們要配置鏡像。對(duì)于 npm,輸入:
npm config set electron_mirror https://npmmirror.com/mirrors/electron/
對(duì)于 yarn,把上面的 npm 替換成 yarn 即可。
除此之外,electron-builder 還需要一些鏡像站沒有的依賴,要從 GitHub 上下載,我們可以把這些文件分別下載并解壓在如下目錄:
winCodeSign:C:\Users\用戶名\AppData\Local\electron-builder\Cache\winCodeSign\winCodeSign-2.6.0
nsis:C:\Users\用戶名\AppData\Local\electron-builder\Cache\nsis\nsis-3.0.4.1
nsis-resources:C:\Users\用戶名\AppData\Local\electron-builder\Cache\nsis\nsis-resources-3.4.1
它們的下載鏈接:
nsis-resources:https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-resources-3.4.1/nsis-resources-3.4.1.7z
PS. 如果你去 GitHub 上看這些文件,你可能會(huì)看見它們有更新的版本出來。但是人家 electron-builder 只認(rèn)上面的版本,版本不對(duì) electron-builder 還要重新下載。上次我就是下載了 nsis 更新的版本,然后導(dǎo)致了 electron-builder 又下載了一遍 nsis(T_T)
6. 打包過程
接下來就是最后的打包了。如果你的 electron 沒有安裝為 dev 依賴,請(qǐng)卸載之后重新安裝并加上 --save-dev。
然后輸入 npm run builder 開始打包。等待一會(huì)兒即可。它可能會(huì)報(bào)幾個(gè)警告但是沒事~

打包后你會(huì)看見生成了一個(gè) dist 文件夾。dist 下有一個(gè)文件夾是 win-unpacked,里面是綠色版免安裝的打包程序。運(yùn)行里面的 .exe 文件就可以打開你打包后的應(yīng)用了。

如果發(fā)現(xiàn)有白屏(其實(shí)上面所有的排坑都是為了避免白屏),可以在 main.js 里把開發(fā)者工具開起來,然后打包運(yùn)行,根據(jù)它的報(bào)錯(cuò)進(jìn)行相應(yīng)的調(diào)整。不過上面排了那么多坑應(yīng)該不會(huì)白屏了~
dist 下的 .exe 文件就是你應(yīng)用的安裝包,安裝到電腦上就可以跟普通軟件一樣使用了。

如果能成功運(yùn)行,你的 React.js + Electron 應(yīng)用就打包完成了,恭喜~
P.S. Electron 應(yīng)用也是真的大,即使使用 builder 打包也還要 400 多 M,看來前端即使有了 Electron 和原生后端應(yīng)用還是有些差距~
到此這篇關(guān)于Electron+React應(yīng)用打包全流程的文章就介紹到這了,更多相關(guān)Electron React應(yīng)用打包內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
react-router-dom?v6?使用詳細(xì)示例
這篇文章主要介紹了react-router-dom?v6使用詳細(xì)示例,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,感興趣的小伙伴可以參考一下,希望對(duì)你的學(xué)習(xí)有所幫助2022-09-09
react同構(gòu)實(shí)踐之實(shí)現(xiàn)自己的同構(gòu)模板
這篇文章主要介紹了react同構(gòu)實(shí)踐之實(shí)現(xiàn)自己的同構(gòu)模板,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
淺談React-router v6 實(shí)現(xiàn)登錄驗(yàn)證流程
本文主要介紹了React-router v6 實(shí)現(xiàn)登錄驗(yàn)證流程,主要介紹了公共頁面、受保護(hù)頁面和登錄頁面,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
React利用插件和不用插件實(shí)現(xiàn)雙向綁定的方法詳解
我們知道在 angular 中數(shù)據(jù)時(shí)雙向綁定的;而在 react 中,數(shù)據(jù)是向一個(gè)方向傳遞:從擁有者到子節(jié)點(diǎn)。也就是我們說的單向數(shù)據(jù)綁定。那如何實(shí)現(xiàn)雙向綁定呢?下面這篇文章主要給大家介紹了關(guān)于React利用插件和不用插件實(shí)現(xiàn)雙向綁定的方法,需要的朋友可以參考下。2017-07-07
React 數(shù)據(jù)獲取與性能優(yōu)化詳解
這篇文章主要為大家介紹了React 數(shù)據(jù)獲取與性能優(yōu)化方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10
基于React-Dropzone開發(fā)上傳組件功能(實(shí)例演示)
這篇文章主要介紹了基于React-Dropzone開發(fā)上傳組件,主要講述的是在React-Flask框架上開發(fā)上傳組件的技巧,需要的朋友可以參考下2021-08-08

