vite-plugin-electron

vite-plugin-electron

Integrate Vite and Electron

English | 简体中文

Install

npm i vite-plugin-electron -D

Usage

Example 👉 vite-plugin-electron-quick-start

vite.config.ts

import electron from 'vite-plugin-electron'

export default {
  plugins: [
    electron({
      main: {
        entry: 'electron/main.ts',
      },
    }),
  ],
}

API

electron(config: Configuration)

import type { LibraryOptions, UserConfig } from 'vite'
import type { InputOption } from 'rollup'
import { Options } from 'vite-plugin-electron-renderer/plugins/use-node.js'

export interface CommonConfiguration {
  vite?: UserConfig
  /**
   * Explicitly include/exclude some CJS modules  
   * `modules` includes `dependencies` of package.json, Node.js's `builtinModules` and `electron`  
   */
  resolve?: (modules: string[]) => typeof modules | undefined
}

export interface Configuration {
  main: CommonConfiguration & {
    /**
     * Shortcut of `build.lib.entry`
     */
    entry: LibraryOptions['entry']
  }
  preload?: CommonConfiguration & {
    /**
     * Shortcut of `build.rollupOptions.input`
     */
    input: InputOption
  }
  /**
   * Support use Node.js API in Electron-Renderer
   * @see https://github.com/electron-vite/vite-plugin-electron/tree/main/packages/electron-renderer
   */
  renderer?: Options
}

How to work

The plugin is just the encapsulation of the built-in scripts of electron-vite-boilerplate/scripts

Recommend structure

Let's use the official vanilla-ts template created based on create vite as an example

+ ├─┬ electron
+ │ └── main.ts
  ├─┬ src
  │ ├── main.ts
  │ ├── style.css
  │ └── vite-env.d.ts
  ├── .gitignore
  ├── favicon.svg
  ├── index.html
  ├── package.json
  ├── tsconfig.json
+ └── vite.config.ts

🚨 By default, the files in electron folder will be built into the dist/electron

Put Node.js packages in dependencies

Electron-Main

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 treats packages in dependencies as external modules. If you don't want this, you can control this behavior with options.resolve().

Electron-Renderer

You can see 👉 dependencies vs devDependencies