React+Electron快速创建并打包成桌面应用

一、创建react项目

首先使用creat-react-app脚手架来创建一个react项目

# 安装 create-react-app 命令,如果已将安装请忽略
npm install -g create-react-app
# 创建 react项目
create-react-app react-electron
# 启动项目( create-react-app 真的超级方便啊)
cd react-electron && npm start
1
2
3
4
5
6

npm start之后浏览器会自动打开网址 http://localhost:3000/ ，出现react项目的页面了

二、安装Electron

#在react-electron项目目录下
npm install -save electron
1
2

三、配置文件

1.在项目根目录新建main.js

const { app, BrowserWindow } = require("electron")
const path = require('path')
const url = require('url')

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 800,
    minWidth: 800,
    minHeight: 800
  })
  win.loadURL("http://localhost:3000/")
}

app.whenReady().then(() => {
  createWindow()
  app.on("active", () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit()
  }
})
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

2.配置package.json

添加如下两项配置：
{
	"main": "main.js", // 配置electron的启动文件
	"scripts": {
	    "electron-start": "electron ."
	  },
  }

1
2
3
4
5
6
7
8

3.启动electron

# 这里要打开两个窗口

# 启动react项目
npm start
# 启动electron
npm run electron-start

1
2
3
4
5
6
7

npm run electron-start之后会自动出现桌面应用

四、打包Electron桌面应用

1. 安装 electron-packager

npm install electron-packager -D
1

2. ** 配置homePage字段**
   在package.json文件中添加如下配置

{
	"homepage": "."
}
1
2
3

{
	"script": {
		"package": "electron-packager ./build react-electron --platform=darwin --arch=x64 --electron-version 17.1.0 --overwrite"
	}
}
//mac系统 --platform=darwin
//Windows系统 --platform=win32
1
2
3
4
5
6
7

然后打包react代码，根目录会多出一个build文件夹

 npm run build
1

3. 将main.js和package.json两个文件复制到build文件夹下，同时修改build文件夹下的main.js

// 加载应用----electron默认的打包入口
win.loadURL(url.format({
  pathname: path.join(__dirname, './index.html'), // 修改这里
  protocol: 'file:',
  slashes: true
}))
1
2
3
4
5
6

4. 在根目录运行打包命令

npm run package
1