docs: 依赖, resolveElectron 说明
This commit is contained in:
parent
8e0d46f23a
commit
8bf6f6378b
|
@ -60,9 +60,21 @@
|
|||
├
|
||||
```
|
||||
|
||||
## 依赖放到 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,但是有些小沙雕就是想这么干,拦都拦不住;实在想那么干的话,这里有个 👉 npm 包 **[vitejs-plugin-electron](https://www.npmjs.com/package/vitejs-plugin-electron)** 或者使用另一个模板 **[electron-vite-boilerplate](https://github.com/caoxiemeihao/electron-vite-boilerplate)**
|
||||
> 🚧 因为安全的原因 Electron 默认不支持在 渲染进程 中使用 NodeJs API,但是有些小沙雕就是想这么干,拦都拦不住;实在想那么干的话,用另一个模板更方便 👉 **[electron-vite-boilerplate](https://github.com/caoxiemeihao/electron-vite-boilerplate)**
|
||||
|
||||
**推荐所有的 NodeJs、Electron API 通过 `Preload-script` 注入到 渲染进程中,例如:**
|
||||
|
||||
|
@ -95,6 +107,19 @@
|
|||
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" />
|
||||
|
|
Loading…
Reference in New Issue