How do I bundle with deno (with javascript) instead of esbuild?

I have the following project structure:

backend/main.mts
common/util.ts         # imported by both frontend and backend
frontend/frontend.mts  # statically depends on e.g. threejs
frontend/loader.mts    # dynamically depends on frontend.mts

backend/main.mts
common/util.ts         # imported by both frontend and backend
frontend/frontend.mts  # statically depends on e.g. threejs
frontend/loader.mts    # dynamically depends on frontend.mts

which produce:

static/build/frontend.mjs   # loaded by loader.mjs via `import("frontend.mjs")`
static/build/loader.mjs     # loaded in index.html via <script src="loader.mjs">

static/build/frontend.mjs   # loaded by loader.mjs via `import("frontend.mjs")`
static/build/loader.mjs     # loaded in index.html via <script src="loader.mjs">

I would like to create two bundles:
1. loader.mjs which contains both 'static' dependencies, those imported like:

import "threejs"
import "qrcode-generator"

import "threejs"
import "qrcode-generator"

and a dynamically imported frontend (hot-reloaded manually) like:

import(`frontend.mjs?t=${Date.now}`).then(...)

import(`frontend.mjs?t=${Date.now}`).then(...)

2. frontend.mjs which is not really a bundle but is frontend.mts de-typescripted [+minified for production]
* frontend.mjs also does

import * as THREE from "threejs"

import * as THREE from "threejs"

but I want this to be marked as external when "bundling" because it will already be present in the loader.mjs bundle
* the result is that a small frontend.mjs is dynamically reloaded by loader.mjs but the common dependencies are not hot reloaded

The end result is that I have:
* loader.mjs containing the frontend-hotloader and common dependencies loaded in the html via <script>
* frontend.mjs which will be hot reloaded

I'm not sure how to do this with Deno or whether it's even the right tool. My key requirements are:
* the frontend should not reload its dependencies when hot-reloading (since the loader.mjs bundle should already contain them)
* bundling should be almost as fast as esbuild (i.e. instant, pretty much)
* it should not be a PITA

Thank you for reading this far and any advice is appreciated!
Ell

How do I bundle with deno (with javascript) instead of esbuild?

I have the following project structure:

backend/main.mts
common/util.ts         # imported by both frontend and backend
frontend/frontend.mts  # statically depends on e.g. threejs
frontend/loader.mts    # dynamically depends on frontend.mts

backend/main.mts
common/util.ts         # imported by both frontend and backend
frontend/frontend.mts  # statically depends on e.g. threejs
frontend/loader.mts    # dynamically depends on frontend.mts

which produce:

static/build/frontend.mjs   # loaded by loader.mjs via `import("frontend.mjs")`
static/build/loader.mjs     # loaded in index.html via <script src="loader.mjs">

static/build/frontend.mjs   # loaded by loader.mjs via `import("frontend.mjs")`
static/build/loader.mjs     # loaded in index.html via <script src="loader.mjs">

I would like to create two bundles:
1. loader.mjs which contains both 'static' dependencies, those imported like:

import "threejs"
import "qrcode-generator"

import "threejs"
import "qrcode-generator"

and a dynamically imported frontend (hot-reloaded manually) like:

import(`frontend.mjs?t=${Date.now}`).then(...)

import(`frontend.mjs?t=${Date.now}`).then(...)

2. frontend.mjs which is not really a bundle but is frontend.mts de-typescripted [+minified for production]
* frontend.mjs also does

import * as THREE from "threejs"

import * as THREE from "threejs"

How do I bundle with deno (with javascript) instead of esbuild?

Similar Threads

How do I bundle with deno (with javascript) instead of esbuild?

Similar Threads

Similar Threads

Similar Threads