现成的react项目直接转electron（1）能本地运行

需求：将现成的react项目转为electron项目，本地能运行起来

难点：完全不懂electron

知识点：electron相关

更新一把：这个可以不用看了，可以看下重构的文章

现成的react项目直接转electron（2）能本地运行，打包，【web层，渲染层，主进程】之间的互相通信交互

1. 先安装electron

npm install electron cross-env electron-is-dev --save-dev

 2.根目录下创建electron文件夹，里面创建main.js，用于写electron的相关配置

// main.js
const { app, BrowserWindow } = require('electron');
const path = require('path');
const isDev = require('electron-is-dev'); // 是否为开发环境
function createAppWindow(config, urlLocation) {
  // 相关配置 后续出一个详细的列表
  const basicConfig = {
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true,
      nodeIntegrationInWorker: true,
      contextIsolation: false,
      webSecurity: false,
      webviewTag: true,
      allowRunningInsecureContent: true,
      sandbox: false,
      additionalArguments: [
        '--disable-features=OutOfBlinkCors'
      ]
    },
    show: false,
    backgroundColor: '#efefef',
  };
  const finalConfig = { ...basicConfig, ...config };
  const mainWindow = new BrowserWindow(finalConfig);
  mainWindow.loadURL(urlLocation);
  mainWindow.once('ready-to-show', () => {
    mainWindow.show();
  });
  return mainWindow;
}

app.on('ready', () => {
  const mainWindowConfig = {
    width: 1440,
    height: 768,
  };
  console.log(isDev);
  const urlLocation = isDev
    ? 'http://192.168.x.xxx:8080/' // 本地react起来的地址
    : `file://${path.join(__dirname, './index.html')}`;
  let mainWindow = createAppWindow(mainWindowConfig, urlLocation);
  mainWindow.on('closed', () => {
    mainWindow = null;
    app.quit();
  });
});

3.react使用了vite构建，启动的时候，electron和react要一起启动

// pageage.json
"electron:start": "concurrently \"electron ./electron/main.js\" \"cross-env BROWSER=none vite\"", // 启动electron
"start": "vite --host 0.0.0.0 --mode dev" // 启动react

 4.启动成功后发现了一个bug，比较意外，react中没问题，electron中会失效

// 原react环境代码片段
val.path = val.webkitRelativePath ? val.webkitRelativePath : val.name;
// path 为上传图片选中的单张图片信息中本地的图片名字，修改时发现三元运算符没效果，以为不兼容，没想到时单张图片的信息的原字段path无法更改（暂未深究是属于对象的问题还是本地图片权限的问题），这个时候需要新建一个字段去更新这个新的path
// electron环境下更改后的代码片段
val.newPath = val.webkitRelativePath ? val.webkitRelativePath : val.name;

参考资料链接 

vite+react-ts+electron 开发桌面端

electron业务需求和electron打包

后续持续更新中....