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

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

Usage

1. This just modifies some of Vite's default config to make the Renderer process works.

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

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

1. Using the Electron and Node.js API in the Renderer process.

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

export default {
  plugins: [
    renderer({
      nodeIntegration: true,
    }),
  ],
}

// e.g. - renderer.js
import { readFile } from 'fs'
import { ipcRenderer } from 'electron'

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

1. Using the third-part C/C++ package in the Renderer process.

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

export default {
  plugins: [
    renderer({
      nodeIntegration: true,
      optimizeDeps: {
        resolve(args) {
          if (args.path === 'serialport') {
            return { platform: 'node' } // specify as `node` platform
          }
        },
      },
    }),
  ],
}

API (Define)

renderer(options: RendererOptions)

export interface RendererOptions {
  /**
   * @default false
   */
  nodeIntegration?: boolean
  /**
   * Pre-Bundling modules for Electron Renderer process.
   */
  optimizeDeps?: {
    /**
     * Explicitly tell the Pre-Bundling how to work.
     */
    resolve?: (args: import('esbuild').OnResolveArgs) =>
      | void
      | { platform: 'browser' | 'node' }
      | Promise<void | { platform: 'browser' | 'node' }>
  }
}

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

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.
When a module detected as a cjs module. it will be pre-bundle like the following.

const lib = require("cjs-module");

export const member = lib.member;
export default (lib.default || lib);

See source code

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 the explanation

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.

Changelog

0.13.7 (2023-03-25)

• bda7d87 feat: set electron __esModule
• 69960bd refactor: remove cjs, external. add freeze, ignore.
• 521d8e2 docs: resolve.alias comments

Main Changed

1. No longer build in cjs format by default with improvements to esm.
2. Remove the Node.js built-in module from external to be compatible with the esm build format.