快捷導(dǎo)航

Electron+React應(yīng)用打包全流程

更新時(shí)間：2023年01月16日 08:31:24 作者：copcin

本文主要介紹了Electron+React應(yīng)用打包全流程，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

這幾天有個(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)文件打包出來。這一步雖然簡單，但也有幾個(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è)無效。最簡單的就是最好的~

在這里插入圖片描述

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

它們的下載鏈接：

winCodeSign：https://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.6.0/winCodeSign-2.6.0.7z

nsis：https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-3.0.4.1/nsis-3.0.4.1.7z

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)用的安裝包，安裝到電腦上就可以跟普通軟件一樣使用了。

在這里插入圖片描述