electron-vite-react/README.zh-CN.md

vite-electron-boilerplate

English | 简体中文

运行

# clone the project
git clone git@github.com:caoxiemeihao/vite-electron-boilerplate.git

# enter the project directory
cd vite-electron-boilerplate

# install dependency(Recommend use yarn)
yarn

# develop
yarn dev

分支

• main - Electron + Vite + React

• vue-ts - Electron + Vite + Vue3

目录

├
├── configs
├   ├── vite.main.ts                 主进程配置文件，编译 src/main
├   ├── vite.preload.ts              预加载脚本配置文件，编译 src/preload
├   ├── vite.react-ts.ts             渲染进程配置文件，编译 src/react-ts
├
├── scripts
├   ├── build.mjs                    项目构建脚本，对应 npm run build
├   ├── electron-builder.config.mjs
├   ├── watch.mjs                    项目开发脚本，对应 npm run dev
├
├── src
├   ├── main                         主进程源码
├   ├── preload                      预加载脚本源码
├   ├── react-ts                     渲染进程源码
├

原理

• 主进程(main-process)、渲染进程(renderer-process)、预加载脚本(preload-script) 全部在 configs/xxx.ts 中配置 -- 全量级的 Vite 编译还是相当快的

• scripts/build.mjs 只是调用了 Vite 的 API 并使用 configs/xxx.ts 配置文件进行构建

• scripts/watch.mjs 与 build.mjs 区别是 主进程(main-process)、预加载脚本(preload-script) 配置了 watch 选项；渲染进程则是使用了 require('vite').createServer

• 项目整体趋于 配置化 而不是大量的脚本让人眼花缭乱 -- 上手简单

效果

微信讨论群 | | 请我喝杯下午茶 🥳