Skip to main content
Deno 2 is finally here 🎉️
Learn more

Bundler

Donate Donate

Bundler

About

Bundler is a zero configuration bundler with the web in mind.

Goals

  • Webplatform and Deno are the source of truth
  • Embracement the webplatform and typescript
  • Embrace the future (no legacy feature support)
  • No configuration setup
  • Allow flexible and modular usage of bundler API and CLI

Features

  • smart splits dependencies
  • handles top level await
  • typescript and javascript
    • handles static import and export statements
    • handles dynamic import() statements
    • handles fetch() statements
    • handles WebWorker imports
    • handles ServiceWorker imports
  • html
    • handles <link>, <script>, <style> and <img> tags
    • handles style attributes
    • handles webmanifest files
  • css
    • handles css @import statements
    • supports postcss-preset-env stage 2 and nesting-rules by default
  • dev tools
    • built in code optimization and minification with --optimize option
    • built in file watcher with --watch option
    • Separate dev server CLI
    • Separate spa dev server CLI

Smart Splitting

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

Installation

Bundler

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

Dev Server

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

SPA Dev Server

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

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

Usage

Bundler

CLI

bundler bundle index.html=index.html

This will analyze the entry file index.html and its dependencies, generate bundles and write the output files into an directory (default dist).

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
–reload Reload everything
–reload=index.ts Reload only standard modules
–reload=a.ts,b.ts Reloads specific modules		 false
–watch Watch files and re-bundle on change false

API

import { Bundler, defaultPlugins } from "https://deno.land/x/bundler/mod.ts";
const plugins = defaultPlugins(); // default plugins
const bundler = new Bundler(plugins);

const input = "src/index.html";
const outputMap = { [input]: "index.html" };

const { bundles } = await bundler.bundle([input], { outputMap });
Advanced Example 
import { Bundler } from "https://deno.land/x/bundler/mod.ts";

const input = "src/index.html";
const outputMap = { [input]: "index.html" };

const plugins = [ … ]; // custom plugins
const bundler = new Bundler(plugins);

const graph = await bundler.createGraph([input], { outputMap });
const chunks = await bundler.createChunks(inputs, graph);
const bundles = await bundler.createBundles(chunks, graph);

Dev Server

CLI

deno run --unstable --allow-read --allow-write --allow-net --allow-env https://deno.land/x/bundler/server_cli.ts index.html

This will analyze the entry file index.html and its dependencies, generate bundles and start a server that serves the bundled project.

API

import { Server } from "https://deno.land/x/bundler/mod.ts";

const input = "src/index.html";
const outputMap = { [input]: "index.html" };

const server = new Server();
await server.bundle([input], { outputMap });
await server.listen({ port: 8000 });

SPA Dev Server

CLI

deno run --unstable --allow-read --allow-write --allow-net --allow-env https://deno.land/x/bundler/spa_server_cli.ts index.html

This will analyze the entry file index.html and its dependencies, generate bundles and start a server that serves the bundled project. It will serve the entry file index.html if a file for a GET request does not exist.

Examples

Bundler API

Server CLI

SPA Server CLI

Unstable

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