huanghs/electron-vite-vue
1
0
Fork 0
mirror of https://github.com/electron-vite/electron-vite-vue synced 2024-10-12 23:46:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: Electron, NodeJs API 双明

Browse Source
This commit is contained in:
草鞋没号 2022-01-21 17:00:42 +08:00
parent 8f73119ebb
commit 3961c59686
1 changed files with 23 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
README.zh-CN.md
View File

@ -63,12 +63,23 @@
├
```
## 依赖放到 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` 注入到 渲染进程中，例如：
**推荐所有的 NodeJs、Electron API 通过 `Preload-script` 注入到 渲染进程中，例如：**
* **src/preload/index.ts**
@ -99,34 +110,18 @@
console.log('ipcRenderer', window.ipcRenderer)
```
## 小白问题
**如果你真的在这个模板中开启了 `nodeIntegration: true` `contextIsolation: false` 我不拦着
🚧 但是要提醒你做两件事儿**
```
小白直接使用(别墨迹): https://github.com/caoxiemeihao/electron-vite-boilerplate
1. `preload/index.ts` 中的 `exposeInMainWorld` 删掉，已经没有用了
一、经典报错: __dirname is not defined
众所周知 - electron 共有三种环境/三种状态即: NodeJs、Electron-Main、Electron-Renderer。
```diff
- contextBridge.exposeInMainWorld('fs', fs)
- contextBridge.exposeInMainWorld('ipcRenderer', ipcRenderer)
```
1. 使用 vite 启动 electron 时候，为 NodeJs 运行环境，node_modules/electron 包导出的只是一个 electron.exe 的文件路径。
当使用 vite 且在 Electron-Renderer 中使用且 Electron-Renderer 中未开启 node.js 集成；
那么此时 import/require(‘electron’) 会使用 NodeJs 环境下的 electron —— 遂报错
2. 所以 Electron-Main、Electron-Renderer 中要使用 electron 必须保障能正确加载到对应的 electron-main、electron-renderer 版本。
vite build 与 build.lib 模式下只需要 build.rollupOptions.external 配置中加入 electron 即可
vite serve 下比较麻烦，需要对 import(‘electron’) 进行拦截，可以使用 vitejs-plugin-electron 处理
二、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 体积，一举两得
```
这里有个值得看的 issues [请教一下vite-renderer.config中的resolveElectron函数](https://github.com/caoxiemeihao/electron-vue-vite/issues/52)
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/electron-vue-vite/screenshot/electron-15.png" />