Inline local JS imports

[dave-db]

Is it possible to configure a transform to inline the content of other local files imported from an included js chunk?

e.g.

// js/main.js
import env from '../_data/env.js';

// some js code that references env values

<!-- layouts/base.njk -->
...
<script type="module">{% include "js/main.js" %}</script>
...

When the bundles are processed, every page includes the main.js, which (at runtime, in the browser) tries to import _data/env.js and errors.

I've had a go at adding a transform to the .addBundle('js') call to use a bundler to inline imports, but of course they're being run against the final page path (eg /en/index.njk), so resolving paths is complex, and maybe this is the wrong place to be doing it?

Either way, it would be great if there was a quick way to handle local imports so config and constants can be shared around without needing to copy and paste. Have I missed something obvious?

[zachleat]

Yeah, you’ll want to use a heavier featured bundler to accomplish this functionality. Use a bundle transform and feed that content through something like esbuild.

Here’s a starting point for that: https://www.11ty.dev/docs/plugins/bundle/#postprocess-the-bundle-output