Bundler

A lightweight bundler that transpiles and bundles for the web.

Why Use Bundler

  • transpiles and bundles files
  • handles url imports
  • handles imports with and without extensions
  • does dynamic imports splitting to separate files
  • does smart splitting
  • --optimize option minifies javascript and css files
  • --watch option observes all dependencies and re-bundles on files changes
  • handles imports of css files and converts them to javascript modules
  • handles css @import statements
  • supports css postcss-preset-env stage 2 and nesting-rules by default

But there is deno bundle…

Deno offers deno bundle to transpile a file to a standalone module. This might work in some occations but is limited. Bundler works in a similar way to deno bundle but splits dynamic imports to separate files and injects paths. The --optimize option also allows for code minification with both javascript and css files. It also has a --watch option that observes all dependencies and re-bundles on files changes.

File extensions and url imports

Typescript as of today does throw an error if an import has a .ts extension or a url.

import { foo } from "bar.ts" // Typescript Error
import * as path from "https://deno.land/std/path/mod.ts"  // Typescript Error

Deno on the other hand does not allow the suspension of extensions.

import { foo } from "bar" // Deno Error

Bundler handles file extensions as well as url imports and uses the same cached files as deno does.

CLI

Installation

Bundler is available as a CLI.

deno install --unstable --allow-read --allow-write --allow-net --allow-env --name bundler https://deno.land/x/bundler/cli.ts

Info: You might need to specify --root /usr/local.

Usage

bundler bundle index.ts=index.js

Options

Option Description Default
-c, –config Load tsconfig.json configuration file {}
–out-dir Name of out_dir “dist”
-h, –help Prints help information
–importmap UNSTABLE: Load import map file {}
–optimize Minify source code false
-q, –quiet Suppress diagnostic output false
-r, –reload Reload source code false
–watch Watch files and re-bundle on change false

Bundler API

Bundler uses the Bundler API to transpile typescript files to javascript.

Usage

import { bundle } from "deno.land/x/bundler/mod.ts"

const inputMap = {
  "src/index.ts": `console.log("Hello World")`
}

const fileMap = {
  "src/index.ts": "dist/index.js"
}

const { outputMap, cacheMap, graph } = await bundle(inputMap, { fileMap })
for (const [output, source] of Object.entries(outputMap)) {
  await fs.ensureFile(output);
  await Deno.writeTextFile(output, source);
}

Smart splitting

What is smart splitting?

Bundler automatically analyzes the dependency graph and splits dependencies from a bundle into a separate files, if the code is used in different entry points. This

  • allows bundle files to share code
  • allows bundle files to import other bundle files
  • makes multiple bundle files smaller, because they will not contain the same code multiple times

CSS imports

CSS is native to browsers and bundler therefore focuses on making css usage really easy. It supports postcss-preset-env with stage 2 features and nesting-rules enabled so you can use the latest css features out of the box. You can import css files directly in your typescript files. Bundler will convert the css file into a javascript module with a default string export.

/* src/styles.css */
article {
  & > p {
    color: red;
  }
}
/* src/index.ts */
import styles from "./styles.css"
console.log(styles) // article > p { color: red; }

Examples

Unstable

This module is likely to change in the future. Do not use in production!