11ty logo

Esbuild only needs to run once on each build as it's just bundling our page javascript.
(at time of writing this is just a darkmode theme switcher).

Why Use esbuild #

Our current build tools for the web are 10-100x slower than they could be.
The main goal of the esbuild bundler project is to bring about a new era of build tool performance, and create an easy-to-use modern bundler along the way.


esbuild - An extremely fast bundler for the web

Run esbuild Before Build #

Run esbuild before eleventy by using eleventy.before.

  // Run esbuild before anything else (using bundle for js)
  eleventyConfig.on('eleventy.before', async () => {
    await esbuild.build({
      entryPoints: ['src/_scripts/darkmode.js'],
      outdir: 'src/_assets/js',
      minify: true,
      sourcemap: false,
    })
  })

Eleventy Documentation - Configuration - Events - eleventy.before

Reference Javascript #

I am using a eleventy-plugin-bundle for inline script tags but there are lots of other options.

{% js %}{% include "src/_assets/js/darkmode.js" %}{% endjs %}
<script type="module">{% getBundle "js" %}</script>

If you are not using eleventy-plugin-bundle you could use.

{% set js %}
{% include "src/_assets/js/darkmode.js" %}
{% endset %}
<script type="module">{{ js | safe }}</script>

Ignore Output #

Eslint will complain about minified js so we will need to add the output to ignorePatterns in .eslintrc.js.

  ignorePatterns: [
    ...
    'src/_assets/**/*',
  ],

We also don't want to upload the output to github so we need to add the path to .gitignore.

# esbuild output
src/_assets/js/

Source Code #

The source for my 11ty blog is available on github.

11ty-equk