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