Integrate Vite and Electron
English | ็ฎไฝไธญๆ
Example ๐ vite-plugin-electron-quick-start
vite.config.ts
import electron from 'vite-plugin-electron'
export default {
plugins: [
electron({
main: {
entry: 'electron/main.ts',
},
}),
],
}
electron(config: Configuration)
import type { LibraryOptions, UserConfig } from 'vite'
import type { InputOption } from 'rollup'
export interface Configuration {
main: {
/**
* Shortcut of `build.lib.entry`
*/
entry: LibraryOptions['entry']
vite?: UserConfig
}
preload?: {
/**
* Shortcut of `build.rollupOptions.input`
*/
input: InputOption
vite?: UserConfig
}
}
The plugin is just the encapsulation of the built-in scripts of electron-vite-boilerplate/scripts
Let's use the 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
๐ง๐ง๐ง๐ง๐ง๐ง๐ง๐ง๐ง๐ง๐ง๐ง๐ง๐ง๐ง๐ง๐ง๐ง๐ง๐ง๐ง๐ง๐ง๐ง๐ง๐ง๐ง๐ง๐ง๐ง๐ง๐ง๐ง๐ง๐ง๐ง๐ง๐ง๐ง๐ง
Use Electron and Node.js API in Renderer-process
If you only need to build the Renderer-process, you can just use the
vite-plugin-electron/renderer
plugin
Example ๐ electron-vite-boilerplate/packages/renderer/vite.config.ts
vite.config.ts
import renderer from 'vite-plugin-electron/renderer'
export default {
plugins: [
renderer(),
],
}
renderer.js
import { readFile } from 'fs'
import { ipcRenderer } from 'electron'
readFile(/* something code... */)
ipcRenderer.on('event-name', () => {/* something code... */})
Using Electron API in Renderer-process
import { ipcRenderer } from 'electron'
โ
// Actually will redirect by `resolve.alias`
import { ipcRenderer } from 'vite-plugin-electron/renderer/modules/electron-renderer.js'
Using Node.js API in Renderer-process
import { readFile } from 'fs'
โ
// All Node.js API will redirect to the directory created based on `vite-plugin-optimizer` by `resolve.alias`
import { readFile } from '.vite-plugin-electron-renderer/fs'
Config presets
- Fist, the plugin will configuration something. If you do not configure the following options, the plugin will modify their default values
base = './'
build.assetsDir = ''
-> TODO: Automatic splicingbuild.assetsDir
build.emptyOutDir = false
build.cssCodeSplit = false
build.rollupOptions.output.format = 'cjs'
resolve.conditions = ['node']
- Always insert the
electron
module intooptimizeDeps.exclude
-
The plugin transform Electron and Node.js built-in modules to ESModule format in
vite serve
phase. -
Add Electron and Node.js built-in modules to Rollup
output.external
option in thevite build
phase.
You may need to use some Node.js modules from npm in the Main-process/Renderer-process.
I suggest you look at electron-vite-boilerplate.