Bundler

A bundler that transpiles and bundles deno code for the web.

Why Use Bundler

no configuration setup
handles relative, absolute and url imports with and without file extension
handles dynamic imports
smart splits dependencies
--optimize option minifies javascript and css files
--watch option observes all dependencies and re-bundles on files changes
handles typescript and javascript files
handles html files and src and href imports
handles css files and css @import statements
supports css postcss-preset-env stage 2 and nesting-rules by default
handles json and webmanifest files
handles image files

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 is created with the web in mind.

Key differences

Bundler supports css, html, json, webmanifest and image files
Bundler splits dynamic imports into separate files and injects paths. It splits code that is imported in multiple files so it is only loaded once.
The --optimize option allows for code minification.
The --watch option observes all dependencies and re-bundles on files changes.

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 <FILE>	Load tsconfig.json configuration file	{}
–out-dir <DIR>	Name of out_dir	“dist”
-h, –help	Prints help information
–import-map <FILE>	UNSTABLE: Load import map file	{}
–optimize	Optimize source code	false
-L, –log-level	Set log level [possible values: debug, info]	debug
-q, –quiet	Suppress diagnostic output	false
-r, –reload	Reload source code	false
–watch	Watch files and re-bundle on change	false

Smart splitting

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

Plugins

TypescriptPlugin

Bundler uses TypescriptPlugin by default. It handles .ts, .tsx, .js and .jsx files. This plugin handles modules relative and absolute paths with and without extensions as well as urls.

JsonPlugin

Bundler uses JsonPlugin by default. It handles .json files. This plugin will convert the file into a javascript module with a default string export.

/* src/data.json */
{
  "foo": "bar"
}

/* src/index.ts */
import data from "./data.json"
console.log(data) // { "foo": "bar" }

Info JSON modules is currently at stage 2. This plugin might change or even will become obsolete once the next stage is reached.

CssPlugin

Bundler uses CssPlugin by default. It handles .css files. This plugin will convert the file into a javascript module with a default string export. 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.

/* src/styles.css */
article {
  & > p {
    color: red;
  }
}

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

HtmlPlugin

Bundler uses HtmlPlugin by default. It handles .html files.

WebmanifestPlugin

Bundler uses WebmanifestPlugin by default. It handles webmanifest files that are loaded in a html file. This plugin handles the icons that are declared in the manifest file.

// src/manifest.json
{
  "name": "My App",
  "short_name": "App",
  "icons": [
    {
      "src": "images/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "background_color": "#000000",
  "display": "standalone",
  "theme_color": "#ffffff"
}

<!-- src/index.html -->
<html>
  <head>
    <link rel="manifest" href="manifest.json">
  </head>
  <body>
  </body>
</html>

ImagePlugin

Bundler uses ImagePlugin by default. It handles .png, .jpg, .jpeg and .ico files.

SvgPlugin

Bundler uses SvgPlugin by default. It handles .svg files.

Examples

Hello world

hello world

Components

Other

Unstable

This module requires deno to run with the --unstable flag. Itis likely to change in the future.