Electron 應用如何利用 create-react-app 從 0 到 1

Electron 的官方文檔給我一種錯綜複雜的感受，而官方給的 starter 又過於簡單，因此如何引入 React 並實現完善的打包機制對於萌新來講也是很是困難的 😭，因此本人根據本身踩過的坑，綜合下來，寫了本教程，但願看事後你們都能有所收穫。

適用人羣

此教程適用於瞭解 React，想要學習 Electron，可是不知如何將 React 添加至 Electron 中的同窗。

文章結構

• 1、基於 React 初始化項目
  • 1.初始化
  • 2.刪除 ServiceWorker 和 manifest.json
  • 3.使用 react-app-rewired
• 2、添加 Electron
  • 1.添加 Electron 入口文件
  • 2.優化 Electron 啓動
  • 3.添加調試工具
• 3、打包
  • 1.安裝依賴
  • 2.打包流程及配置
  • 3.修改 Electron 入口文件
  • 4.添加 Windows 系統打包配置
• 結語

1、基於 React 初始化項目

1. 初始化

首先利用 facebook 官方的create-react-app建立一個基礎項目。你能夠根據你平時喜歡的包管理工具安裝：

# npx
npx create-react-app react-electron-demo

# npm
npm init react-app react-electron-demo

# yarn
yarn create react-app react-electron-demo
複製代碼

安裝完成後，項目的目錄以下：

react-electron-demo
├── README.md
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── registerServiceWorker.js
└── yarn.lock
複製代碼

2. 刪除 ServiceWorker 和 manifest.json

由於Electron打包後讀取的頁面爲本地靜態資源，因此不須要ServiceWorker和manifest.json，這兩個東西的做用能夠自行 google。具體操做以下：

• 刪除public/manifest.json文件。

• 刪除public/index.html文件的如下代碼：

/* public/index.html:11行 */
- <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
複製代碼

• 刪除src/registerServiceWorker.js。
• 刪除src/index.js的如下內容：

/* src/index.js:5行和7行 */
- import registerServiceWorker from './registerServiceWorker';

- registerServiceWorker();
複製代碼

3.使用react-app-rewired

經過使用react-app-rewired，咱們能夠在不eject項目的狀況下，自定義 webpack 配置等。

• (1) 安裝

# npm
npm install react-app-rewired --save-dev
# yarn
yarn add -D react-app-rewired
複製代碼

• (2) 根目錄下建立config-overrides.js文件，文件內容以下：

module.exports = function override(config, env) {
  //do stuff with the webpack config...
  return config;
};
複製代碼

• (3) 更改package.json配置，變化以下：

/* package.json */

  "scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test --env=jsdom",
+ "test": "react-app-rewired test --env=jsdom"
}
複製代碼

• (4) 啓動項目、打包

# 運行dev
npm run start
# 打包
npm run build
複製代碼

2、添加Electron

1.添加Electron入口文件

• (1) 新建app/index.js，文件內容以下：

const { app, BrowserWindow } = require('electron');

let win;

function createWindow() {
  // 建立瀏覽器窗口。
  win = new BrowserWindow({ width: 800, height: 600 });

  // 而後加載應用的 index.html。
  win.loadURL('http://localhost:3000');

  // 當 window 被關閉，這個事件會被觸發。
  win.on('closed', () => {
    win = null;
  });
}

app.on('ready', createWindow);

// 當所有窗口關閉時退出。
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (win === null) {
    createWindow();
  }
});
複製代碼

• (2) 在package.json中添加"main": "app/index.js"，表示Electron應用的入口路徑。

• (3) 添加Electron啓動命令，並安裝Electron依賴。

npm install --save-dev electron
複製代碼

/* package.json */
"scripts": {
+ "start:electron": "electron app"
}
複製代碼

• (4) 輸入npm run start:electron，一個開發環境下的Electron應用就啓動了。

2.優化 Electron 啓動

如今若是要啓動開發模式，須要啓動兩個命令，即npm run start和npm run start:electron，那如何才能一個命令就啓動呢？

• 咱們須要使用到concurrently來同時運行兩個命令
• 若是要讓react-app-rewired start運行時，不打開瀏覽器，須要傳入BROWSER=none，因此也須要安裝cross-env作傳值兼容。
• 由於同時運行時，Electron打開時，服務器還沒運行好，因此須要使用wait-on

npm install --save-dev concurrently cross-env wait-on
複製代碼

添加package.json中的啓動命令。

/* package.json */

"script": {
- "start": "react-app-rewired start",
+ "start": "concurrently \"npm run start:react\" \"npm run start:electron\"",
+ "start:react": "cross-env BROWSER=none react-app-rewired start",
- "start:electron": "electron app",
+ "start:electron": "wait-on http://localhost:3000 && electron app",
}
複製代碼

