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.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")

运行打包命令即可