Eleventy Plugin Baseline

A magic carpet ride

Documentation — Table of Contents

Custom Esbuild Targets

Add multiple JS entrypoints, decide when to inline vs bundle, and override esbuild targets/minify for Baseline’s JS pipeline.

Prerequisites

Steps

  1. 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
  2. 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
    ---
  3. 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.

  4. Set default target/minify for all bundles.

    Pass options to Baseline when you register it:

    import baseline from "./_baseline/eleventy.config.js";
    
    /** @param {import("@11ty/eleventy").UserConfig} eleventyConfig */
    eleventyConfig.addPlugin(baseline({
      assetsESBuild: {
        minify: process.env.ELEVENTY_ENV === "production",
        target: "es2017",
      },
    }));
  5. 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 }}
  6. 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.

Notes

Previous: Custom PostCSS Config

Next: Deploy Under a Subpath