1.创建 React 项目
# 确保已安装 Node
# 安装 create-react-app 命令,如果已将安装请忽略
npm install -g create-react-app
# 创建 knownsec-fed 项目
create-react-app knownsec-fed
# 启动项目( create-react-app 真的超级方便啊)
cd knownsec-fed && npm start
# 代码执行完毕后,浏览器 http://localhost:3000/ 会出现界面,React 项目即创建成功
2.添加 Electron 包
# 在knownsec-fed 目录下安装 Electron 包
npm install -save electron
3.相关配置
配置 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": "knownsec-fed",
"version": "0.1.0",
"private": true,
"main": "main.js", // 配置启动文件
"homepage":".", //
"dependencies": {
"electron": "^1.7.10",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-scripts": "1.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"electron-start": "electron ." // 配置electron的start,区别于web端的start
}
}
启动 Electron
# 这里要打开两个窗口
# 启动react项目
npm start
# 启动electron
npm run electron-start
3.打包 React 项目
首先修改 main.js
, 因为现在你要将 react 项目打包在 build 文件夹下面,所以加载应用处改成如下。
// 加载应用----react 打包
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, './build/index.html'), // 注意这里修改
protocol: 'file:',
slashes: true
}))
// 加载应用----适用于 react 开发时项目
// mainWindow.loadURL('http://localhost:3000/');
默认情况下,homepage 是 http://localhost:3000,build 后,所有资源文件路径都是 /static,而 Electron 调用的入口是 file :协议,/static 就会定位到根目录去,所以找不到静态文件。在 package.json
文件中添加 homepage 字段并设置为"."后,静态文件的路径就变成了相对路径,就能正确地找到了添加如下配置:
"homepage":"."
# 打包 react 代码 根目录下面将多出一个 build 文件夹
npm run-script build
# 若报错,则将 package.json 中的注释删除
4. 打包 Electron
# 安装 electron-packager
# knownsec-fed 目录下安装 electron-packager包
npm install electron-packager --save-dev
# 安装 electron-packager 命令
npm install electron-packager -g
electron-packager 命令介绍:
electron-packager <location of project> <name of project> <platform> <architecture> <electron version> <optional options>
- location of project: 项目的本地地址,此处是相对路径 ./build,当然也可以写绝对路径
- location of project: 项目名称,此处是 knownsec-fed
- platform: 打包成的平台
- architecture: 使用 x86 还是 x64 还是两个架构都用
- electron version: electron 的版本
在 package.json
文件的在 scripts 中加上如下代码:
"package": "electron-packager ./build knownsec-fed --platform=win32 --arch=x64 --win --out ./out --electron-version 6.0.10"
重要!!!在打包前将 main.js 和 package.json 两个文件复制到 build 文件夹下,同时修改 build 文件夹下的 main.js
// 加载应用----- electron-quick-start中默认的加载入口
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, './index.html'), // 修改
protocol: 'file:',
slashes: true
}))
# 开始打包
npm run-script package