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

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 third-part C/C++ package in the Renderer process.

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

export default {
  plugins: [
    renderer({
      resolve: {
        serialport: () => ({ platform: 'node' }), // specify as `node` platform
      },
    }),
  ],
}

API (Define)

renderer(options: RendererOptions)

export interface RendererOptions {
  /**
   * Explicitly tell Vite how to load modules, which is very useful for C/C++ modules.  
   * Most of the time, you don't need to use it when a module is a C/C++ module, you can load them by return `{ platform: 'node' }`.  
   * 
   * If you know exactly how Vite works, you can customize the return snippets.  
   * 
   * ```js
   * renderer({
   *   resolve: {
   *     // Use the serialport(C/C++) module as an example
   *     serialport: () => ({ platform: 'node' }),
   *     // Equivalent to
   *     serialport: () => `const lib = require("serialport"); export default lib.default || lib;`,
   *   },
   * })
   * ```
   * 
   * @experimental
   */
  resolve?: {
    [id: string]: (() => string | { platform: 'browser' | 'node' } | Promise<string | { platform: 'browser' | 'node' }>)
  }
}

Examples

• quick-start

How to work

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

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.14 (2023-03-31)

• c68d26a fix: move cjs config to cjs-shim.ts #107 | electron-vite-vue/issues/107