如何快速搭建一个vite+react+electron开发环境

如何快速搭建一个vite+react+electron开发环境

一、创建项目

先用vite创建一个项目，然后在选择react模版

# npm
npm create vite@latest electron-demo

# yarn
yarn create vite@latest electron-demo

二、添加electron与环境依赖

如果安装electron过程遇到错误，可以查看官网的安装指引，大部分问题都能覆盖到。

# npm
npm install --save electron

# yarn
yarn add -D electron

安装concurently、cross-env、wait-on与electron-builder，concurrently用于在一条指令中，执行多条命令。cross-env用于区分不同的环境。wait-on用于在react应用启动后再启动electron窗口。electron-builder则是打包工具，

# npm
npm install --save concurrently cross-env wait-on

# yarn
yarn add -D concurrently cross-env wait-on

依赖安装完毕后，配置下package.json，添加main入口文件，以及在script中添加相关命令。

{
  "main": "./electron/main.js",
  "scripts": {
    "start": "vite",
    "dev": "concurrently -k \"BROWSER=none npm start\" \"npm:electron:dev\"",
    "electron:dev": "wait-on tcp:3000 && cross-env NODE_ENV=development electron ."
  },
}

三、配置electron

根据package.json中的配置，我们在根目录新建./electron/main.js文件

// electorn/main.js

const { app, BrowserWindow } = require('electron')
const path = require('path')
const NODE_ENV = process.env.NODE_ENV

const createWindow = () => {
  // 创建浏览窗口
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  })

  if (NODE_ENV === 'development') {
    mainWindow.loadURL('http://localhost:3000')
    mainWindow.webContents.openDevTools()
  } else if (NODE_ENV === 'production') {
    mainWindow.loadFile(path.join(__dirname, 'build', 'index.html'))
  }
}
app.whenReady().then(() => {
  createWindow()
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

四、大功告成

此时运行命令即可在看到熟悉的react页面运行在electron窗口中，并且完美支持热更新！

# npm
npm run dev

# yarn
yarn run dev