vitejs-plugin-electron v1.4.1

An vite plugin for Electron Renderer-process use NodeJs API.

Example 👉 electron-vite-boilerplate

Usage

vite.config.ts

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

export default defineConfig({
  plugins: [
    electron(),
  ],
  // Required, Electron after packaged use 'file://' protocol.
  base: './',
  build: {
    // Required, correct module resolve after build.
    // Vite will generate multiple files after build, and then index.html with './' relative path load module, instead of the default 'assets' folder.
    assetsDir: '',
    rollupOptions: {
      output: {
        // Required, Electron only supports CommonJs module.
        format: 'cjs',
      },
      // Required, 'electron.externals' includes 'electron' and NodeJs builtin modules.
      external: [...electron.externals],
    },
  },
  optimizeDeps: {
    // Optional.
    exclude: ['electron'],
  },
})

renderer/foo.ts

import { ipcRenderer } from 'electron'

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

How to work

The plugin transform 'electron' and NodeJs builtin modules to ESModule format. The plugin only work in 'vite serve' phase. Rollup 'external' option in the 'vite build' phase will be processed automatically.

/**
 * All exports module see https://www.electronjs.org -> API -> Renderer Process Modules
 */
const {
  clipboard,
  nativeImage,
  shell,
  contextBridge,
  crashReporter,
  ipcRenderer,
  webFrame,
  desktopCapturer,
  deprecate
} = require('electron');

export {
  clipboard,
  nativeImage,
  shell,
  contextBridge,
  crashReporter,
  ipcRenderer,
  webFrame,
  desktopCapturer,
  deprecate
}

export default {
  clipboard,
  nativeImage,
  shell,
  contextBridge,
  crashReporter,
  ipcRenderer,
  webFrame,
  desktopCapturer,
  deprecate
};

const __builtinModule = require('path');

// These constants are generated by "Object.keys(__builtinModule)"
const resolve = __builtinModule.resolve;
const normalize = __builtinModule.normalize;
const isAbsolute = __builtinModule.isAbsolute;
const join = __builtinModule.join;
const relative = __builtinModule.relative;
const toNamespacedPath = __builtinModule.toNamespacedPath;
const dirname = __builtinModule.dirname;
const basename = __builtinModule.basename;
const extname = __builtinModule.extname;
const format = __builtinModule.format;
const parse = __builtinModule.parse;
const sep = __builtinModule.sep;
const delimiter = __builtinModule.delimiter;
const win32 = __builtinModule.win32;
const posix = __builtinModule.posix;
const _makeLong = __builtinModule._makeLong;

export {
  resolve,
  normalize,
  isAbsolute,
  join,
  relative,
  toNamespacedPath,
  dirname,
  basename,
  extname,
  format,
  parse,
  sep,
  delimiter,
  win32,
  posix,
  _makeLong,
}

export default { resolve, normalize, isAbsolute, join, relative, toNamespacedPath, dirname, basename, extname, format, parse, sep, delimiter, win32, posix, _makeLong };

Custom external resolve code

Same as vite-plugin-resolve

export default defineConfig({
  plugins: [
    electron({
      resolve: {
        // use string
        'electron-store': `const Store = require('electron-store'); export default Store;`,
        // use function to return string
        sqlite3: () => `const Database = require('sqlite3').Database; export { Database }`,
      },
    }),
  ],
  optimizeDeps: {
    // Optional.
    exclude: [
      'electron-store',
      'sqlite3',
    ],
  },
  // other configuration...
})