vite-plugin-electron-renderer

vite-plugin-electron-renderer

Support use Node.js API in Electron-Renderer

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, Node.js's `builtinModules` and `electron`  
   */
  resolve?: (modules: string[]) => typeof modules | undefined
}

🚨 dependencies vs devDependencies

The easiest way

• Put Node.js packages in dependencies
• Put Web packages in devDependencies

In general, Vite may not correctly build Node.js packages, especially C/C++ native modules, but Vite can load them as external packages. So, put your Node.js package in dependencies. Unless you know how to properly build them with Vite.

By default, vite-plugin-electron-renderer treats packages in dependencies(CJS modules) as external modules. During development, a virtual module in ESM format is generated by load-hook to ensure that it can work properly. It is inserted into rollupOptions.external during build time. If you don't want this, you can control the behavior with options.resolve().

通常的，Vite 可能不能正确的构建 Node.js 的包，尤其是 C/C++ 原生模块，但是 Vite 可以将它们以外部包的形式加载。所以，请将 Node.js 包放到 dependencies 中。除非你知道如何用 Vite 正确的构建它们。

默认情况下，vite-plugin-electron-renderer 会将 dependencies(CJS 模块) 中的包视为 external 模块。在开发期间会通过 load-hook 生成一个 ESM 格式的虚拟模块，以保障其能够正常工作。在构建期间会将其插入到 rollupOptions.external 中。如果你不希望这样，你可以通过 options.resolve() 来控制该行为。

e.g.

Electron-Main

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

Electron-Renderer(vite build)

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

Electron-Renderer(vite serve)

┏———————————————————————————————┓                                ┏—————————————————┓
│ import { readFile } from 'fs' │                                │ Vite dev server │
┗———————————————————————————————┛                                ┗—————————————————┛
               │                                                          │
               │ 1. HTTP(Request): fs module                              │
               │ ———————————————————————————————————————————————————————> │
               │                                                          │
               │                                                          │
               │ 2. Intercept in load-hook(vite-plugin-electron-renderer) │
               │ 3. Generate a virtual module(fs)                         │
               │    ↓                                                     │
               │    const _M_ = require('fs')                             │
               │    export const readFile = _M_.readFile                  │
               │                                                          │
               │                                                          │
               │ 4. HTTP(Response): fs module                             │
               │ <——————————————————————————————————————————————————————— │
               │                                                          │
┏———————————————————————————————┓                                ┏—————————————————┓
│ import { readFile } from 'fs' │                                │ Vite dev server │
┗———————————————————————————————┛                                ┗—————————————————┛

👉 See Vite loading Node.js package source code.

import { ipcRenderer } from 'electron'
↓
// Actually redirect via `resolve.alias`
import { ipcRenderer } from 'vite-plugin-electron-renderer/plugins/use-node.js/electron-renderer.js'

🚨 ESM packages

e.g. node-fetch execa got ...others

1. npm i vite-plugin-esmodule -D
2. Configure in vite.config.ts

import esmodule from 'vite-plugin-esmodule'
export default {
  plugins: [
    esmodule(['got', 'execa', 'node-fetch']),
  ],
}

👉 See electron-renderer.js

How to work

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

Config presets

1. Fist, the plugin will configuration something. If you do not configure the following options, the plugin will modify their default values

• base = './'
• build.assetsDir = '' -> TODO: Automatic splicing build.assetsDir
• build.emptyOutDir = false
• build.cssCodeSplit = false
• build.rollupOptions.output.format = 'cjs'
• resolve.conditions = ['node']
• Always insert the electron module into optimizeDeps.exclude

1. The plugin transform Electron and Node.js built-in modules to ESModule format in vite serve phase.

2. Add Electron and Node.js built-in modules to Rollup output.external option in the vite build phase.

Changelog

[2022-07-07] v0.5.2

• 9dd8d4c feat: export resolveModules()
• 609e582 feat: interface ResolveModules
• dc6d6f6 docs: update
• 201eb71 docs: 🚨 ESM packages
• c8fe50b docs: import { ipcRenderer } from 'electron'