vite-plugin-electron-renderer
Support use Node.js API in Electron-Renderer
English
|
简体中文
In short, `vite-plugin-electron-renderer` is responsible for polyfilling Electron, Node.js built-in modules.
## Install
```sh
npm i vite-plugin-electron-renderer -D
```
## Usage
1. This just modifies some of Vite's default config to make the Renderer process works.
```js
import renderer from 'vite-plugin-electron-renderer'
export default {
plugins: [
renderer(),
],
}
```
2. Using the third-part `C/C++`, `esm` package in the Renderer process.
```js
import renderer from 'vite-plugin-electron-renderer'
export default {
plugins: [
renderer({
resolve: {
// C/C++ modules must be pre-bundle
serialport: { type: 'cjs' },
// `esm` modules only if Vite does not pre-bundle them correctly
got: { type: 'esm' },
},
}),
],
}
```
> By the way, if a module is marked as `type: 'cjs'`, the plugin just loads it in using `require()`. So it should be put into `dependencies`.
## API *(Define)*
`renderer(options: RendererOptions)`
```ts
export interface RendererOptions {
/**
* Explicitly tell Vite how to load modules, which is very useful for C/C++ and `esm` modules
*
* - `type.cjs` just wraps esm-interop
* - `type.esm` pre-bundle to `cjs` and wraps esm-interop
*
* @experimental
*/
resolve?: {
[module: string]: {
type: 'cjs' | 'esm',
/** Full custom how to pre-bundle */
build?: (args: {
cjs: (module: string) => Promise,
esm: (module: string, buildOptions?: import('esbuild').BuildOptions) => Promise,
}) => Promise
}
}
}
```
## [Examples](https://github.com/electron-vite/vite-plugin-electron-renderer/tree/main/examples)
- [quick-start](https://github.com/electron-vite/vite-plugin-electron-renderer/tree/main/examples/quick-start)
## How to work
> Load Electron and Node.js cjs-packages/built-in-modules (Schematic)
```
┏————————————————————————————————————————┓ ┏—————————————————┓
│ import { ipcRenderer } from 'electron' │ │ Vite dev server │
┗————————————————————————————————————————┛ ┗—————————————————┛
│ │
│ 1. Pre-Bundling electron module into │
│ node_modules/.vite-electron-renderer/electron │
│ │
│ 2. HTTP(Request): electron module │
│ ————————————————————————————————————————————————> │
│ │
│ 3. Alias redirects to │
│ node_modules/.vite-electron-renderer/electron │
│ ↓ │
│ const { ipcRenderer } = require('electron') │
│ export { ipcRenderer } │
│ │
│ 4. HTTP(Response): electron module │
│ <———————————————————————————————————————————————— │
│ │
┏————————————————————————————————————————┓ ┏—————————————————┓
│ import { ipcRenderer } from 'electron' │ │ Vite dev server │
┗————————————————————————————————————————┛ ┗—————————————————┛
```
## Dependency Pre-Bundling
**In general**. Vite will pre-bundle all third-party modules in a Web-based usage format, but it can not adapt to Electron Renderer process especially C/C++ modules. So we must be make a little changes for this.
```js
// 👉 https://github.com/electron-vite/vite-plugin-electron-renderer/blob/v0.13.0/src/optimizer.ts#L139-L142
const _M_ = require("serialport");
export default (_M_.default || _M_);
export const SerialPort = _M_.SerialPort;
// export other members ...
```
## dependencies vs devDependencies
| Classify |
e.g. |
dependencies |
devDependencies |
| Node.js C/C++ native modules |
serialport, sqlite3 |
✅ |
❌ |
| Node.js CJS packages |
electron-store |
✅ |
✅ |
| Node.js ESM packages |
execa, got, node-fetch |
✅ |
✅ (Recommend) |
| Web packages |
Vue, React |
✅ |
✅ (Recommend) |
#### Why is it recommended to put properly buildable packages in `devDependencies`?
Doing so will reduce the size of the packaged APP by [electron-builder](https://github.com/electron-userland/electron-builder).