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

In general, Node.js ESM packages only need to be converted if they are used in Electron-Renderer, but not in Electron-Main.

1. Install vite-plugin-esmodule to load ESM packages
2. It is recommended to put the ESM packages in the devDependencies

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

Changelog

[2022-08-08] v0.8.5

• 1cc4f40 fix(🌱): support Vite3 - Uncaught TypeError: Failed to construct 'URL': Invalid URL (vite 3) #44
• 32f7755 feat(🌱): output ESM format - TypeError: electron is not a function #45