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-Building of Vite.

Its actual 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 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.assetsDir = '' -> TODO: Support nested dir
• build.emptyOutDir = false
• build.cssCodeSplit = false
• build.rollupOptions.output.format = 'cjs'
• resolve.conditions = ['node']
• optimizeDeps.exclude = ['electron'] - always

Changelog

[2022-07-19] v0.6.0

• be80d0c vite-plugin-electron-renderer@0.6.0
• 7e69a7c docs: vite-plugin-electron-renderer@0.6.0
• da89e79 remove electron-renderer/index.d.ts
• 581ef71 chore(deps): bump vite to 3.0.2
• 716485b refactor vite-plugin-electron-renderer with TypeScript
• baf5e80 refactor use-node.js with TypeScript
• 7e3fd3d refactor polyfill-exports with TypeScript
• 2249834 refactor build-config with TypeScript
• 8dad5e2 refactor(🚨): exclude dependencies as external by default
• 0163d12 feat: scripts.dev
• 3ad4b41 feat: scripts.build scripts.dev
• 48a0338 monorepo: add packages/electron-renderer