vite-plugin-electron-renderer

Support use Node.js API in Electron-Renderer

English | 简体中文

注意：这是专门适用于 Sillot 的 fork，源 repo

Install

npm i @sillot/vite-plugin-electron-renderer -D

Examples

• electron-forge - use in Electron Forge scaffolds.
• quick-start
• worker

Usage

vite.config.ts

import renderer from '@sillot/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 {
  /**
   * @default 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
       * - `commonjs` - Only the ESM code snippet is wrapped
       * - `module` - First build the code as cjs via esbuild, then wrap the ESM code snippet
       */
      type?: "commonjs" | "module"
    })[]
    buildOptions?: import('esbuild').BuildOptions
  }
}

How to work

Electron-Renderer(vite serve)

Load Electron and Node.js cjs-packages/builtin-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 │
 ┗————————————————————————————————————————┛                 ┗—————————————————┛

Electron-Renderer(vite build)

1. Add "fs module" to rollupOptions.external.
2. Modify rollupOptions.output.format to cjs (If it you didn't explicitly set it).

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

Dependency Pre-Bundling

>=v0.10.2

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

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