React+Electron 從搭建到發佈

準備工做

安裝node環境 nodejs.org/zh-cn/ 安裝過程不作贅述。

安裝react腳手架create-react-app和yarn

npm install -g create-react-app yarn
複製代碼

建立React項目 腳手架安裝完成後，執行如下命令，建立一個名爲react-electron-demo的應用

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

引入Electron

安裝 electron

cd react-electron-demo
yarn add electron --dev
yarn add electron-is-dev
複製代碼

根目錄新建入口文件main.js

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

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

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({width: 900, height: 680});
  mainWindow.loadURL(isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, './build/index.html')}`);
  mainWindow.on('closed', () => mainWindow = null);
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

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

將入口文件加入到package.json中

"main": "main.js",
"homepage": ".",
複製代碼

添加 npm scripts

"electron": "electron .",
複製代碼

啓動

yarn start
// 新建一個終端
yarn electron
複製代碼

啓動後效果如圖：

優化

使用concurrently並行運行

同時開兩個終端有點繁瑣，因此能夠藉助工具concurrently。 安裝concurrently

yarn add concurrently --dev
複製代碼

添加 npm scripts

"dev": "concurrently \"yarn start\" \"electron .\""
複製代碼

禁止啓動時在瀏覽器中打開

根目錄新建文件.env，輸入：

BROWSER=none
複製代碼

保存後從新啓動便可

優化啓動順序

因爲electron啓動須要先等react啓動完畢，因此能夠使用工具wait-on。 安裝wait-on

yarn add wait-on --dev
複製代碼

修改npm scripts

"dev": "concurrently \"yarn start\" \"wait-on http://localhost:3000 && electron .\""
複製代碼

打包發佈

安裝electron-builder

yarn add electron-builder --dev
複製代碼

在package.json中添加build字段

"build": {
  "appId": "com.example.electron-cra",
  "files": [
    "build/**/*",
    "node_modules/**/*",
    "public/**/*",
    "main.js"
  ],
  "directories":{
    "buildResources": "assets"
  }
}
複製代碼

添加 npm scripts 以windows平臺爲例，其餘平臺請參考electron-builder文檔

"package": "yarn build && electron-builder -c.extraMetadata.main=main.js --win --x64"
複製代碼

打包

yarn package
複製代碼

打包後的文件會在dist目錄中

此教程的源碼已託管在github： github.com/AlanLang/re…

謝謝您的閱讀，如發現本文有任何不妥，歡迎指正，不勝感激。