經過npm run start

3.添加調試工具

調試工具大體須要 Electron 和 React 調試兩種。

添加以下代碼，添加 React 相關的Chrome插件，並安裝Devtron，用於調試 Electron 進程通訊等；添加electron-is-dev，用於識別當前 Electron 是開發環境仍是打包環境。

• 安裝須要使用的依賴。

npm install --save-dev electron-devtools-installer \
electron-debug \
devtron \

npm install --save electron-is-dev
複製代碼

• 在代碼中添加開發工具。

/* app/index.js */
const isDev = require('electron-is-dev');

// 利用electron-debug，添加和Chrome相似的快捷鍵
isDev && require('electron-debug')({ enabled: true, showDevTools: false });
// 用於添加Chromium插件
function createDevTools() {
  const {
    default: installExtension,
    REACT_DEVELOPER_TOOLS,
    REDUX_DEVTOOLS,
  } = require('electron-devtools-installer');
  // 安裝devtron
  const devtronExtension = require('devtron');
  devtronExtension.install();
  // 安裝React開發者工具
  installExtension(REACT_DEVELOPER_TOOLS);
  installExtension(REDUX_DEVTOOLS);
}

// 修改應用啓動事件
app.on('ready', () => {
  createWindow();
  // 只在開發環境加載開發者工具
  isDev && createDevTools();
});
複製代碼

安裝完畢後，運行npm run start，經過Command + Option + I(Windows爲F12)就能夠啓動開發者工具，而後在擴展中就能夠查看到React和Redux的開發者工具了。

如今基本的開發配置已經搭好，接下來讓咱們看一下如何配置打包功能。

3、打包

1.安裝依賴

•  打包時，咱們須要先安裝依賴，咱們使用的是electron-builder進行打包，執行如下命令進行安裝。

npm install --save-dev electron-builder
複製代碼

2.打包流程及配置

• 打包的基本流程爲：
  • 打包 React 至 build 目錄下
  • 拷貝 Electron 代碼至 build 目錄下
  • 使用 electron-builder 進行打包

根據以上流程，添加對應的打包命令。

/* package.json */
{
  "scripts": {
- "build": "react-app-rewired build",
+ "build": "npm run build:copy && npm run pack",
+ "build:react": "react-app-rewired build",
+ "build:copy": "npm run build:react && npm run copy:electron",
+ "pack": "electron-builder",
+ "copy:electron": "cp -r ./app/. ./build"
  }
}
複製代碼

由於 Electron 是訪問本地的文件，因此須要將 Webpack 的 output.publicPath 設置爲 ./。須要作如下修改：

/* config-overrides.js */
module.exports = function override(config, env) {
  //do stuff with the webpack config...
+ if (env === "production") {
+ config.output.publicPath = './';
+ }
  return config;
};
複製代碼

 在根目錄下建立icons文件夾，用於存放應用logo，我在網上找了一個，也就是文件夾內的icon.png和icon.icns。而後在package.json中添加一些配置信息。

{
  "build": {
    "productName": "Electron-React-Test",
    "extends": null,
    "files": ["build/**/*"],
    "mac": {
      "icon": "icons/icon.icns"
    },
    "win": {
      "target": "nsis",
      "icon": "icons/icon.png"
    },
    "linux": {
      "target": ["AppImage", "deb"],
      "icon": "icons/icon.png"
    },
    "extraMetadata": {
      "main": "build/index.js"
    },
    "directories": {
      "buildResources": "assets"
    }
  }
}
複製代碼

3.修改 Electron 入口文件

• 添加打包環境下，訪問的URL地址。

const isDev = require('electron-is-dev');
const path = require('path');

const devUrl = 'http://localhost:3000';
// 本地文件路徑定位到打包的react文件
const localUrl = `file://${path.resolve( __dirname, '../../app.asar/build' )}/index.html`;
const appUrl = isDev ? devUrl : localUrl;

function createWindow() {
  win = new BrowserWindow({ width: 800, height: 600 });

  // 而後加載應用的地址
  win.loadURL(appUrl);

  win.on('closed', () => {
    win = null;
  });
}
複製代碼

4.添加 Windows 系統打包配置

若是須要增長Windows系統的打包文件，須要在package.json中加入如下代碼：

/* package.json */
{
  "scripts": {
+ "build:win": "npm run build:react-copy && npm run pack:win",
+ "pack:win": "electron-builder --win",
  }
}
複製代碼

而後運行npm run build:win便可。

結語

通過以上步驟，咱們已經獲得了一個能夠打包的基礎項目。源碼詳見react-electron-demo項目。