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

vite-react-electron

English | 简体中文

概述

• 主进程(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

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

运行

# 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 里面保持相同的目录结构能避开好多问题

├
├── 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

推荐所有的 NodeJs、Electron API 通过 Preload-script 注入到 渲染进程中，例如：

• src/preload/index.ts

  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

  // Defined on the window
  interface Window {
    fs: typeof import('fs')
    ipcRenderer: import('electron').IpcRenderer
  }
  

• src/renderer/main.ts

  // 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 删掉，已经没有用了

- contextBridge.exposeInMainWorld('fs', fs)
- contextBridge.exposeInMainWorld('ipcRenderer', ipcRenderer)

2. configs/vite-renderer.config 中有个 resolveElectron 最好了解下
   👉 这里有个 issues 请教一下vite-renderer.config中的resolveElectron函数

效果

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