Electron+React 搭建项目

Electron+React 搭建项目

之前一直想找方法使electron编写代码时热更新修改结果，网上方法使用gulp去监听改变去restart主进程或reload渲染器进程，最后实现的效果实际上是热加载，并没有达到预期的效果。
刚接触感觉理解有误，electron可以看做另一个沙盒，代替浏览器来存放页面，那么使用react或者vue自带的热更新就是一样的使用效果了！！！！！！！！

Electron+React结合使用参考各位大佬

项目目录

第一步 创建react项目+安装electron依赖

npx create-react-app ele-react-app
npm install electron --save

第二步 修改 package.json文件

package.json中加入以下配置
记录
.dev是为了方便在主进程中获取来判断开发环境和生产环境，因为开发环境和build生产环境下，electron加载到窗口的路径不同，要在主进程中区分两种方式。
homepage配置成’.'的作用，将静态文件的路径就变成了相对路径

"main":"main.js",
"homepage": ".",
"scripts": {
   "electron":"electron . dev",
},

第三步 在项目根目录下创建main.js （electron的主进程~~）

main.js

const {app, BrowserWindow} = require('electron')
// 引入node的 path 和url模块
const path = require('path')
const url = require('url');
// 获取在 package.json 中的命令脚本传入的参数，来判断是开发还是生产环境
const mode = process.argv[2];
console.log(process.argv)
function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
  mainWindow.setMenu(null)
  //判断是否是开发模式 
  if(mode === 'dev') { 
    mainWindow.loadURL("http://192.168.0.87:3000/")//根据自己的端口和ip修改
  } else { 
    mainWindow.loadURL(url.format({
      pathname:path.join(__dirname, './build/index.html'), 
      protocol:'file:', 
      slashes:true 
    }))
  }
}
app.whenReady().then(() => {
  createWindow()
  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

第四步 在项目根目录下创建preload.js

preload.js

window.addEventListener('DOMContentLoaded', () => {
    const replaceText = (selector, text) => {
      const element = document.getElementById(selector)
      if (element) element.innerText = text
    }
    for (const type of ['chrome', 'node', 'electron']) {
      replaceText(`${type}-version`, process.versions[type])
    }
  })

实现热更新完成 最后运行方式

需要打开两个终端
一、npm run start 正常的启动react
二、npm run electron 启动electron应用，electron窗口加载我的"http://192.168.0.87:3000/" ，react打包之后，运行 npm run electron 后 ，electron 加载的就是 build/index.html文件

在网上看到另一种package.json中scripts简介的写法，同时执行两个命令，使用 | 将两个命令分开，但是start时有问题，不汁是不是被骗了

"scripts": {
    "start": "electron . dev | react-scripts start",
 },

other ------------------------同时执行多条命令可以使用concurrently

npm install -g concurrently

//修改package.json中scripts：

"scripts": {
    "serve": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "electron":"electron . dev",
    "start":"concurrently \"npm run serve\" \"npm run electron\" "
 },

本文地址：https://blog.csdn.net/weixin_42508580/article/details/110186006