Integrate Vite and Electron
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-vue/scripts
🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧
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/rendererplugin
Example 👉 electron-vite-vue/packages/renderer/vite.config.ts
// renderer/vite.config.ts
import electronRenderer from 'vite-plugin-electron/renderer'
export default {
plugins: [
electronRenderer(),
],
}vite.config.ts
import electronRenderer from 'vite-plugin-electron/renderer'
export default {
plugins: [
electronRenderer(),
],
}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 redirect to node_modules/vite-plugin-electron/renderer/modules/electron-renderer.js by resolve.alias
Using Node.js API in Renderer-process
import { readFile } from 'fs'All Node.js API will be built into the node_modules/.vite-plugin-electron-renderer directory by vite-plugin-optimizer
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.assetsDirbuild.rollupOptions.output.format = 'cjs'resolve.conditions = ['node']
-
The plugin transform Electron and Node.js built-in modules to ESModule format in
vite servephase. -
Add Electron and Node.js built-in modules to Rollup
output.externaloption in thevite buildphase.
You may need to use some Node.js modules from npm in the Main-process/Renderer-process.
I suggest you look at electron-vite-vue.
When we use Node.js API in the Renderer-process, we will build the code into the CommonJs format.
Sometimes it will cause the console to report an error exports is not defined. See 👉 issues#103
Now, before we find the answer, we can fix it using the vite-plugin-electron/polyfill-exports
import polyfillExports from 'vite-plugin-electron/polyfill-exports'
export default {
plugins: [
polyfillExports(),
],
}