vite-plugin-target

Make Vite support Electron, Node.js, etc.

Install

npm i -D vite-plugin-target

Examples

• electron - with Vite.
• electron-forge - with Electron's official forge scaffold.
• vite-electron-plugin - with vite-electron-plugin.

Usage

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)

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 │
  ┗————————————————————————————————————————┛                    ┗—————————————————┛