Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/electron-vite/vite-plugin-electron-renderer
Ployfill Node.js API for Renderer process
https://github.com/electron-vite/vite-plugin-electron-renderer
Last synced: about 2 months ago
JSON representation
Ployfill Node.js API for Renderer process
- Host: GitHub
- URL: https://github.com/electron-vite/vite-plugin-electron-renderer
- Owner: electron-vite
- License: mit
- Created: 2022-06-25T22:18:11.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-15T02:49:58.000Z (2 months ago)
- Last Synced: 2024-07-18T05:29:45.024Z (2 months ago)
- Language: TypeScript
- Homepage:
- Size: 354 KB
- Stars: 89
- Watchers: 1
- Forks: 9
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
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).