Eleventy Plugin Baseline

A magic carpet ride

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

  1. Takes an absolute file path and an optional options object.
  2. Merges options with the defaults (minify: true, target: 'es2020').
  3. Runs esbuild.build with bundle: true and write: false — the output stays in memory, nothing written to disk by esbuild itself.
  4. 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.js files 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