Electron+React應用打包全流程

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

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

這幾天有個創(chuàng)意編程比賽，要寫一個電腦端應用。我準備用 React.js + Electron 做（因為熟悉~），編程部分一路風雨無阻，到了打包卻出現(xiàn)了問題。Electron 沒打過包不知道，一打包一下兩天兩夜就沒了（T_T）但最后還是打包成功了~ 由于里面坑很多，把我打包的流程淺寫在下面，供需要的人參考。

1. 打包工具的選擇

粽鎖粥汁，Electron 的打包工具有兩個：electron-packager 和 electron-builder。它們都可以把 Electron 應用打包成可執(zhí)行文件。這里我果斷選擇了 electron-builder。原因有兩點：

1. 打包文件體積小。用 electron-packager 我試著打了下包，打出來一下子兩個 G。要知道我寫的只是一個小程序，就占用兩個 G…… 而使用 electron-builder 打包出來的文件才 91M 多。裝在電腦上也才 400 多 M。

2. 和普通應用幾乎沒有區(qū)別。electron-packager 只能生成“綠色版”，也就是沒有安裝程序，直接運行里面的 exe。而 electron-builder 使用 NSIS，可以把安裝包打包出來。運行安裝包可以安裝應用，電腦設(shè)置也能識別得到，也很方便卸載。

2. 生成靜態(tài)文件

這一步我們就是要把 React 項目的靜態(tài)文件打包出來。這一步雖然簡單，但也有幾個坑需要注意。如果你使用 React Router，那 BrowserRouter 要替換成 HashRouter，因為 BrowserRouter 打包之后路由使用不了，路由組件本應該顯示的部分直接白屏。

在這里插入圖片描述

然后就可以執(zhí)行打包命令了。這個應該有學過。對于 npm，運行 npm run build。對于 yarn，就把前面的 npm 換成 yarn。

打包生成出來的文件也不能直接用。如果直接用的話 index.html 加載不出 js 文件會導致白屏。打開生成出來的 index.html，把引入 js 的語句加上一個點。它代表從當前目錄下的 static 加載 js。因為打包出來之后層級變了，直接使用 / 就變成從根路徑加載 js 了。

在這里插入圖片描述

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

在這里插入圖片描述

3. Electron 入口文件配置

Electron 入口文件（就是 main.js，Electron 開啟的時候從這個文件開始加載）也是一個大坑。一不小心配置錯誤打包出來就又白屏了。Electron 入口文件的坑主要在于加載頁面。

之前開發(fā)的時候使用的 loadURL(“localhost:3000”) 用不了了，因為我們要加載的是剛剛生成出來的靜態(tài)頁面。這里需要用到 loadFile 來加載一個 html 文件。毫無疑問肯定是要引入我們剛剛打包出來的 index.html。

首先把入口文件名字改為 main.js 然后移動到項目根目錄（與 package.json 同級），然后把之前的 loadURL 刪了，改成 loadFile(“build/index.html”)，代表加載 build 下的 index.html 文件。網(wǎng)上大部分教程都是教的 path.join(__dirname, “xxx”) 這種形式，親測無效。最簡單的就是最好的~

在這里插入圖片描述

4. electron-builder 配置

這是最重要的決定成敗的一步。打開 package.json，首先你需要把 main 屬性的值設(shè)置為 ./main.js，就是剛剛的那個 Electron 入口文件。
在這里插入圖片描述

然后是 electron-builder 的配置了。這里我們只打包 Windows 的安裝包。往 package.json 里加入如下代碼。粘貼的時候注釋“閱后即焚”~

"build": {
    "appId": "XXX", // 軟件包名，填你軟件的名字
    "productName": "XXX", // 產(chǎn)品名稱，也填你軟件的名字
    "copyright": "GPL 3.0", // 使用版權(quán)的名稱，可選
    "directories": { // 一些用到的文件夾
      "buildResources": "build", // 需要打包的靜態(tài)文件目錄
      "output": "dist" // 打包文件目錄，默認為 dist
    },
    "nsis": { // 安裝包生成程序 NSIS 的配置
      "oneClick": false, // 是否一鍵安裝
      "language": "2052", // 語言為中文
      "perMachine": true, // 按機器安裝
      "allowToChangeInstallationDirectory": true // 允許用戶自定義安裝路徑
    },
    "win": { // Windows 下的配置
      "icon": "./build/favicon.png", // 圖標路徑
      "target": "nsis" // 使用 NSIS 生成安裝包
    },
    "files": [ // 需要打包進去的文件
      "build/**/*", // build 下所有靜態(tài)文件
      "./main.js" // 入口文件 main.js
    ],
    "extends": null // 不使用擴展
}

最后在 script 里添加一個條目 builder，如下：

在這里插入圖片描述

保存，就配置完成了~

（如果你想要配置其它平臺或是其它配置，請參考官網(wǎng)配置說明：https://www.electron.build/configuration/configuration）

5. 準備打包文件

到這一步我們就可以安裝打包工具 electron-builder 了。直接一行代碼：npm i electron-builder --save-dev 或是 yarn add electron-builder -D。

electron-builder 在打包時需要很多依賴，從官方下載地址下載非常慢，所以我們要配置鏡像。對于 npm，輸入：

npm config set electron_mirror https://npmmirror.com/mirrors/electron/

對于 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 上看這些文件，你可能會看見它們有更新的版本出來。但是人家 electron-builder 只認上面的版本，版本不對 electron-builder 還要重新下載。上次我就是下載了 nsis 更新的版本，然后導致了 electron-builder 又下載了一遍 nsis（T_T）