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](https://vitejs.dev).
- 📦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
```sh
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:
```json
{
"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:
```js
// 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.
```js
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:
```json
{
"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](https://github.com/alex8088/electron-vite-boilerplate) or use the [create-electron](https://github.com/alex8088/quick-start/tree/master/packages/create-electron) tool to scaffold your project.
```bash
npm init @quick-start/electron
```
## Contribution
See [Contributing Guide](CONTRIBUTING.md).
## License
[MIT](./LICENSE) © alex.wei