vite-plugin-electron-renderer

vite-plugin-electron-renderer

Use Electron and Node.js API in Renderer-process

English | 简体中文

Example 👉 electron-vite-boilerplate

Install

npm i vite-plugin-electron-renderer -D

Usage

vite.config.ts

import { defineConfig } from 'vite'
import electron from 'vite-plugin-electron-renderer'

export default defineConfig({
  plugins: [
    electron(),
  ],
})

renderer.js

import { readFile } from 'fs'
import { ipcRenderer } from 'electron'

readFile(/* something code... */)
ipcRenderer.on('event-name', () => {/* something code... */})

How to work

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.rollupOptions.output.format = 'cjs'

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.

Using Electron API in Renderer-process import { ipcRenderer } from 'electron

Actually redirect to "node_modules/vite-plugin-electron-renderer/modules/electron-renderer.js" by resolve.alias

Using Node.js API in Renderer-process import { readFile } from 'fs'

All Node.js API will be built into the node_modules/.vite-plugin-electron-renderer directory by vite-plugin-optimizer