创建electron-react项目

介绍

首先，我们需要知道什么是Electron。
Electron是一个能让你使用传统前端技术（Nodejs，JavaScript，HTML，CSS）开发一个跨平台（Windows，OSX及Linux系统）桌面应用的框架。

基于Electron实现的软件

Electron现已被多个开源应用软件所使用，其中我们熟知和使用的VSCode编辑器就是基于Electron实现的，尝试打开VSCode的帮助菜单中的切换开发人员工具可以在界面上看到我们熟悉的chrome devtool，如下图

底层实现

为了能让前端语言能跟底层可以交互，Electron集成了Nodejs+Chromium，其中，Nodejs主要负责应用程序主线逻辑控制、底层交互等功能，Chromium主要负责渲染线程窗口的业务逻辑。

背景

针对已有的在线web应用，现在我们想用桌面应用方式打开，那我们其实只需要给这个应用换个壳就行了，换成Electron上运行，就是个桌面应用了。

Electron+React

react项目

目前我们已有一个通过create-react-app建立的React项目，并已经完善了项目的路由，菜单，以及功能页面，整体的项目目录如下

配置Electron

现在需要将以上完整的一个React的项目跑在Electron下，而不再是浏览器中

1. 在package.json中添加程序运行入口

// package.json
{
  "name": "xxx",
  "version": "0.1.0",
  "private": true,
  "main": "main.js", // 指定入口文件
  "dependencies": {
    "@antv/g2plot": "^1.0.2",
    "@babel/core": "7.8.4",
    "@svgr/webpack": "4.3.3",
    ...
  },
  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js",
    "electron-start": "electron ." // 运行electron
  },
  ...
}

2. 安装Electron

npm install -save electron@8.2.5

3. 添加入口文件main.js（注意：和src文件夹平级）

// main.js
const { app, BrowserWindow } = require('electron')

let mainWindow
function createWindow () {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600
  })
  mainWindow.loadURL('http://localhost:3000')
  mainWindow.on('closed', function () {
    mainWindow = null
  })
}
app.on('ready', createWindow)
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    // macOS中除非用户按下 `Cmd + Q` 显式退出,否则应用与菜单栏始终处于活动状态.
    app.quit()
  }
})
app.on('activate', function () {
  // macOS中点击Dock图标时没有已打开的其余应用窗口时,则通常在应用中重建一个窗口
  if (mainWindow === null) {
    createWindow()
  }
})

4. 运行

npm run electron-start

5. 成功啦