hhy5277 / electron-vite

Next generation Electron build tooling based on Vite 新一代 Electron 开发构建工具

electron-vite

Next generation Electron build tooling based on Vite

Documentation | Getting Started | create-electron

中文文档

Features

• ⚡️ Inherit all the benefits of Vite and use the same way as Vite.
• 📦The main process, renderers and preload scripts are all built with Vite.
• 🛠The main process, renderers and preload scripts Vite configuration combined into one file.
• 💡Pre-configured for Electron, don't worry about configuration.
• 🚀HMR for renderer processes.

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"
  }
}

Configuring

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
  }
}

Use HMR in Renderer

In order to use the renderer process HMR, you need to use the environment variables to determine whether the window browser loads a local html file or a local URL.

function createWindow() {
  // Create the browser window
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, '../preload/index.js')
    }
  })

  // Load the remote URL for development or the local html file for production
  if (!app.isPackaged && process.env['ELECTRON_RENDERER_URL']) {
    mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL'])
  } else {
    mainWindow.loadFile(path.join(__dirname, '../renderer/index.html'))
  }
}

Debugging in VSCode

Add a file .vscode/launch.json with the following configuration:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Main Process",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceRoot}",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron-vite",
      "windows": {
        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron-vite.cmd"
      },
      "runtimeArgs": ["--sourcemap"]
    }
  ]
}

Then, set some breakpoints in main.ts (source code), and start debugging in the VSCode Debug View.

Getting Started

Clone the electron-vite-boilerplate or use the create-electron tool to scaffold your project.

npm init @quick-start/electron

Contribution

See Contributing Guide.

License

MIT © alex.wei