electron-vite

<p align="center" <img src="https://alex8088.github.io/assets/electron-vite.svg" width="150px" height="150px" </p

<div align="center" <h1electron-vite</h1 </div <p align="center"Next generation Electron build tooling based on Vite</p

<p align="center" <img src="https://img.shields.io/npm/v/electron-vite?color=6988e6&label=version" <img src="https://img.shields.io/github/license/alex8088/electron-vite?color=blue" alt="license" / </p

<p align="center" <a href="https://electron-vite.org"Documentation</a | <a href="https://electron-vite.org/guide"Getting Started</a | <a href="https://github.com/alex8088/quick-start/tree/master/packages/create-electron"create-electron</a </p

<p align="center" <a href="https://cn.electron-vite.org"中文文档</a </p

<br / <br /

Features

• ⚡️ Vite powered and use the same way.
• 🛠 Pre-configure with sensible defaults optimized for Electron.
• 💡 Optimize asset handling for Electron main process.
• 🚀 Fast HMR & hot reloading.
• 🔥 Isolated build for multi-entry application development.
• ✨ Simplify multi-threading development.

• 🔒 Compile code to v8 bytecode to protect source code.
• 🔌 Easy to debug in IDEs such as VSCode or WebStorm.
• 📦 Out-of-the-box support for TypeScript, Vue, React, Svelte, SolidJS and more.

Usage

Install

npm i electron-vite -D

Development & Build

In a project where electron-vite is installed, you can use electron-vite binary directly with npx electron-vite or add the npm scripts to your package.json file like this:

{
  "scripts": {
    "start": "electron-vite preview",
    "dev": "electron-vite dev",
    "prebuild": "electron-vite build"
  }
}

Configuration

When running electron-vite from the command line, electron-vite will automatically try to resolve a config file named electron.vite.config.js inside project root. The most basic config file looks like this:

// electron.vite.config.js
export default {
  main: {
    // vite config options
  },
  preload: {
    // vite config options
  },
  renderer: {
    // vite config options
  }
}