electron+react

yarn create react-app electron-react
cd electron-react
yarn run eject  // 修改react-app打包的路径 / -> ./
vi main.js

main.js

const {
  app,
  BrowserWindow,
  ipcMain
} = require('electron')

const path = require('path')
const url = require('url')

//保留窗口对象的全局引用，如果不这样做，窗口将会
//当JavaScript对象被垃圾收集时自动关闭。
let mainWindow = null;

function createWindow() {
  //创建浏览器窗口。f12 查看所有的参数
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    // backgroundColor: '#f48', // 优雅地显示窗口
    // frame: false
  });

  /**
   * ! 优雅地显示窗口
   */
  mainWindow.once('ready-to-show', () => {
    win.show()
  })

  /**
   * * 加载本地HTML文件
   */
   mainWindow.loadURL('http://localhost:3000')
  // mainWindow.loadURL(url.format({
  //  pathname: path.join(__dirname, 'build', 'index.html'),
  //  protocol: 'file:',
  //  autoHideMenuBar: true,
  //  slashes: true
  // }))

  /**
   * * 打开DevTools
   */
  mainWindow.webContents.openDevTools()

  /**
   * * 关闭窗口时发出。
   */
  mainWindow.on('closed', function () {
    //解引用窗口对象，通常你会存储窗口
    //如果您的应用程序支持多窗口，则在数组中，现在是时候了
    //当你应该删除相应的元素。
    mainWindow = null
  });

  // menu
  // require('./menu.js');
}

// Electron完成后将调用此方法
// 初始化并准备创建浏览器窗口。
// 一些API只能在发生此事件后才能使用。
app.on('ready', createWindow)

//关闭所有窗口时退出。
app.on('window-all-closed', function () {
  //在OS X上，应用程序及其菜单栏很常见
  //保持活动状态，直到用户使用Cmd + Q显式退出
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  //在OS X上，通常会在应用程序中重新创建一个窗口
  //点击了dock图标，并且没有其他窗口打开。
  if (mainWindow === null) {
    createWindow()
  }
})

package.json

{
  "main": "main.js",

  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js --env=jsdom",

    "e-start": "electron .",
    "e-build": "npm run build && electron-builder --win --x64",
  }

执行 npm run dev