安装和配置

直接使用create-react-app创建初始的react app, 然后安装electrion相关包

1
2
3
create-react-app app
yarn add electron electron-builder wait-on concurrently --dev
yarn add electron-is-dev

在根目录下创建public文件夹,然后新建electron.js文件到public文件夹,添加下面代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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.webContents.openDevTools();
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();
}
});

上面的代码electron用于创建窗口,mainWindow.webContents.openDevTools();用于打开开发者工具。

之后在package.json中添加"main": "public/electron.js",并在"scripts"下添加新命令:

1
"electron-dev": "concurrently \"BROWSER=none yarn start\" \"wait-on http://localhost:3000 && electron .\""

然后在命令行输入yarn run electrion-dev即可看到create-react-app里一模一样的页面,用浏览器访问http://localhost:3000也能看到这个页面。

打包

这里使用electron-builder来打包发布,更细节配置需要查看它的文档。
首先在package.json中添加新属性:

1
2
3
4
5
6
7
8
9
10
"build": {
"appId": "com.example.electron-cra",
"files": [
"build/**/*",
"node_modules/**/*"
],
"directories":{
"buildResources": "assets"
}
}

然后在"scripts"下添加新命令:

1
"electron-pack": "build -c.extraMetadata.main=build/electron.js"

这里参考里面给出的是老的命令,现在不支持了,应该改为上面这种。

再添加一个新命令:

1
"pre-pack": "yarn build"

这里用于将react app构建到build文件下,为之后electron打包作铺垫。然后在package.json中添加"homepage": "./"

最后,执行:

1
2
yarn run pre-pack
yarn run electron-pack

即可在dist目录下看到安装包、可执行文件等

错误解决

运行yarn run electron-pack会出现下面的错误

1
2
3
4
5
6
7
8
9
Error: Unresolved node modules: typescript
at /Users/shaoshuai/SS/ics-client/node_modules/app-builder-lib/src/util/packageDependencies.ts:112:21
From previous event:
at Collector.resolveUnresolvedHoisted (/Users/shaoshuai/SS/ics-client/node_modules/app-builder-lib/src/util/packageDependencies.ts:88:81)
at /Users/shaoshuai/SS/ics-client/node_modules/app-builder-lib/src/util/packageDependencies.ts:83:18
at Generator.next (<anonymous>)
at runCallback (timers.js:694:18)
at tryOnImmediate (timers.js:665:5)
at processImmediate (timers.js:647:5)

对于electron-builder版本18.7.0以下,需要在package.json中添加"author"

参考

Unknown argument:em
From React to an Electron app ready for production