Custom Esbuild Targets

Install and set esbuild version explicitly.

While Baseline ships with esbuild as dependency, you might want to fix your esbuild version as recommended in its documentation.

npm install --save-exact --save-dev esbuild

Add additional entrypoints.

Create more index.js files under src/assets/js/. Each folder becomes a bundle in dist/assets/js/:

mkdir -p src/assets/js/home src/assets/js/about
echo "console.log('home bundle');" > src/assets/js/home/index.js
echo "console.log('about bundle');" > src/assets/js/about/index.js

Reference them in templates:

Example

---
title: 'Hello Baseline'
description: 'A minimal Eleventy page powered by eleventy-plugin-baseline.'
permalink: '/'
layout: 'layouts/base.njk'
head:
  script:
    - src: '/assets/js/home/index.js'
      defer: true
---

Inline a small script (keep requests low).

For tiny helpers, inline the bundled output with the built-in filter:

{% set jsPath  = _baseline.assets.input ~ "js/about/index.js" %}
{{ jsPath | inlineESbuild | safe }}

This bundles + minifies that file with esbuild target es2020 and injects a <script>…</script> tag.

Set default target/minify for all bundles.

Pass options to Baseline when you register it:

import baseline, { config as baselineConfig } from '@apleasantview/eleventy-plugin-baseline';

/** @param {import("@11ty/eleventy").UserConfig} eleventyConfig */
export default async function (eleventyConfig) {
	eleventyConfig.addPlugin(
		baseline({
			assetsESBuild: {
				minify: process.env.ELEVENTY_ENV === 'production',
				target: 'es2017'
			}
		})
	);
}

export const config = baselineConfig;

Override target/minify for a specific inline script.

For a one-off override, pass options directly to the built-in inline filter (options merge with your defaults from assetsESBuild):

{% set jsPath  = _baseline.assets.input ~ "js/about/index.js" %}
{{ jsPath | inlineESbuild({ minify: false, target: "es2018" }) | safe }}

Verify.

• Dev: npx rimraf dist/ && npm run dev
• Build: npx rimraf dist/ && npm run build
• Check dist/assets/js/**/index.js for bundled output and size.
• For inlined scripts, view page source and confirm the bundled code is present.