[TOC] # 開發環境配置（React + Electron） ## React + Electron 環境搭建 ① 安裝 React：`npx create-react-app projName` ② 安裝 electron：`cnpm install electron --save-dev`（用 npm 可能會卡住） ③ 運行：首先`npm start`運行 React，然后`npm run dev`使用 Electron 加載 localhost3000，需要配置一下 package.json（不使用其他工具的話需要開兩個命令行窗口） ## 其他插件： 1）**Devtron**：便于調試 electron 項目 ``` # Install Devtron $ npm instsall --save-dev devtron // Run the following from the Console tab of your app's Devtools(main.js e.g) require('devtron').install() // You should now see a Devtron added to the DevTools ``` 2）**Concurrently**：跨平臺同時運行多個命令。 [https://www.npmjs.com/package/concurrently](https://www.npmjs.com/package/concurrently) `npm install concurrently --save-dev`  3）**wait-on**：用于使 Electron 在 React 加載完成后再啟動。 [https://www.npmjs.com/package/wait-on](https://www.npmjs.com/package/wait-on) `npm install wait-on --save-dev` 例如： ``` wait-on http://localhost:3000 && electron . ``` 表示等待 localhost:3000 端口啟動后（available）再啟動 electron 4）**cross-env**：用于解決不同操作系統環境變量名稱不同的問題 ``` "dev": "concurrently \"wait-on http://localhost:3000 && electron . \" \"corss-env BROWSER=none npm start\"" ``` 表示運行 npm start 時使用 BROWSER 這個環境變量，值為 none（React 提供，表示啟動時不打開瀏覽器 tab），如果不這么做每次啟動 electron 會在瀏覽器打開一個 tab。 5）**electron-is-dev**：判斷 electron 開發環境的插件： `npm install electron-is-dev --save-dev` 使用： ``` const isDev = require('electron-is-dev') app.on('ready', () => { mainWindow = new BrowserWindow({ ... }) const urlLocation = isDev ? 'http://localhost:3000' : 'productURL' mainWindow.loadURL(urlLocation) }) ``` 目前為止 packjage.json 如下： ``` { "name": "cloud-doc", "version": "0.1.0", "main": "main.js", "private": true, "dependencies": { "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", "react": "^16.13.1", "react-dom": "^16.13.1", "react-scripts": "3.4.1" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "dev": "concurrently \"wait-on http://localhost:3000 && electron .\" \"cross-env BROWSER=none npm start\"" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "concurrently": "^5.2.0", "cross-env": "^7.0.2", "devtron": "^1.4.0", "electron": "^9.0.0", "electron-is-dev": "^1.2.0", "wait-on": "^5.0.0" } } ``` # 基礎概念 ## Electron 應用架構 ### 主進程與渲染進程 Electron 運行`package.json`的`main`腳本的進程被稱為**主進程**。 在主進程中運行的腳本通過創建 web 頁面來展示用戶界面。 一個 Electron 應用總是有且只有一個主進程。 <br/> 由于 Electron 使用了 Chromium 來展示 web 頁面，所以 Chromium 的多進程架構也被使用到。 每個 Electron 中的 web 頁面運行在它的叫**渲染進程**的進程中。  上圖是 Chrome 多進程架構的簡圖，簡單來說，Main Process 負責 Renderer Process 的創建與管理，瀏覽器中的每個 tab 就對應于一個 Renderer Process。這樣設計有很多好處，例如即使單個 tab 崩潰了也不會導致整個 Chrome 崩潰。 > 關于 Chrome 為何使用多進程而不是多線程，可以參考 [知乎——Chrome 為何使用多進程而不是多線程？](https://www.zhihu.com/question/368712837?utm_source=wechat_timeline) <br/> 在普通的瀏覽器中，web 頁面通常在沙盒環境中運行，并且無法訪問操作系統的原生資源。 然而 Electron 的用戶在 Node.js 的 API 支持下可以在頁面中和操作系統進行一些底層交互。 ### 主進程與渲染進程的區別 主進程使用`BrowserWindow`實例創建頁面。 每個`BrowserWindow`實例都在自己的渲染進程里運行頁面。 當一個`BrowserWindow`實例被銷毀后，相應的渲染進程也會被終止。 <br/> 主進程管理所有的 web 頁面和它們對應的渲染進程。 每個渲染進程都是獨立的，它只關心它所運行的 web 頁面。 <br/> 在頁面中調用與 GUI 相關的原生 API 是不被允許的，因為在 web 頁面里操作原生的 GUI 資源是非常危險的，而且容易造成資源泄露。 <span style="color: red;">如果你想在 web 頁面里使用 GUI 操作，其對應的渲染進程必須與主進程進行通訊，請求主進程進行相關的 GUI 操作。</span> 概括來說，主進程有如下特點： - 可以使用和系統對接的 Electron API，如創建菜單，上傳文件等 - 可以創建渲染進程 - 全面支持 Node.js - 有且只有一個，作為整個程序的入口點 渲染進程有如下特點： - 可以有多個，每個對應一個獨立的窗口 - 每一個都是一個單獨的進程 - 全面支持 Node.js 和 DOM API - 可以使用一部分 Electron 提供的 API  ### 主進程與渲染進程間通訊 1）使用 IPC 模塊進行通訊 ``` // 在主進程中. const { ipcMain } = require('electron') ipcMain.on('asynchronous-message', (event, arg) => { console.log(arg) // prints "ping" event.reply('asynchronous-reply', 'pong') // send message back }) ipcMain.on('synchronous-message', (event, arg) => { console.log(arg) // prints "ping" event.returnValue = 'pong' }) ``` ``` //在渲染器進程 (網頁) 中。 const { ipcRenderer } = require('electron') console.log(ipcRenderer.sendSync('synchronous-message', 'ping')) // prints "pong" ipcRenderer.on('asynchronous-reply', (event, arg) => { console.log(arg) // prints "pong" }) ipcRenderer.send('asynchronous-message', 'ping') ``` 2）使用 remote 模塊進行通訊 使用`remote`模塊, 可以調用 main 進程對象的方法, 而不必顯式發送進程間消息。 例如：從渲染進程創建瀏覽器窗口 ``` const { BrowserWindow } = require('electron').remote let win = new BrowserWindow({ width: 800, height: 600 }) win.loadURL('https://github.com') ``` 因為安全原因，remote 模塊能在以下幾種情況下被禁用： * [`BrowserWindow`](https://www.electronjs.org/docs/api/browser-window)\- 通過設置`enableRemoteModule`選項為`false`。 * [`<webview>`](https://www.electronjs.org/docs/api/webview-tag)\- 通過把`enableremotemodule`屬性設置成`false`。