electronは更にmac環境の下でreactを包装してデスクトップのプログラムになります.

2109 ワード

electron公式サイトの文書を押して、reactプロジェクトsrcと同じレベルのディレクトリの下でmain.jsを新規作成します.
1.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: 1300, height: 1000})

  /* 
   *     -----  electron-quick-start        
    mainWindow.loadURL(url.format({
      pathname: path.join(__dirname, 'index.html'),
      protocol: 'file:',
      slashes: true
    }))
  */
  //     ----    react   
  // mainWindow.loadURL('http://localhost:3006/');
  // mainWindow.loadFile('public/index.html')
  mainWindow.loadURL(`file://${path.join(__dirname, './build/index.html')}`)
  // main.Window.loadURL(url.format({
  //    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()
  }
})
2.electron-packageをインストールする
npm i -s electron-packager
3.electron-prebuiltを取り付ける
npm i -d electron-prebuilt
4.package.jsonに加入する
"main": "main.js",
"script": {
    //.        
    // part app  part
    //  --platform=darwin       mac
    // -arch=x64    64 
   "electron-packager": "electron-packager . part --platform=darwin --arch=x64 "
}
5.npm run electron-packagerを実行する