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.
Webmentions
No Comments Yet