4.7 KiB
4.7 KiB
vite-plugin-electron-renderer
简而言之，vite-plugin-electron-renderer 职责是填充 Electron, Node.js 内置模块。
English | 简体中文
原理
加载 Electron、Node.js CJS 包/内置模块/electron (示意图)
┏————————————————————————————————————————┓ ┏—————————————————┓
│ import { ipcRenderer } from 'electron' │ │ Vite dev server │
┗————————————————————————————————————————┛ ┗—————————————————┛
│ │
│ 1. Pre-Bundling electron module into │
│ node_modules/.vite-electron-renderer/electron │
│ │
│ 2. HTTP(Request): electron module │
│ ————————————————————————————————————————————————> │
│ │
│ 3. Alias redirects to │
│ node_modules/.vite-electron-renderer/electron │
│ ↓ │
│ const { ipcRenderer } = require('electron') │
│ export { ipcRenderer } │
│ │
│ 4. HTTP(Response): electron module │
│ <———————————————————————————————————————————————— │
│ │
┏————————————————————————————————————————┓ ┏—————————————————┓
│ import { ipcRenderer } from 'electron' │ │ Vite dev server │
┗————————————————————————————————————————┛ ┗—————————————————┛
dependencies 与 devDependencies
| 分类 | 🌰 | dependencies | devDependencies |
|---|---|---|---|
| Node.js C/C++ 原生模块 | serialport, sqlite3 | ✅ | ❌ |
| Node.js CJS 包 | electron-store | ✅ | ✅ |
| Node.js ESM 包 | execa, got, node-fetch | ✅ | ✅ (推荐) |
| Web 包 | Vue, React | ✅ | ✅ (推荐) |
为啥推荐将可以正确构建的包放到 devDependencies 中？
这样做会减小 electron-builder 打包后的应用体积。