Bruno Skvorc•4w ago

Without using a framework, how do I compile natively supported TS in Deno into static JS?

If I am not mistaken, this used to be possible with the built in bundler which is now gone. How do we go from dev-time TS to prod-time JS without a framework or custom transpiler in the middle? Basically, help me get from deno init to deno "prod" - how to turn those main.ts files into runnable js?

4 Replies

Fifth-Normal-Form•4w ago

You could try a simple util like https://jsr.io/@ndh/build Or, even better; roll-your-own! Create the following module -- builder.ts

import { denoPlugins } from "jsr:@luca/esbuild-deno-loader@^0.11.0";
import { build, stop } from "npm:esbuild@0.24.0";

/** builds and bundles an entrypoint into a single ESM output. */
export async function buildIt() {
    await build({
        plugins: [...denoPlugins({})],
        entryPoints: ["./src/main.ts"],
        outfile: "./dist/bundle.js",
        bundle: true,
        minify: false,
        keepNames: true, 
        banner: { js: `// @ts-nocheck
// deno-lint-ignore-file`},
        format: "esm"
    }).catch((e: Error) => console.info(e));
    stop();
}

buildIt()
console.log('bundle.js was built!')

import { denoPlugins } from "jsr:@luca/esbuild-deno-loader@^0.11.0";
import { build, stop } from "npm:esbuild@0.24.0";

/** builds and bundles an entrypoint into a single ESM output. */
export async function buildIt() {
    await build({
        plugins: [...denoPlugins({})],
        entryPoints: ["./src/main.ts"],
        outfile: "./dist/bundle.js",
        bundle: true,
        minify: false,
        keepNames: true, 
        banner: { js: `// @ts-nocheck
// deno-lint-ignore-file`},
        format: "esm"
    }).catch((e: Error) => console.info(e));
    stop();
}

buildIt()
console.log('bundle.js was built!')

Just modify the entrypoints and outfile to suit your needs. You can also specify to bundle or not, and minification or not. Add the above module to you project root. Then just to run:

deno run -A --quiet builder.ts

You could also add this as a task in deno.json called build. For a working example see: https://nhrones.github.io/Hot_BuenoCache/ Click the see-the-code link on the bottom left of the page!
Or just go to the repo:
https://github.com/nhrones/Hot_BuenoCache

Bruno SkvorcOP•3w ago

Beautiful, thanks 🙂 Let me check this out

Mr. Wayne 🇵🇸•3w ago

Just use EsBuild. It's great. Deno don't have any options to compile ts into js.

Bruno SkvorcOP•3w ago

yeah this works great