electronは更にmac環境の下でreactを包装してデスクトップのプログラムになります.
2109 ワード
electron公式サイトの文書を押して、reactプロジェクトsrcと同じレベルのディレクトリの下でmain.jsを新規作成します.
1.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を実行する