React + Electron 搭建桌面應用 解決 打包後.exe空白 問題

1.創建 React 項目

# 確保已安裝 Node
# 安裝 create-react-app 命令,如果已將安裝請忽略
npm install -g create-react-app
# 創建 knownsec-fed 項目
create-react-app knownsec-fed
# 啓動項目( create-react-app 真的超級方便啊)
cd knownsec-fed && npm start
# 代碼執行完畢後,瀏覽器 http://localhost:3000/ 會出現界面,React 項目即創建成功

2.添加 Electron 包

# 在knownsec-fed 目錄下安裝 Electron 包
npm install -save electron

3.相關配置

配置 main.js

// 引入electron並創建一個Browserwindow
const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')

// 保持window對象的全局引用,避免JavaScript對象被垃圾回收時,窗口被自動關閉.
let mainWindow

function createWindow () {
//創建瀏覽器窗口,寬高自定義具體大小你開心就好
mainWindow = new BrowserWindow({width: 800, height: 600})

  /* 
   * 加載應用-----  electron-quick-start中默認的加載入口
    mainWindow.loadURL(url.format({
      pathname: path.join(__dirname, 'index.html'),
      protocol: 'file:',
      slashes: true
    }))
  */
  // 加載應用----適用於 react 項目
  mainWindow.loadURL('http://localhost:3000/');
  
  // 打開開發者工具，默認不打開
  // mainWindow.webContents.openDevTools()

  // 關閉window時觸發下列事件.
  mainWindow.on('closed', function () {
    mainWindow = null
  })
}

// 當 Electron 完成初始化並準備創建瀏覽器窗口時調用此方法
app.on('ready', createWindow)

// 所有窗口關閉時退出應用.
app.on('window-all-closed', function () {
  // macOS中除非用戶按下 `Cmd + Q` 顯式退出,否則應用與菜單欄始終處於活動狀態.
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
   // macOS中點擊Dock圖標時沒有已打開的其餘應用窗口時,則通常在應用中重建一個窗口
  if (mainWindow === null) {
    createWindow()
  }
})

// 你可以在這個腳本中續寫或者使用require引入獨立的js文件.   

配置 package.json

{
  "name": "knownsec-fed",
  "version": "0.1.0",
  "private": true,
  "main": "main.js", // 配置啓動文件
  "homepage":".", // 
  "dependencies": {
    "electron": "^1.7.10",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-scripts": "1.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "electron-start": "electron ." // 配置electron的start，區別於web端的start
  }
}   

啓動 Electron

# 這裏要打開兩個窗口

# 啓動react項目
npm start
# 啓動electron
npm run electron-start

3.打包 React 項目

首先修改 main.js, 因爲現在你要將 react 項目打包在 build 文件夾下面，所以加載應用處改成如下。

// 加載應用----react 打包
mainWindow.loadURL(url.format({
  pathname: path.join(__dirname, './build/index.html'), // 注意這裏修改
  protocol: 'file:',
  slashes: true
}))
// 加載應用----適用於 react 開發時項目
// mainWindow.loadURL('http://localhost:3000/');

默認情況下，homepage 是 http://localhost:3000，build 後，所有資源文件路徑都是 /static，而 Electron 調用的入口是 file :協議，/static 就會定位到根目錄去，所以找不到靜態文件。在 package.json 文件中添加 homepage 字段並設置爲"."後，靜態文件的路徑就變成了相對路徑，就能正確地找到了添加如下配置：

"homepage":"."

# 打包 react 代碼  根目錄下面將多出一個 build 文件夾
npm run-script build


# 若報錯,則將 package.json 中的註釋刪除

4. 打包 Electron

# 安裝 electron-packager

# knownsec-fed 目錄下安裝 electron-packager包
npm install electron-packager --save-dev
# 安裝 electron-packager 命令
npm install electron-packager -g

electron-packager 命令介紹：

electron-packager <location of project> <name of project> <platform> <architecture> <electron version> <optional options>

• location of project: 項目的本地地址，此處是相對路徑 ./build，當然也可以寫絕對路徑
• location of project: 項目名稱，此處是 knownsec-fed
• platform: 打包成的平臺
• architecture: 使用 x86 還是 x64 還是兩個架構都用
• electron version: electron 的版本 

在 package.json 文件的在 scripts 中加上如下代碼：

"package": "electron-packager ./build knownsec-fed --platform=win32 --arch=x64 --win --out ./out --electron-version 6.0.10" 

 重要！！！在打包前將 main.js 和 package.json 兩個文件複製到 build 文件夾下，同時修改 build 文件夾下的 main.js

// 加載應用-----  electron-quick-start中默認的加載入口
  mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, './index.html'), // 修改
    protocol: 'file:',
    slashes: true
  }))

# 開始打包 
npm run-script package