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…

谢谢您的阅读，如发现本文有任何不妥，欢迎指正，不胜感激。