本文用于记录在react-create-app生成的react我的项目中配置electron的步骤。
残缺我的项目见github
成果：
- 应用react-create-app生成react我的项目。
- 装置electron：
npm install electron
如果装置过程中在install.js出错，可参考：解决装置electron卡在node install.js 不动问题。 在package.json中的最外层退出:
"homepage": "./","main": "main.js",如图：
- 在package.json中的scripts内退出：
"electron": "electron ."
如图： - 应用
npm run build命令打包，在根目录的build文件夹下生成react我的项目的index.js文件，用于electron的渲染过程拜访。 - 在我的项目的根目录下（即与src同级处）新建一个文件main.js。文件的内容如下：
// 引入electron并创立一个Browserwindowconst {app, BrowserWindow} = require('electron');const path = require('path');const url = require('url');// 放弃window对象的全局援用,防止JavaScript对象被垃圾回收时,窗口被主动敞开.let mainWindowfunction createWindow () {//创立浏览器窗口,宽高自定义mainWindow = new BrowserWindow({width: 800, height: 600}) /* * 加载利用----- electron-quick-start中默认的加载入口 */ mainWindow.loadURL(url.format({ //应用npm run build生成的index.html的路径名 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() } })