lixuechuan
/
electron-vite-react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs: update code case

This commit is contained in:
草鞋没号 2022-01-21 17:20:36 +08:00
parent e6b82ec838
commit 8e0d46f23a
2 changed files with 17 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
README.md
View File

@ -74,11 +74,9 @@ Once `dev` or `build` npm-script executed will be generate named `dist` folder.
import fs from 'fs' import fs from 'fs'
import { contextBridge, ipcRenderer } from 'electron' import { contextBridge, ipcRenderer } from 'electron'
// Expose Electron, NodeJs API to Renderer-process // --------- Expose some API to Renderer-process. ---------
contextBridge.exposeInMainWorld('bridge', { contextBridge.exposeInMainWorld('fs', fs)
fs, contextBridge.exposeInMainWorld('ipcRenderer', ipcRenderer)
ipcRenderer: withPrototype(ipcRenderer),
})
``` ```
* **src/renderer/src/global.d.ts** * **src/renderer/src/global.d.ts**
@ -86,19 +84,17 @@ Once `dev` or `build` npm-script executed will be generate named `dist` folder.
```typescript ```typescript
// Defined on the window // Defined on the window
interface Window { interface Window {
bridge: {
fs: typeof import('fs') fs: typeof import('fs')
ipcRenderer: import('electron').IpcRenderer ipcRenderer: import('electron').IpcRenderer
} }
}
``` ```
* **src/renderer/src/main.tsx** * **src/renderer/src/main.ts**
```typescript ```typescript
// Use Electron, NodeJs API in Renderer-process // Use Electron, NodeJs API in Renderer-process
console.log('fs', window.bridge.fs) console.log('fs', window.fs)
console.log('ipcRenderer', window.bridge.ipcRenderer) console.log('ipcRenderer', window.ipcRenderer)
``` ```
## Shown ## Shown

18
README.zh-CN.md
View File

@ -64,7 +64,7 @@
> 🚧 因为安全的原因 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，但是有些小沙雕就是想这么干，拦都拦不住；实在想那么干的话，这里有个 👉 npm 包 **[vitejs-plugin-electron](https://www.npmjs.com/package/vitejs-plugin-electron)** 或者使用另一个模板 **[electron-vite-boilerplate](https://github.com/caoxiemeihao/electron-vite-boilerplate)**
#### 推荐所有的 NodeJs、Electron API 通过 `Preload-script` 注入到 渲染进程中 **推荐所有的 NodeJs、Electron API 通过 `Preload-script` 注入到 渲染进程中，例如：**
* **src/preload/index.ts** * **src/preload/index.ts**
@ -72,11 +72,9 @@
import fs from 'fs' import fs from 'fs'
import { contextBridge, ipcRenderer } from 'electron' import { contextBridge, ipcRenderer } from 'electron'
// Expose Electron, NodeJs API to Renderer-process // --------- Expose some API to Renderer-process. ---------
contextBridge.exposeInMainWorld('bridge', { contextBridge.exposeInMainWorld('fs', fs)
fs, contextBridge.exposeInMainWorld('ipcRenderer', ipcRenderer)
ipcRenderer: withPrototype(ipcRenderer),
})
``` ```
* **src/renderer/src/global.d.ts** * **src/renderer/src/global.d.ts**
@ -84,19 +82,17 @@
```typescript ```typescript
// Defined on the window // Defined on the window
interface Window { interface Window {
bridge: {
fs: typeof import('fs') fs: typeof import('fs')
ipcRenderer: import('electron').IpcRenderer ipcRenderer: import('electron').IpcRenderer
} }
}
``` ```
* **src/renderer/src/main.tsx** * **src/renderer/main.ts**
```typescript ```typescript
// Use Electron, NodeJs API in Renderer-process // Use Electron, NodeJs API in Renderer-process
console.log('fs', window.bridge.fs) console.log('fs', window.fs)
console.log('ipcRenderer', window.bridge.ipcRenderer) console.log('ipcRenderer', window.ipcRenderer)
``` ```
## 效果 ## 效果