vite-plugin-electron-renderer

vite-plugin-electron-renderer

Support use Node.js API in Electron-Renderer

English | 简体中文

Install

npm i vite-plugin-electron-renderer -D

Examples

• nodeIntegration
• worker

Usage

vite.config.ts

import renderer from 'vite-plugin-electron-renderer'

export default {
  plugins: [
    renderer(/* options */),
  ],
}

renderer.js

import { readFile } from 'fs'
import { ipcRenderer } from 'electron'

readFile(/* something code... */)
ipcRenderer.on('event-name', () => {/* something code... */})

API (Define)

renderer(options: RendererOptions)

export interface RendererOptions {
  /**
   * Whether node integration is enabled. Default is `false`.
   */
  nodeIntegration?: boolean
  /**
   * If the npm-package you are using is a Node.js package, then you need to Pre Bundling it.
   * @see https://vitejs.dev/guide/dep-pre-bundling.html
   */
  optimizeDeps?: {
    include?: (string | {
      name: string
      /**
       * Explicitly specify the module type
       */
      type?: "commonjs" | "module"
    })[]
    buildOptions?: import('esbuild').BuildOptions
  }
}

Worker

vite.config.ts

import { worker } from 'vite-plugin-electron-renderer'

export default {
  worker: {
    plugins: [
      worker(/* options */),
    ],
  },
}

API (Define)

renderer(options: WorkerOptions)

export interface WorkerOptions {
  /**
   * Whether node integration is enabled in web workers. Default is `false`. More
   * about this can be found in Multithreading.
   */
  nodeIntegrationInWorker?: boolean
}

How to work

Load Electron and Node.js cjs-packages/builtin-modules (Schematic)

Electron-Renderer(vite serve)

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

Electron-Renderer(vite build)

import { ipcRenderer } from 'electron'
↓
const { ipcRenderer } = require('electron')

Dependency Pre-Bundling

When you run vite for the first time, you may notice this message:

$ vite
Pre-bundling: serialport
Pre-bundling: electron-store
Pre-bundling: execa
Pre-bundling: node-fetch
Pre-bundling: got

The Why

In general, Vite may not correctly build Node.js packages, especially Node.js C/C++ native modules, but Vite can load them as external packages.
Unless you know how to properly build them with Vite.
See example

By the way. If an npm package is a pure ESM format package, and the packages it depends on are also in ESM format, then put it in optimizeDeps.exclude and it will work normally.
See an explanation of it.

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.

Config presets (Opinionated)

If you do not configure the following options, the plugin will modify their default values

• base = './'
• build.emptyOutDir = false
• build.cssCodeSplit = false (TODO)
• build.rollupOptions.output.format = 'cjs' (nodeIntegration: true)
• resolve.conditions = ['node']
• optimizeDeps.exclude = ['electron'] - always