Bundler

A lightweight bundler that transpiles and bundles deno typescript files for the web.

Why Use Bundler

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 bundles deno syntax files (url imports, .ts extensions) for the web.

Copare to 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.

Features

• transpiles deno typescript to javascript for the web
• bundles file content and imports into one file
• splits dynamic imports to separate files
• supports css imports into typescript by default

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

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 outputMap = {
  "src/index.ts": "dist/index.js"
}

const options = {
  outDir
}

const fileMap = await bundle(inputMap, outputMap, options)

CSS imports

Bundler CLI supports css imports by default. 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.

Before

/* styles.css */
article {
  & p {
    color: #333;
  }
}

import styles from "styles.css"
console.log(styles) // div { background: red; }

After

/* 380B7B38760DD442E897EB0164C58F6A17DA966CCACA6318017A468C163979B1.js */
export default `article p { color: #333; }`

import styles from "./380B7B38760DD442E897EB0164C58F6A17DA966CCACA6318017A468C163979B1.js"
console.log(styles) // div { background: red; }

Examples

• Hello World
• css import
• lit-element
• React
• dynamic import
• top level await
• custom bundler

Proof of concept

This is a proof of concept registry. Do not use in production!