I built a tool relevant to this the other day. I was fed up of how hard it was to download ES modules from a CDN and store them locally so I could build apps without that CDN dependency, so I made this:

    pip install download-esm
    download-esm @observablehq/plot

This downloads the ESM version of Observable Plot from the jsDelivr CDN, figures out its dependencies, downloads them as well (40 files total!) and rewrites their imports to be local, not CDN paths.

More details here: https://simonwillison.net/2023/May/2/download-esm/

I'm now considering adding import maps support: https://github.com/simonw/download-esm/issues/4

If you're happy with a single bundled file, another option is:

    deno bundle 'https://esm.sh/@observablehq/plot' > plot.js

My browser development workflow looks somewhat like the following:

Imports / versions in importmap.json:

    {
      "imports": {
        "plot": "https://esm.sh/@observablehq/[email protected]"
      }
    }

Code in app.js:

    import * as Plot from "plot";
    const plot = Plot.rectY({length: 10000}, Plot.binX({y: "count"}, {x: Math.random})).plot();
    const div = document.querySelector("#myplot");
    div.append(plot);

For development use dev.html:

Then you can then bundle with:

    deno bundle --import-map=importmap.json app.js > bundle.js

And have as your prod.html:

Note that `deno bundle` is deprecated. You can almost replace it with esbuild but it currently lacks builtin support for import maps:

    deno run --allow-all https://deno.land/x/[email protected]/mod.js --bundle app.js --outfile=bundle.js. # errors, see: https://github.com/evanw/esbuild/issues/2230

I'm really looking forward to the ECMAScript proposal on Type Annotations making it into browsers some days as this would effectively unlock transpiler free typescript development, leaving just a simple optional bundling step for production.

https://devblogs.microsoft.com/typescript/a-proposal-for-typ...

https://github.com/tc39/proposal-type-annotations