Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vite-plugin/vite-plugin-target
Make Vite support Electron, Node.js, etc.
https://github.com/vite-plugin/vite-plugin-target
electron target vite vite-plugin
Last synced: about 1 month ago
JSON representation
Make Vite support Electron, Node.js, etc.
- Host: GitHub
- URL: https://github.com/vite-plugin/vite-plugin-target
- Owner: vite-plugin
- License: mit
- Created: 2022-09-13T07:28:42.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-29T14:33:59.000Z (11 months ago)
- Last Synced: 2024-04-26T19:22:12.151Z (7 months ago)
- Topics: electron, target, vite, vite-plugin
- Language: TypeScript
- Homepage:
- Size: 49.8 KB
- Stars: 6
- Watchers: 0
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# vite-plugin-target
Make Vite support Electron, Node.js, etc.
[](https://npmjs.com/package/vite-plugin-target)
[](https://npmjs.com/package/vite-plugin-target)
## Install
```sh
npm i -D vite-plugin-target
```
## Examples
- [electron](https://github.com/vite-plugin/vite-plugin-target/tree/main/examples/electron) - with [Vite](https://vitejs.dev/).
- [electron-forge](https://github.com/vite-plugin/vite-plugin-target/tree/main/examples/electron-forge) - with Electron's official [forge](https://www.electronforge.io/) scaffold.
- [vite-electron-plugin](https://github.com/vite-plugin/vite-plugin-target/tree/main/examples/vite-electron-plugin) - with [vite-electron-plugin](https://github.com/electron-vite/vite-electron-plugin).
## Usage
```js
import target from 'vite-plugin-target'
// Electron Renderer
export default {
plugins: [
target({
'electron-renderer': {},
}),
],
}
// Electron Preload
export default {
plugins: [
target({
'electron-preload': {},
}),
],
}
// Electron Main
export default {
plugins: [
target({
'electron-main': {},
}),
],
}
// Node.js
export default {
plugins: [
target({
node: {},
}),
],
}
```
## API (Define)
`target(options: Options)`
```ts
export interface NodeOptions {
/**
* Pass to `config.esbuild.target`
*/
version?: string
}
export interface ElectronOptions extends NodeOptions {
nodeIntegration?: boolean
}
export type Options =
| { node: NodeOptions }
| { 'electron-main': NodeOptions }
| { 'electron-preload': ElectronOptions }
| { 'electron-renderer': ElectronOptions }
```
## How to work?
- For `node` `electron-main` `electron-preload`, the plugin only changes a few preset configurations.
- `electron-renderer` with `nodeIntegration`.
```
┏————————————————————————————————————————┓ ┏—————————————————┓
│ import { ipcRenderer } from 'electron' │ │ Vite dev server │
┗————————————————————————————————————————┛ ┗—————————————————┛
│ │
│ 1. HTTP(Request): electron module │
│ ————————————————————————————————————————————————> │
│ │
│ │
│ 2. Intercept in load-hook(Plugin) │
│ 3. Generate a virtual ESM module(electron) │
│ ↓ │
│ const { ipcRenderer } = require('electron') │
│ export { ipcRenderer } │
│ │
│ │
│ 4. HTTP(Response): electron module │
│ <———————————————————————————————————————————————— │
│ │
┏————————————————————————————————————————┓ ┏—————————————————┓
│ import { ipcRenderer } from 'electron' │ │ Vite dev server │
┗————————————————————————————————————————┛ ┗—————————————————┛
```