Skip to main content
The deno bundle command bundles your project’s modules into optimized JavaScript files using esbuild.

​
Usage

deno bundle [OPTIONS] <ENTRYPOINTS>...

​
Basic Examples

# Bundle a single file
deno bundle main.ts

# Bundle with output file
deno bundle --output bundle.js main.ts

# Bundle multiple entrypoints
deno bundle main.ts worker.ts

# Bundle to directory
deno bundle --outdir dist/ main.ts

# Bundle with watch mode
deno bundle --watch main.ts

​
Output Options

​
--output
string
Output file path (single entrypoint only)
deno bundle --output dist/bundle.js main.ts
​
--outdir
string
Output directory path
deno bundle --outdir dist/ main.ts worker.ts

​
Format Options

​
--format
string
Output format (esm, cjs, iife)
# ES modules (default)
deno bundle --format esm main.ts

# CommonJS
deno bundle --format cjs main.ts

# Immediately Invoked Function Expression
deno bundle --format iife main.ts
​
--platform
string
Target platform (deno, node, browser, neutral)
# For Deno runtime
deno bundle --platform deno main.ts

# For Node.js
deno bundle --platform node main.ts

# For browsers
deno bundle --platform browser main.ts

​
Optimization Options

​
--minify
boolean
Minify the output
deno bundle --minify main.ts
​
--keep-names
boolean
Keep function and class names when minifying
deno bundle --minify --keep-names main.ts
​
--code-splitting
boolean
Enable code splitting for multiple entrypoints
deno bundle --code-splitting --outdir dist/ main.ts worker.ts

​
External Dependencies

​
--external
string
Mark packages as external (not bundled)
# Single external
deno bundle --external react main.ts

# Multiple externals
deno bundle --external=react,react-dom main.ts
​
--packages
string
How to handle npm packages (bundle, external)
# Bundle npm packages (default)
deno bundle --packages bundle main.ts

# Keep npm packages external
deno bundle --packages external main.ts

​
Source Maps

​
--sourcemap
string
Generate source maps (linked, inline, external, none)
# Linked source maps (default)
deno bundle --sourcemap linked main.ts

# Inline source maps
deno bundle --sourcemap inline main.ts

# External source map file
deno bundle --sourcemap external main.ts

# No source maps
deno bundle --sourcemap none main.ts

​
Advanced Options

​
--inline-imports
boolean
Inline dynamic imports
deno bundle --inline-imports main.ts

​
Watch Mode

​
--watch
boolean
Watch for changes and rebuild automatically
deno bundle --watch --outdir dist/ main.ts

​
Examples

​
Simple Library Bundle

// lib.ts
export function greet(name: string) {
  return `Hello, ${name}!`;
}

export class Counter {
  private count = 0;
  
  increment() {
    this.count++;
  }
  
  getCount() {
    return this.count;
  }
}

# Bundle as ES module
deno bundle --format esm --output dist/lib.js lib.ts

# Bundle and minify
deno bundle --format esm --minify --output dist/lib.min.js lib.ts

​
Browser Bundle

// browser-app.ts
import { render } from "npm:preact@10";

function App() {
  return <h1>Hello, Browser!</h1>;
}

render(<App />, document.body);

# Bundle for browser with IIFE format
deno bundle \
  --platform browser \
  --format iife \
  --minify \
  --output public/app.js \
  browser-app.ts

​
Node.js Compatible Bundle

// node-compat.ts
import express from "npm:express@4";

const app = express();
app.get("/", (req, res) => res.send("Hello!"));
app.listen(3000);

# Bundle for Node.js
deno bundle \
  --platform node \
  --format cjs \
  --packages external \
  --output dist/server.cjs \
  node-compat.ts

​
Multiple Entrypoints with Code Splitting

# Bundle multiple entries with shared chunks
deno bundle \
  --code-splitting \
  --format esm \
  --outdir dist/ \
  src/main.ts \
  src/worker.ts \
  src/admin.ts

​
Development vs Production

# Development build with source maps
deno bundle \
  --format esm \
  --sourcemap linked \
  --outdir dist/dev/ \
  main.ts

# Production build minified
deno bundle \
  --format esm \
  --minify \
  --keep-names \
  --sourcemap external \
  --outdir dist/prod/ \
  main.ts

​
HTML Entrypoint

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="./main.ts"></script>
</body>
</html>

# Bundle HTML file (processes script tags)
deno bundle --outdir dist/ index.html

​
Watch Mode for Development

# Auto-rebuild on changes
deno bundle \
  --watch \
  --format esm \
  --sourcemap linked \
  --outdir dist/ \
  src/main.ts

​
Configuration

Bundling options can be configured in deno.json: 
{
  "bundle": {
    "format": "esm",
    "platform": "browser",
    "minify": true,
    "sourcemap": "linked",
    "external": ["react", "react-dom"]
  }
}

​
Output Structure

When using --outdir, the bundler creates: 
dist/
├── main.js          # Main bundle
├── main.js.map      # Source map
├── chunk-abc123.js  # Shared chunk (if code splitting)
└── worker.js        # Worker bundle (if multiple entries)

Build docs developers (and LLMs) love

Get started for freeTalk to us