在React中使用Electron

本文用于记录在react-create-app生成的react项目中配置electron的步骤。
完整项目见github
效果：

1. 使用react-create-app生成react项目。
2. 安装electron：
   npm install electron
   如果安装过程中在install.js出错，可参考：解决安装electron卡在node install.js 不动问题。

3. 在package.json中的最外层加入:

   "homepage": "./",
   "main": "main.js",

   如图：
   

4. 在package.json中的scripts内加入：
   "electron": "electron ."
   如图：
   
5. 使用npm run build命令打包，在根目录的build文件夹下生成react项目的index.js文件，用于electron的渲染进程访问。
6. 在项目的根目录下（即与src同级处）新建一个文件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({
      //使用npm run build生成的index.html的路径名
      pathname: path.join(__dirname, './build/index.html'),
      protocol: 'file:',
      slashes: true
    }))
  
  // 打开开发者工具，默认不打开
  // 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()
   }
 })