Skip to main content

Bundler

Donate Donate

Bundler

About

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

  • 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
  • CLI
    • built in code optimization and minification with --optimize option
    • built in file watcher with --watch option

Installation

Bundler 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 CLI

bundler bundle index.html=index.html
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

Dev Server CLI

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

SPA Dev Server CLI

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

API

Bundler Example 

import { createBundler } from "https//deno.land/x/bundler/mod.ts";
const bundler = createBundler(); // create bundler instance with default plugins

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

const { bundles } = await bundler.bundle([inputs], { outputMap });

Advanced Bundler Example 

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

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

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

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

Bundler Server 

import { BundlerServer } from "https//deno.land/x/bundler/mod.ts";
const server = new BundlerServer();
await server.listen({ port: 8000 });

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.

Examples

Bundler CLI

Bundler API

Unstable

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