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
- Baseline installed and loaded; assets pipeline enabled.
- Default JS entry at
src/assets/js/index.jsexists. package.jsonwith"type": "module"and scripts (dev,build).
Steps
-
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.jsfiles undersrc/assets/js/. Each folder becomes a bundle indist/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.jsReference 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
es2020and injects a<script>…</script>tag. -
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", }, })); -
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.jsfor bundled output and size. - For inlined scripts, view page source and confirm the bundled code is present.
- Dev:
Notes
- Baseline’s default JS bundling: any
index.jsundersrc/assets/js/**/is bundled, minified, and targeted toes2020. - Use inline only for small helpers; keep larger bundles as external files for caching.
- When you override globally, you own updates to targets/minification; revisit if you change browser support.
- If you often need different inline settings, write your own filter that calls
inlineESbuildwith preset options, then use that filter instead of repeating the options object.
Previous: Custom PostCSS Config
Next: Deploy Under a Subpath