使用create-react-app 快速创建一个 Electron 桌面应用
Electron简介
React + Electron 搭建一个桌面应用
在 Electron 中, 把 package.json 中设定的 main 脚本的所在进程称为 主进程。
快速体验
# github上有一个 electron-quick-start 仓库克隆下来
git clone https://github.com/electron/electron-quick-start
# 进入文件夹
cd electron-quick-start
# 安装依赖包并运行
npm install && npm start
main.js 是你的启动文件，index.html 是你的入口文件
Electron 结合 React
创建一个React项目
使用create-react-app
# 安装 create-react-app 命令
npm install -g create-react-app
# 创建 react-electron1 项目
create-react-app react-electron1
# 启动项目
cd react-electron1 && yarn start
Electron 添加及配置
在react-electron1项目添加electron包
yarn add electron配置 main.js
根目录react-electron1下新建main.js文件，参考electron-quick-start项目中的main.js文件
// 引入electron并创建一个Browserwindow
const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')
// 保持window对象的全局引用,避免JavaScript对象被垃圾回收时,窗口被自动关闭.
let mainWindow
function createWindow () {
//创建浏览器窗口,宽高自定义
mainWindow = new BrowserWindow({width: 800, height: 600})
/*
* 加载应用----- electron-quick-start中默认的加载入口
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
*/
// 加载应用----适用于 react 项目
mainWindow.loadURL('http://localhost:3000/');
// 打开开发者工具，默认不打开
// mainWindow.webContents.openDevTools()
// 关闭window时触发下列事件.
mainWindow.on('closed', function () {
mainWindow = null
})
}
// 当 Electron 完成初始化并准备创建浏览器窗口时调用此方法
app.on('ready', createWindow)
// 所有窗口关闭时退出应用.
app.on('window-all-closed', function () {
// macOS中除非用户按下 `Cmd + Q` 显式退出,否则应用与菜单栏始终处于活动状态.
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', function () {
// macOS中点击Dock图标时没有已打开的其余应用窗口时,则通常在应用中重建一个窗口
if (mainWindow === null) {
createWindow()
}
})
// 你可以在这个脚本中续写或者使用require引入独立的js文件.
配置package.json文件
{
"name": "react-electron1",
"version": "0.1.0",
"private": true,
"main": "main.js",//配置启动文件
"homepage": ".",
"dependencies": {
"electron": "^2.0.7",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-scripts": "1.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"startapp": "electron ."//配置electron的start，区别于web端的start
}
}注意
- 添加main.js，主进程文件
-
"startapp": "electron ."运行electron app的脚本 -
"homepage": "."打包的时候，资源相对路径问题
运行项目
# 启动react项目，默认地址：http://localhost:3000/
yarn start
# 启动electron
yarn run startapp遇到的问题
1.通过electron-quick-start项目拷过来的main.js中，加载入口文件时，代码如下：
mainWindow.loadFile('index.html')
修改为：mainWindow.loadURL('http://localhost:3000')
运行不起来，最后发现，是加载方法的问题，如果加载的是url，需要loadURL；electron-quick-start项目的main.js中加载的是本地的资源，所以使用的是loadFile
打包 electron
打包工具electron-builder
安装 electron-builder
yarn add electron-builder --dev
配置
修改 main.js 代码
+ const IS_DEV = process.env.NODE_ENV === 'development'
- mainWindow.loadURL('http://localhost:3000')
+ // 加载应用
+ const staticIndexPath = path.join(__dirname, './index.html');
+ const main = IS_DEV ? `http://localhost:3000` : url.format({
+ pathname: staticIndexPath,
+ protocol: 'file:',
+ slashes: true
+ });
+ mainWindow.loadURL(main)
- mainWindow.webContents.openDevTools()
+ IS_DEV && mainWindow.webContents.openDevTools()修改package.json中的 script， 添加NODE_ENV 环境变量用于区分环境
- "startapp": "electron .",
+ "startapp": "NODE_ENV=development electron .",修改package.json
由于 create-react-app 默认打包的路径为 / 根目录，而在 electron 中，需要使用相对路径所以需要再次次改package.json
- 修改 name，verison，description，author字段
- 在 ./public文件夹中放入 icon.png 文件
- 将 main.js 重命名为 electron.js，让如根目录./public 目录下。同时修改 package.json
- 由于electron-builder中不能使用dependencies，所以务必将所有的dependencies加入devDependencies。
- 最终的 package.json文件：
{
"name": "react-electron1",
"version": "0.1.0",
"description": "A Electron app with react.",
"author": "dragonishare",
- "main": "main.js",
+ "main": "./public/electron.js",
"private": true,
"homepage": "./",
- "dependencies": {
- "react": "^16.4.2",
- "react-dom": "^16.4.2",
- "react-scripts": "1.1.4"
- },
+ "build": {
+ "mac": {
+ "category": "demo"
+ },
+ "files": [
+ {
+ "from": "./",
+ "to": "./",
+ "filter": [
+ "**/*",
+ "!node_modules"
+ ]
+ }
+ ],
+ "directories": {
+ "buildResources": "public"
+ }
+ },
"scripts": {
"startapp": "NODE_ENV=development electron .",
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
+ "packager": "npm run build && rm -rf dist && electron-builder"
},
"devDependencies": {
"electron": "^2.0.7",
"electron-builder": "^20.27.1"
+ "react": "^16.4.2",
+ "react-dom": "^16.4.2",
+ "react-scripts": "1.1.4"
}
}
之后运行npm run packager 即可得到 dmg 安装文件
项目地址：github
参考地址
- How to build an Electron app using create-react-app. No webpack configuration or “ejecting” necessary.
- 如何使用 Electron 和 React 构建一个 APP
- React + Electron 搭建一个桌面应用