|
| 1 | +# Core Plugins |
| 2 | + |
| 3 | +## vite-plugin-electron |
| 4 | + |
| 5 | +[vite-plugin-electron](https://github.com/electron-vite/vite-plugin-electron) makes the integration of Electron With Vite very easy! Its main purpose is to build the **Main process** and **Preload scripts**, and to start and [hot restart](/guide/features.html#hot-restart) the Electron App when the **Main process** and **Preload scripts** are built. |
| 6 | + |
| 7 | + It also provides a full [JavaScript API](https://github.com/electron-vite/vite-plugin-electron#javascript-api) to make it easy to use anywhere. |
| 8 | + |
| 9 | +<details> |
| 10 | + <summary>中文</summary> |
| 11 | + <p><a target="_blank" href="https://github.com/electron-vite">vite-plugin-electron</a> 使得 Electron 与 Vite 的集成变得十分简单！它的主要作用是构建主进程与预加载脚本，并且当主进程与预加载脚本构建完成时启动、<a href="/guide/features.html#hot-restart">热重启</a> Electron App。</p> |
| 12 | + <p>除此之外它还提供全量的 <a target="_blank" href="https://github.com/electron-vite/vite-plugin-electron#javascript-api">JavaScript API</a> 可以很方便的在任何地方使用它。</p> |
| 13 | +</details> |
| 14 | + |
| 15 | +### Basic Usage |
| 16 | + |
| 17 | +```ts |
| 18 | +// vite.config.ts |
| 19 | +import electron from 'vite-plugin-electron' |
| 20 | + |
| 21 | +export default { |
| 22 | + plugins: [ |
| 23 | + electron({ |
| 24 | + // Main process entry file of the Electron App. |
| 25 | + entry: 'electron/main.ts', |
| 26 | + }), |
| 27 | + ], |
| 28 | +} |
| 29 | +``` |
| 30 | + |
| 31 | +### With Preload Scripts |
| 32 | + |
| 33 | +[vite-plugin-electron](https://github.com/electron-vite/vite-plugin-electron) supports passing an Array. |
| 34 | + |
| 35 | +```ts |
| 36 | +// vite.config.ts |
| 37 | +import electron from 'vite-plugin-electron' |
| 38 | + |
| 39 | +export default { |
| 40 | + plugins: [ |
| 41 | + electron([ |
| 42 | + { |
| 43 | + entry: 'electron/main.ts', |
| 44 | + }, |
| 45 | + { |
| 46 | + entry: 'electron/preload.ts', |
| 47 | + onstart({ reload }) { |
| 48 | + // Notify the Renderer process to reload the page when the Preload scripts build is complete, |
| 49 | + // instead of restarting the entire Electron App. |
| 50 | + reload() |
| 51 | + }, |
| 52 | + }, |
| 53 | + ]), |
| 54 | + ], |
| 55 | +} |
| 56 | +``` |
| 57 | + |
| 58 | +### Code Split |
| 59 | + |
| 60 | +[vite-plugin-electron](https://github.com/electron-vite/vite-plugin-electron) allows for very flexible code splitting, it can be built using passing Array, or using [Vite's built-in multi-entry](https://vitejs.dev/config/build-options.html#build-lib) build. |
| 61 | + |
| 62 | +<details> |
| 63 | + <summary>中文</summary> |
| 64 | + <p><code>vite-plugin-electron</code> 可以进行十分灵活的代码拆分，它可以使用传递数组的形式构建，或者使用 <a target="_blank" href="https://vitejs.dev/config/build-options.html#build-lib">Vite 内置的多入口</a> 构建。</p> |
| 65 | +</details> |
| 66 | + |
| 67 | +```ts |
| 68 | +// vite.config.ts |
| 69 | +import electron from 'vite-plugin-electron' |
| 70 | + |
| 71 | +// Use array |
| 72 | +export default { |
| 73 | + plugins: [ |
| 74 | + electron([ |
| 75 | + { |
| 76 | + // Main-Process entry file of the Electron App. |
| 77 | + entry: 'electron/main.ts', |
| 78 | + }, |
| 79 | + { |
| 80 | + entry: 'electron/main-chunk.ts', |
| 81 | + }, |
| 82 | + ]), |
| 83 | + ], |
| 84 | +} |
| 85 | + |
| 86 | +// Use Vite multi-entry |
| 87 | +export default { |
| 88 | + plugins: [ |
| 89 | + electron({ |
| 90 | + entry: { |
| 91 | + // Main-Process entry file of the Electron App. |
| 92 | + main: 'electron/main.ts' |
| 93 | + 'main-chunk': 'electron/main-chunk.ts', |
| 94 | + }, |
| 95 | + }), |
| 96 | + ], |
| 97 | +} |
| 98 | +``` |
| 99 | + |
| 100 | +### Custom Start |
| 101 | + |
| 102 | +This is useful if you want to do something before or after **launching** or **restarting** the Electron App. |
| 103 | + |
| 104 | +<details> |
| 105 | + <summary>中文</summary> |
| 106 | + <p>如果你想在启动或重启 Electron App 之前或之后做些什么，它会很有用。</p> |
| 107 | +</details> |
| 108 | + |
| 109 | +```ts |
| 110 | +// vite.config.ts |
| 111 | +import electron from 'vite-plugin-electron' |
| 112 | + |
| 113 | +export default { |
| 114 | + plugins: [ |
| 115 | + electron({ |
| 116 | + entry: 'electron/main/index.ts', |
| 117 | + onstart({ startup }) { |
| 118 | + // Do something... |
| 119 | + startup() |
| 120 | + }, |
| 121 | + }), |
| 122 | + ], |
| 123 | +} |
| 124 | +``` |
| 125 | + |
| 126 | +### Custom Build |
| 127 | + |
| 128 | +[vite-plugin-electron](https://github.com/electron-vite/vite-plugin-electron) supports the full amount of [Vite's InlineConfig](https://vitejs.dev/guide/api-javascript.html#inlineconfig). |
| 129 | + |
| 130 | +<details> |
| 131 | + <summary>中文</summary> |
| 132 | + <p><code>vite-plugin-electron</code> 支持全量的 <a target="_blank" href="https://vitejs.dev/guide/api-javascript.html#inlineconfig">Vite 配置</a>。</p> |
| 133 | +</details> |
| 134 | + |
| 135 | +```ts |
| 136 | +// vite.config.ts |
| 137 | +import electron from 'vite-plugin-electron/simple' |
| 138 | + |
| 139 | +export default { |
| 140 | + plugins: [ |
| 141 | + electron({ |
| 142 | + entry: 'electron/main.ts', |
| 143 | + // 👉 https://vitejs.dev/guide/api-javascript.html#inlineconfig |
| 144 | + vite: {/* Vite config ⚡️ */}, |
| 145 | + }), |
| 146 | + ], |
| 147 | +} |
| 148 | +``` |
| 149 | + |
| 150 | +### [JavaScript API](https://github.com/electron-vite/vite-plugin-electron#javascript-api) |
| 151 | + |
| 152 | +- [nuxt-electron](https://github.com/caoxiemeihao/nuxt-electron) based on [vite-plugin-electron](https://github.com/electron-vite/vite-plugin-electron) |
| 153 | + |
| 154 | +## vite-plugin-electron/simple |
| 155 | + |
| 156 | +Many times, for a developer who is new to Vite and Electron, the oversimplified and open API design is confusing to them. Maybe Simple API makes them easier to understand. :) |
| 157 | + |
| 158 | +```ts |
| 159 | +// vite.config.ts |
| 160 | +import electron from 'vite-plugin-electron/simple' |
| 161 | + |
| 162 | +export default { |
| 163 | + plugins: [ |
| 164 | + // Just like v0.9.x |
| 165 | + electron({ |
| 166 | + main: { |
| 167 | + entry: 'electron/main.ts', |
| 168 | + }, |
| 169 | + // Optional: input must be use absolute path |
| 170 | + preload: { |
| 171 | + input: __dirname + '/electron/preload.ts', |
| 172 | + }, |
| 173 | + // Optional: Use Node.js API in the Renderer process |
| 174 | + renderer: {}, |
| 175 | + }), |
| 176 | + ], |
| 177 | +} |
| 178 | +``` |
| 179 | + |
| 180 | +## vite-plugin-electron-renderer |
| 181 | + |
| 182 | +[vite-plugin-electron-renderer](https://github.com/electron-vite/vite-plugin-electron-renderer) makes it possible to support building Electron **Renderer process** by modifying some of the necessary Vite default configs. |
| 183 | + |
| 184 | +In addition it allows some npm packages developed specifically for Node.js, especially C/C++ native modules, to be built properly by Vite to be available to the **Renderer process**. |
| 185 | + |
| 186 | +::: tip Note |
| 187 | +Please make sure you enabled `nodeIntegration: true` in the **Main process**. |
| 188 | +::: |
| 189 | + |
| 190 | +<details> |
| 191 | + <summary>中文</summary> |
| 192 | + <p><a target="_blank" href="https://github.com/electron-vite/vite-plugin-electron-renderer">vite-plugin-electron-renderer</a> 通过修改一些必要的 Vite 的默认配置使其能够支持构建 Electron 渲染进程。</p> |
| 193 | + <p>此外它使得一些专门为 Node.js 开发的 npm 包尤其是 C/C++ 本地模块，可以被 Vite 正确构建以提供给渲染进程使用。</p> |
| 194 | +</details> |
| 195 | + |
| 196 | +### Basic Usage |
| 197 | + |
| 198 | +```ts |
| 199 | +// vite.config.ts |
| 200 | +import electron from 'vite-plugin-electron' |
| 201 | +import renderer from 'vite-plugin-electron-renderer' |
| 202 | + |
| 203 | +export default { |
| 204 | + plugins: [ |
| 205 | + electron({ |
| 206 | + entry: 'electron/main.ts', |
| 207 | + }), |
| 208 | + // Use Node.js and Electron in Renderer process |
| 209 | + renderer(), |
| 210 | + ], |
| 211 | +} |
| 212 | +``` |
| 213 | + |
| 214 | +### Node.js And Electron API |
| 215 | + |
| 216 | +```ts |
| 217 | +// In a Renderer process file |
| 218 | +import { readFileSync } from 'node:fs' |
| 219 | +import { ipcRenderer } from 'electron' |
| 220 | + |
| 221 | +// Node.js |
| 222 | +const content = readFileSync('foo.txt', 'utf8') |
| 223 | + |
| 224 | +// Electron |
| 225 | +ipcRenderer.send('foo', 'arg1') |
| 226 | +``` |
| 227 | + |
| 228 | +### Load Third-party modules |
| 229 | + |
| 230 | +In most cases a Node.js npm-pkg written in pure JavaScript can be used directly in the Renderer process. If it is a `C/C++` addon or `ESModule` format package, it needs to be [pre-bundle](https://vitejs.dev/guide/dep-pre-bundling.html) before it can work. |
| 231 | + |
| 232 | +See the [👉 Dependency Pre-Bundling](/guide/dependency-pre-bundling.html) section for details. |
| 233 | + |
| 234 | +<details> |
| 235 | + <summary>中文</summary> |
| 236 | + <p>多数情况下一个纯 JavaScript 编写的 Node.js npm 包是可以直接在渲染进程中使用的。如果它是 <code>C/C++</code> 扩展，或者 <code>ESModule</code> 格式包，那么需要将它<a target="_blank" href="https://vitejs.dev/guide/dep-pre-bundling.html">预构建</a>后才可以工作。</p> |
| 237 | + <p>详情请看 <a href="/guide/dependency-pre-bundling.html">👉 Dependency Pre-Bundling</a> 部分。</p> |
| 238 | +</details> |
| 239 | + |
| 240 | + |
| 241 | + |
| 242 | + |
0 commit comments