Deno bundle replacement

Question

Could you please help me with replacing deprecetad deno bundle command?

I wanted to change it for esbuild, but running a command:

./node_modules/.bin/esbuild --bundle lib/commands/abc/main.ts --outfile=mod.abc.ts

give me an error:

[ERROR] Top-level await is currently not supported with the "iife" output format

I have tried also with --format=cjs and --format=esm option, but the output still is different than deno bundle output. eg. there are not imports included.

How should I use it?

Or maybe can you help me with other option? The goal is to quickly remove deno bundle without main code modification.

Reservation

Answer 1

Straightforward solution to bundle Deno Typescript for the browser in 2024:

1. Create a new file: bundle.ts

Make sure to update entryPoints and outdir.

import * as esbuild from "https://deno.land/x/[email protected]/mod.js";
import { denoPlugins } from "jsr:@luca/[email protected]";

esbuild.build({
  plugins: [...denoPlugins()],
  entryPoints: ["<input>/<dir>/script.ts"],
  outdir: "<output>/<dir>/",
  bundle: true,
  platform: "browser",
  format: "esm",
  target: "esnext",
  minify: true,
  sourcemap: true,
  treeShaking: true,
});
await esbuild.stop();

2. Run it!

deno run --allow-read --allow-write --allow-env --allow-net --allow-run bundle.ts

You can create a deno task to make running this easier. Add this to your deno.jsonc:

{
  "tasks": {
    "bundle": "deno run --allow-read --allow-write --allow-env --allow-net --allow-run bundle.ts"
  }
}

Helpful resources:

• esbuild (git)
  • .build()
  • entryPoints: []
  • outdir
  • bundle: true
  • platform: "browser"
  • format: "esm"
  • target: "esnext"
  • minify: true
  • sourcemap: true
  • treeShaking: true
• esbuild-deno-loader/denoPlugins (deno.land/x) (git)
  • This is necessary if your input .ts files include import statements with Deno module specifiers like file:, https:, data:, npm:, and/or jsr:.

---

For more context, check out my post on this topic: https://www.toddgriffin.me/blog/how-to-bundle-deno-typescript-for-the-browser

Acetylate

Answer 2

The esbuild CLI interface does not support bundling of Deno TypeScript module code (at least when using remote imports — e.g. https://deno.land/...).

The JavaScript API for esbuild can handle those imports by using a plugin that's maintained by one of the Deno core team members: https://github.com/lucacasonato/esbuild_deno_loader

The readme for the plugin explains its usage, and the JavaScript API for esbuild is extensively documented as well: https://esbuild.github.io/

Tops

Answer 3

There are three recommended replacements for deno bundle in in the current Deno version v1.32.3:

Warning "deno bundle" is deprecated and will be removed in the future.
Use alternative bundlers like "deno_emit", "esbuild" or "rollup" instead.

See:

• https://github.com/denoland/deno_emit
• https://esbuild.github.io/
• https://rollupjs.org/

If esbuild doesn't work then you may check the other ones. Also, esbuild has a project deno-esbuild that might be relevant:

• https://github.com/esbuild/deno-esbuild

Rollup has some instructions abut Deno usage:

• https://rollupjs.org/tools/#deno

deno_emit is the most Deno-centric from those three - it has similar functionality as the removed Deno.emit() but as a user loadable module, to avoid including its code in the main Deno binary. In principle it should be the most similar to the deno bundle but I'm not sure how stable it is already.

Kathernkatheryn