EllE
Deno•5mo ago•
9 replies
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
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">

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

import "threejs"
import "qrcode-generator"

and a dynamically imported frontend (hot-reloaded manually) like: 
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" 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
Was this page helpful?