@eduardoleolim/electron-esbuild v3.0.0
Inspired by electron-esbuild of Kiyozz.
A package to build your electron app with esbuild.
✨ Features
- Build your electron app with esbuild
- Start a hot reload dev server for your renderer process
- Copy static files to the output directory
- Support to use vite for the renderer process
- Support for preload scripts
- Support for esbuild loaders and exclude options in each configuration
- Support for multiple main, preload and renderer configurations.
📥 Installation
npm install @eduardoleolim/electron-esbuild --save-dev
🖥️ Usage
npx electron-esbuild <command> [options]
⌨️ Commands
🛠️ build
Builds your electron app.
Options:
--config or -c
Config file path.--vite
Use vite for the renderer process. Default:false
npx electron-esbuild build [--config electron-esbuild.config.json] [--vite]
👨💻 dev
Builds your electron app and starts a dev server for your renderer process.
Options:
--config or -c
Config file path.--vite
Use vite for the renderer process. Default:false
--clean
Clean the output directory before building. Default:false
npx electron-esbuild dev [--config electron-esbuild.config.json] [--vite] [--clean]
⚙️ Configuration
You can configure the build with a json or yaml file in the root of your project. It looking for a config file named electron-esbuild.config.json
or electron-esbuild.config.yaml
.
Electron-esbuild will look for the config file in the following order:
- The path specified in the
--config
option - The default yaml file
- The default json file
Electron Config
The electron config has the following properties:
output
- Optional. The output directory of your electron app, default:dist
. It is relative to the root of your projectmain
- The main process configpreloads
- Optional. A preload config can be an array of configs or a single configrenderers
- The renderer process config can be an array of configs or a single configresources
- Optional. An array of files to copy to the output directory
{
"output": "<rootProjectDir>/<outputDir>",
"main": {
...
},
"preloads": [
...
],
"renderers": [
...
],
"resources": [
...
]
}
Main Config
The main config has the following properties:
entry
- The entry file of your main processargs
- Optional. The arguments to pass to the main processoutput
- The output configuration of bundledirectory
- The output directory of your main process. It is relative to theoutput
property of ElectronConfigfilename
- The output filename of your main process
esbuild
- Optional. Path to a javascript file exporting esbuild optionsexclude
- Optional. An array of libs that you don't want to bundleloaders
- Optional. An array of esbuild's loaders for specific files
{
"entry": "<rootProjectDir>/main/file/directory",
"args": [
...
],
"output": {
"directory": "<outputDir>/directory",
"filename": "filename"
},
"esbuild": "<rootProjectDir>/esbuild/config/file",
"exclude": [
...
],
"loaders": [
...
]
}
Preload Config
The preload config is composed of the following properties:
entry
- The entry file of your preload processrenderers
- Optional. An array of indexes of renderer configs that will be used to reload the renderer process when the preload process is updatedoutput
- The output configuration of bundledirectory
- Optional. The output directory of your preload process. Default: same asoutput.directory
of MainConfigfilename
- The output filename of your preload process
esbuild
- Optional. Path to a javascript file exporting esbuild optionsexclude
- Optional. An array of libs that you don't want to bundleloaders
- Optional. An array of esbuild's loaders for specific files
{
"entry": "<rootProjectDir>/preload/file/directory",
"renderers": [0, 1],
"output": {
"directory": "<outputDir>/directory",
"filename": "filename"
},
"esbuild": "<rootProjectDir>/esbuild/config/file",
"exclude": [
...
],
"loaders": [
....
]
}
Renderer Config
The renderer config has the following properties:
entry
- The entry file of your renderer processhtml
- The html file of your renderer processdevPort
- Optional. The port of the dev server. If port is not available, it will try the next oneoutput
- The output configuration of bundledirectory
- Optional. The output directory of your renderer process. Default: same asoutput.directory
of MainConfigfilename
- The output filename of your renderer process
esbuild
- Optional. Path to a javascript file exporting esbuild optionsexclude
- Optional. An array of libs that you don't want to bundleloaders
- Optional. An array of esbuild's loaders for specific files
{
"entry": "<rootProjectDir>/renderer/file/directory",
"html": "<rootProjectDir>/html/file/directory",
"devPort": 8000,
"output": {
"directory": "<outputDir>/directory",
"filename": "filename"
},
"esbuild": "<rootProjectDir>/esbuild/config/file",
"exclude": [
...
],
"loaders": [
...
]
}
Resources Config
The resources config could be a string or an object.
If it is a string, it will be copied to the output directory of ElectronConfig.
If it is an object, it is composed of the following properties:
from
- The path of the file to copyto
- Optional. The path of the file in the output directory. Default: same asoutput.directory
of ElectronConfig
The to
property also can be and object with the following properties:
directory
- The output directory of the filefilename
- The output filename of the file
[
"path/to/file",
"path/to/directory",
{
"from": "path/to/file",
"to": "<outputDir>/path/to/output/directory"
}.
{
"from": "path/to/file",
"to": {
"directory": "<outputDir>/path/to/output/directory",
"filename": "filename"
}
}
]
📄 Examples
There are some examples in the examples directory.
- basic-js - A basic example with javascript using the basic configuration of electron-esbuild.
- basic-ts - A basic example with typescript using the basic configuration of electron-esbuild.
- svelte-ts - An example with svelte and typescript using the basic configuration of electron-esbuild. Also, it shows how to use an esbuild config file for the renderer process.
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
8 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago