85 lines
3.6 KiB
Markdown
85 lines
3.6 KiB
Markdown
# vite-react-electron
|
||
|
||
[](https://github.com/vitejs/awesome-vite)
|
||
|
||
|
||
|
||
[](https://nodejs.org/about/releases)
|
||
|
||
[English](README.md) | 简体中文
|
||
|
||
## 概述
|
||
|
||
📦 开箱即用
|
||
🎯 基于 [react-ts](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) 模板, 低侵入性
|
||
🌱 结构清晰，可塑性强
|
||
💪 支持在渲染进程中使用 Electron、Node.js API
|
||
🔩 支持 C/C++ 模块
|
||
🖥 很容易实现多窗口
|
||
|
||
## 快速开始
|
||
|
||
```sh
|
||
npm create electron-vite
|
||
```
|
||
|
||
|
||
|
||
## 调试
|
||
|
||
|
||
|
||
## 目录
|
||
|
||
*🚨 默认情况下, `electron` 文件夹下的文件将会被构建到 `dist/electron`*
|
||
|
||
```tree
|
||
├── 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
|
||
|
||
**Node.js 包放到 `dependencies` 中**
|
||
|
||
**e.g.** `electron-store` `sqlite3` `serilaport` `mongodb` ...others
|
||
|
||
**Web 包放到 in `devDependencies` 中**
|
||
|
||
**e.g.** `react` `react-dom` `react-router` `mobx` `zustand` `antd` `axios` ...others
|
||
|
||
看看这 👉 [dependencies vs devDependencies](https://github.com/electron-vite/vite-plugin-electron-renderer#dependencies-vs-devdependencies)
|
||
|
||
|
||
## 🚨 Node.js ESM packages
|
||
|
||
**e.g.** `node-fetch` `execa` `got` ...
|
||
|
||
[👉 在 Electron-Renderer 中使用 Node.js ESM 包](https://github.com/electron-vite/vite-plugin-electron-renderer#-nodejs-esm-packages)
|
||
|
||
<!--
|
||
  对待 **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 体积，一举两得
|
||
-->
|