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