React + Electron

1.创建一个 react 项目

# 安装 create-react-app 命令,如果已将安装请忽略 npm install -g create-react-app # 创建 electron-react 项目 create-react-app electron-react # 进入项目 cd electron-react # 启动 npm start

浏览器输入 localhost:3000 可以看到如下,一个react项目已经创建好了

2.添加electron包

npm install -save electron

3.electron相关配置

   有疑问可以看下  https://blog.csdn.net/xingxingxingge/article/details/90438507

  3.1 修改package

{ "name": "electron-react", "version": "0.1.0", "private": true, "main": "main.js", //添加electron 主程序入口 "dependencies": { "electron": "^5.0.2", "react": "^16.8.6", "react-dom": "^16.8.6", "react-scripts": "3.0.1" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "electron-start": "electron .", //添加 electron 启动命令 }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }

   3.2 项目根目录下创建main.js

const { app, BrowserWindow } = require('electron') const path = require('path') const url = require('url') // 保持对window对象的全局引用，如果不这么做的话，当JavaScript对象被 // 垃圾回收的时候，window对象将会自动的关闭 let win function createWindow() { // 创建浏览器窗口。 win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) // 加载应用----适用于 react 开发时项目 win.loadURL("http://localhost:3000") // 打开开发者工具 win.webContents.openDevTools() // 当 window 被关闭，这个事件会被触发。 win.on('closed', () => { // 取消引用 window 对象，如果你的应用支持多窗口的话， // 通常会把多个 window 对象存放在一个数组里面， // 与此同时，你应该删除相应的元素。 win = null }) } // Electron 会在初始化后并准备 // 创建浏览器窗口时，调用这个函数。 // 部分 API 在 ready 事件触发后才能使用。 app.on('ready', () => { createWindow() }) // 当全部窗口关闭时退出。 app.on('window-all-closed', () => { // 在 macOS 上，除非用户用 Cmd + Q 确定地退出， // 否则绝大部分应用及其菜单栏会保持激活。 if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', () => { // 在macOS上，当单击dock图标并且没有其他窗口打开时， // 通常在应用程序中重新创建一个窗口。 if (win === null) { createWindow() } }) // 在这个文件中，你可以续写应用剩下主进程代码。 // 也可以拆分成几个文件，然后用 require 导入。

4.启动项目

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

5.打包

  5.1 打包 react 项目 修改package.json 添加配置

"homepage": ".", //添加到main字段后面即可

  然后运行以下命令,完成后根目录会多出一个build文件夹

npm run-script build

  5.2 打包 Electron 修改package.json 添加配置

//这里的打包目录为 ./build 即react打包后的目录 "pack": "electron-packager ./build myClient --win --out ./myClient --arch=x64 --app-version=0.0.1 --electron-version=2.0.0"

然后将 mian.js 和 package.json 复制到 build 文件夹下, mian.js做如下修改

// 加载应用----react 打包 win.loadURL(url.format({ pathname: path.join(__dirname, './index.html'), protocol: 'file:', slashes: true })) // 加载应用----适用于 react 开发时项目 // win.loadURL("http://localhost:3000")

运行打包命令即可

npm run pack