README.zh-CN.md

vite-react-electron

English | 简体中文

概述

📦 开箱即用
💪 支持 C/C++ 模块
🔩 支持在渲染进程中使用 Electron、Node.js API
🌱 结构清晰，可塑性强
🖥 很容易实现多窗口

快速开始

npm create electron-vite

调试

目录

🚨 默认情况下, electron 文件夹下的文件将会被构建到 dist/electron

├── electron                  Electron 源码文件夹
|   ├── main                  Main-process 源码
|   ├── preload               Preload-script 源码
|   └── resources             应用打包的资源文件夹
|       ├── icon.icns             应用图标(macOS)
|       ├── icon.ico              应用图标
|       ├── installerIcon.ico     安装图标
|       └── uninstallerIcon.ico   卸载图标
|
├── release                   构建后生成程序目录
|   └──{version}
|       ├── {os}-unpacked     未打包的程序(绿色运行版)
|       └── Setup.{ext}       应用安装文件
|
├── public                    同 Vite 模板的 public
└── src                       渲染进程源码、React代码

依赖放到 dependencies 还是 devDependencies

  对待 Electron-Main、Preload-Script 时 vite 会以 lib 形式打包 commonjs 格式代码； 如果碰 node 环境的包可以直接放到 dependencies 中，vite 会解析为 require('xxxx')； electron-builder 打包时候会将 dependencies 中的包打包到 app.asar 里面

  对待 Electron-Renderer 时 vite 会以 ESM 格式解析代码； 像 vue、react 这种前端用的包可以直接被 vite 构建，所以不需要 vue、react 源码； 现实情况 vue、react 放到 dependencies 或 devDependencies 中都可以被正确构建； 但是放到 dependencies 会被 electron-builder 打包到 app.asar 里面导致包体变大； 所以放到 devDependencies 既能被正确构建还可以减小 app.asar 体积，一举两得