使用create-react-app 快速建立一個 Electron 桌面應用

使用create-react-app 快速建立一個 Electron 桌面應用

Electron簡介

React + Electron 搭建一個桌面應用

在 Electron 中, 把 package.json 中設定的 main 腳本的所在進程稱爲 主進程。

快速體驗

# github上有一個 electron-quick-start 倉庫克隆下來
git clone https://github.com/electron/electron-quick-start
# 進入文件夾
cd electron-quick-start
# 安裝依賴包並運行
npm install && npm start

main.js 是你的啓動文件，index.html 是你的入口文件

Electron 結合 React

建立一個React項目

使用create-react-app

# 安裝 create-react-app 命令
npm install -g create-react-app
# 建立 react-electron1 項目
create-react-app react-electron1
# 啓動項目
cd react-electron1 && yarn start

Electron 添加及配置

在react-electron1項目添加electron包

yarn add electron

配置 main.js

根目錄react-electron1下新建main.js文件，參考electron-quick-start項目中的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": "react-electron1",
  "version": "0.1.0",
  "private": true,
  "main": "main.js",//配置啓動文件
  "homepage": ".",
  "dependencies": {
    "electron": "^2.0.7",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "startapp": "electron ."//配置electron的start，區別於web端的start
  }
}

注意

• 添加main.js，主進程文件
• "startapp": "electron ."運行electron app的腳本
• "homepage": "."打包的時候，資源相對路徑問題

運行項目

# 啓動react項目，默認地址：http://localhost:3000/
yarn start

# 啓動electron
yarn run startapp

遇到的問題

1.經過electron-quick-start項目拷過來的main.js中，加載入口文件時，代碼以下：

mainWindow.loadFile('index.html')

修改成：
mainWindow.loadURL('http://localhost:3000')

運行不起來，最後發現，是加載方法的問題，若是加載的是url，須要loadURL；
electron-quick-start項目的main.js中加載的是本地的資源，因此使用的是loadFile

打包 electron

打包工具electron-builder

安裝 electron-builder

yarn add electron-builder --dev

配置

修改 main.js 代碼

+ const IS_DEV = process.env.NODE_ENV === 'development'

-  mainWindow.loadURL('http://localhost:3000')
+  // 加載應用
+  const staticIndexPath = path.join(__dirname, './index.html');
+  const main = IS_DEV ? `http://localhost:3000` : url.format({
+    pathname: staticIndexPath,
+    protocol: 'file:',
+    slashes: true
+  });
+  mainWindow.loadURL(main)

-  mainWindow.webContents.openDevTools()
+  IS_DEV && mainWindow.webContents.openDevTools()

修改package.json中的 script， 添加NODE_ENV 環境變量用於區分環境

- "startapp": "electron .",
+ "startapp": "NODE_ENV=development electron .",

修改package.json

因爲 create-react-app 默認打包的路徑爲 / 根目錄，而在 electron 中，須要使用相對路徑因此須要再次次改package.json

• 修改 name，verison，description，author字段
• 在 ./public文件夾中放入 icon.png 文件
• 將 main.js 重命名爲 electron.js，讓如根目錄./public 目錄下。同時修改 package.json
• 因爲electron-builder中不能使用dependencies，因此務必將全部的dependencies加入devDependencies。
• 最終的 package.json文件：

{
  "name": "react-electron1",
  "version": "0.1.0",
  "description": "A Electron app with react.",
  "author": "dragonishare<dragonishare@gmail.com>",
- "main": "main.js",
+ "main": "./public/electron.js",
  "private": true,
  "homepage": "./",
-  "dependencies": {
-    "react": "^16.4.2",
-    "react-dom": "^16.4.2",
-    "react-scripts": "1.1.4"
-  },
+  "build": {
+    "mac": {
+      "category": "demo"
+    },
+    "files": [
+      {
+        "from": "./",
+        "to": "./",
+        "filter": [
+          "**/*",
+          "!node_modules"
+        ]
+      }
+    ],
+    "directories": {
+      "buildResources": "public"
+    }
+  },
  "scripts": {
    "startapp": "NODE_ENV=development electron .",
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
+   "packager": "npm run build && rm -rf dist && electron-builder"
  },
  "devDependencies": {
    "electron": "^2.0.7",
    "electron-builder": "^20.27.1"
+   "react": "^16.4.2",
+   "react-dom": "^16.4.2",
+   "react-scripts": "1.1.4"
  }
}

以後運行npm run packager 便可獲得 dmg 安裝文件

項目地址：github

參考地址

• How to build an Electron app using create-react-app. No webpack configuration or 「ejecting」 necessary.
• 如何使用 Electron 和 React 構建一個 APP
• React + Electron 搭建一個桌面應用