129 lines
4.8 KiB
Markdown
129 lines
4.8 KiB
Markdown
# vite-react-electron
|
||
|
||
|
||
|
||
|
||
[](https://nodejs.org/about/releases)
|
||
|
||
**[English](README.md) | 简体中文**
|
||
|
||
## 概述
|
||
|
||
- 十分简单的 Vite, React, Electron 整合模板
|
||
|
||
- 只包含最基本的依赖
|
||
|
||
- 扩展十分灵活
|
||
|
||
## 运行
|
||
|
||
```bash
|
||
# clone the project
|
||
git clone git@github.com:caoxiemeihao/vite-react-electron.git
|
||
|
||
# enter the project directory
|
||
cd vite-react-electron
|
||
|
||
# install dependency
|
||
npm install
|
||
|
||
# develop
|
||
npm run dev
|
||
```
|
||
|
||
## 目录
|
||
|
||
一旦启动或打包脚本执行过，会在根目录产生 **`dist` 文件夹，里面的文件夹同 `src` 一模一样**；在使用一些路径计算时，尤其是相对路径计算；`dist` 与 `src` 里面保持相同的目录结构能避开好多问题
|
||
|
||
```tree
|
||
├
|
||
├── dist 构建后，根据 src 目录生成
|
||
├ ├── main
|
||
├ ├── preload
|
||
├ ├── renderer
|
||
├
|
||
├── scripts
|
||
├ ├── build.mjs 项目构建脚本，对应 npm run build
|
||
├ ├── vite.config.mjs 主进程, 预加载脚本源码 vite 配置
|
||
├ ├── watch.mjs 项目开发脚本，对应 npm run dev
|
||
├
|
||
├── src
|
||
├ ├── main 主进程源码
|
||
├ ├── preload 预加载脚本源码
|
||
├ ├── renderer 渲染进程源码
|
||
├ ├── vite.config.ts 渲染进程 vite 配置
|
||
├
|
||
```
|
||
|
||
## 依赖放到 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 体积，一举两得
|
||
|
||
## 渲染进程使用 NodeJs API
|
||
|
||
> 🚧 因为安全的原因 Electron 默认不支持在 渲染进程 中使用 NodeJs API，但是有些小沙雕就是想这么干，拦都拦不住；实在想那么干的话，用另一个模板更方便 👉 **[electron-vite-boilerplate](https://github.com/caoxiemeihao/electron-vite-boilerplate)**
|
||
|
||
**推荐所有的 NodeJs、Electron API 通过 `Preload-script` 注入到 渲染进程中，例如：**
|
||
|
||
* **src/preload/index.ts**
|
||
|
||
```typescript
|
||
import fs from 'fs'
|
||
import { contextBridge, ipcRenderer } from 'electron'
|
||
|
||
// --------- Expose some API to Renderer-process. ---------
|
||
contextBridge.exposeInMainWorld('fs', fs)
|
||
contextBridge.exposeInMainWorld('ipcRenderer', ipcRenderer)
|
||
```
|
||
|
||
* **src/renderer/src/global.d.ts**
|
||
|
||
```typescript
|
||
// Defined on the window
|
||
interface Window {
|
||
fs: typeof import('fs')
|
||
ipcRenderer: import('electron').IpcRenderer
|
||
}
|
||
```
|
||
|
||
* **src/renderer/main.ts**
|
||
|
||
```typescript
|
||
// Use Electron, NodeJs API in Renderer-process
|
||
console.log('fs', window.fs)
|
||
console.log('ipcRenderer', window.ipcRenderer)
|
||
```
|
||
|
||
**如果你真的在这个模板中开启了 `nodeIntegration: true` `contextIsolation: false` 我不拦着
|
||
🚧 但是要提醒你做两件事儿**
|
||
|
||
1. `preload/index.ts` 中的 `exposeInMainWorld` 删掉，已经没有用了
|
||
|
||
```diff
|
||
- contextBridge.exposeInMainWorld('fs', fs)
|
||
- contextBridge.exposeInMainWorld('ipcRenderer', ipcRenderer)
|
||
```
|
||
|
||
2. `configs/vite-renderer.config` 中有个 `resolveElectron` **最好了解下**
|
||
👉 这里有个 `issues` [请教一下vite-renderer.config中的resolveElectron函数](https://github.com/caoxiemeihao/electron-vue-vite/issues/52)
|
||
|
||
## 效果
|
||
|
||
<img width="400px" src="https://raw.githubusercontent.com/caoxiemeihao/blog/main/vite-react-electron/react-win.png" />
|
||
|
||
## 微信讨论群 | | 请我喝杯下午茶 🥳
|
||
|
||
<div style="display:flex;">
|
||
<img width="244px" src="https://raw.githubusercontent.com/caoxiemeihao/blog/main/assets/wechat/group/qrcode.jpg" />
|
||
|
||
<img width="244px" src="https://raw.githubusercontent.com/caoxiemeihao/blog/main/assets/wechat/%24qrcode/%24.png" />
|
||
</div>
|