Table of Contents
assets-esbuild
Note: The options API is still evolving; expect tweaks as the project grows.
What it does
assets-esbuild bundles a JavaScript file with esbuild and returns the compiled text. It's a pure function — no Eleventy knowledge, no side effects. assets-core calls it during the build for entry files and through the inlineESbuild filter for inline bundles.
Defaults
| Option | Default | Description |
|---|---|---|
minify |
true |
Minify the bundled output. |
target |
'es2020' |
esbuild target environment. |
Defaults are defined once in the process function. Options you pass (via Baseline config or the inline filter) are merged on top.
Options
At the plugin level, pass esbuild overrides through Baseline's assetsESBuild option. These apply to all entry files and inline calls unless overridden per-call:
eleventyConfig.addPlugin(
baseline({
assetsESBuild: {
minify: process.env.ELEVENTY_ENV === 'production',
target: 'es2017'
}
})
);
Per-call, the inlineESbuild filter accepts an options object that merges with the defaults:
{% set jsPath = _baseline.assets.input ~ "js/inline-example.js" %}
{{ jsPath | inlineESbuild({ minify: false, target: "es2017" }) | safe }}
How it works
- Takes an absolute file path and an optional options object.
- Merges options with the defaults (
minify: true,target: 'es2020'). - Runs
esbuild.buildwithbundle: trueandwrite: false— the output stays in memory, nothing written to disk by esbuild itself. - Returns the bundled text. Eleventy (via assets-core) writes the final file.
On error, logs to console and returns a /* Error processing JS */ comment so the build doesn't break.
Inlining a bundle
The inlineESbuild filter bundles any JS file you point it at — not limited to the assets directory. It wraps the result in <script> tags.
{% set jsPath = _baseline.assets.input ~ "js/inline-example.js" %}
{{ jsPath | inlineESbuild | safe }}
In Markdown, keep the call unindented and on its own lines so the <script> is treated as raw HTML. Use | safe so Nunjucks doesn't escape the tags.
Tips
- Only
index.jsfiles are compiled as entry points. Use them as the front door; import everything else from there. - The inline filter is handy for small scripts that don't justify a separate request — critical path JS, analytics snippets, that kind of thing. Avoid inlining large bundles.
- See the Assets Pipeline Quickstart for an end-to-end example.
Peer deps
esbuild (included in Baseline's dependencies).
Previous: assets-core
Next: assets-postcss