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

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

renderer(options: Options)

export interface Options {
  /**
   * Explicitly include/exclude some CJS modules  
   * `modules` includes `dependencies` of package.json  
   */
  resolve?: (modules: string[]) => typeof modules | undefined
}

dependencies vs devDependencies

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.

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)

First, put the Node.js(CJS) packages into dependencies.

Second, you need to explicitly specify which packages are Node.js(CJS) packages for vite-plugin-electron-renderer by options.resolve(). This way they will be treated as external modules and loaded correctly. Thereby avoiding the problems caused by the Pre-Bundling of Vite.

It's essentially works principle is to generate a virtual module in ESM format by load-hook during vite serve to ensure that it can work normally. It's inserted into rollupOptions.external during vite build time.

Load Node.js C/C++ native modules

renderer({
  resolve() {
    // explicitly specify which packages are Node.js(CJS) packages
    return [
      // C/C++ native modules
      'serialport',
      'sqlite3',
    ]
  }
})

Load Node.js CJS packages/builtin-modules/electron (Schematic)

Electron-Renderer(vite build)

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

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

Node.js ESM packages

export default {
+ optimizeDeps: {
+   exclude: ['es-module']
+ }
}

Why is it recommended to put properly buildable packages in devDependencies?

Doing so will reduce the size of the packaged APP by electron-builder.

How to work

The plugin is just the encapsulation of the built-in plugins of electron-vite-boilerplate/packages/renderer/plugins.

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'
• resolve.conditions = ['node']
• optimizeDeps.exclude = ['electron'] - always