vite-plugin-electron-renderer

Use Electron and NodeJs API in Renderer-process | 简体中文

Example 👉 electron-vite-boilerplate

Usage

vite.config.ts

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

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

vrenderer/foo.ts

import { ipcRenderer } from 'electron'

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

How to work

1. The plugin transform 'electron' and NodeJs builtin modules to ESModule format in 'vite serve' phase.

2. Add 'electron' and NodeJs builtin modules to Rollup 'output.external' option in the 'vite build' phase.

Using electron in Renderer-process
import { ipcRenderer } from 'electron
Actually redirect to "node_modules/vite-plugin-electron-renderer/modules/electron-renderer.js" through 'resolve.alias' config.

Options.resolve

In some cases, you just want 'vite' to load a module like 'node.js'.
You can custom-resolve the module eg:

vite.config.ts

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

export default defineConfig({
  plugins: [
    electron({
      resolve: {
        // In 'vite serve' phase 'electron-store' will generate file to `node_modules/.vite-plugin-electron-renderer/electron-store.js`, and redirect to this path through 'resolve.alias' config.
        // In 'vite build' phase 'electron-store' will added to Rollup `output.external` option.
        'electron-store': `const Store=require('electron-store'); export default Store;`;
        sqlite3: () => {
          // dynamic calculate module exported members
          const sqlite3 = require('sqlite3');
          const members = Object.keys(sqlite3);
          const code = `
            const sqlite3 = require("sqlite3");
            const { ${members.join(', ')} } = sqlite3;
            export { ${members.join(', ')}, sqlite3 as default }
          `;
          return code;
        },
      },
    }),
  ],
})