or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

cli-interface.mdindex.mdprogrammatic-api.md
tile.json

tessl/npm-microbundle

Zero-configuration bundler for tiny JavaScript libraries, powered by Rollup.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/microbundle@0.15.x

To install, run

npx @tessl/cli install tessl/npm-microbundle@0.15.0

index.mddocs/

Microbundle

Microbundle is a zero-configuration bundler for tiny JavaScript libraries, powered by Rollup. It automatically generates multiple output formats (CommonJS, ESM, UMD, and modern) from a single source with minimal setup, supporting TypeScript, JSX, CSS processing, and modern JavaScript features out of the box.

Package Information

  • Package Name: microbundle
  • Package Type: npm
  • Language: JavaScript (with TypeScript support)
  • Installation: npm install -D microbundle

Core Imports

For programmatic usage:

import microbundle from "microbundle";

CommonJS:

const microbundle = require("microbundle");

Basic Usage

CLI Usage (Most Common)

Add to your package.json:

{
  "source": "src/index.js",
  "main": "dist/index.js",
  "module": "dist/index.esm.js",
  "scripts": {
    "build": "microbundle",
    "dev": "microbundle watch"
  }
}

Build your library:

npm run build

Programmatic Usage

import microbundle from "microbundle";

// Basic build
const result = await microbundle({
  entries: ["src/index.js"],
  format: "modern,esm,cjs,umd",
  output: "dist/bundle.js"
});

console.log(result.output);

Architecture

Microbundle is built around several key components:

  • Core Bundler: Main microbundle() function that orchestrates the build process using Rollup
  • CLI Interface: Command-line tool with build and watch commands and extensive configuration options
  • Plugin System: Integrated Rollup plugins for Babel, TypeScript, PostCSS, Terser, and more
  • Multi-Format Output: Automatic generation of CommonJS, ESM, UMD, and modern JavaScript bundles
  • Zero Configuration: Smart defaults that work without configuration files

Capabilities

Programmatic API

Core bundling functionality for integrating microbundle into build scripts or other tools. Provides complete control over bundling options and returns detailed build results.

/**
 * Bundle JavaScript modules with zero configuration
 * @param inputOptions - Configuration options for bundling
 * @returns Promise resolving to build results
 */
function microbundle(inputOptions: MicrobundleOptions): Promise<MicrobundleResult>;

interface MicrobundleOptions {
  /** Entry module paths (default: auto-detected from package.json source field) */
  entries?: string[];
  /** Output formats: 'modern', 'esm', 'cjs', 'umd', 'iife' (default: 'modern,esm,cjs,umd') */
  format?: string;
  /** Alternative property name for format */
  formats?: string;
  /** Output directory or file path (default: from package.json main/module fields) */
  output?: string;
  /** Enable watch mode for development (default: false) */
  watch?: boolean;
  /** Target environment: 'web' or 'node' (default: 'web') */
  target?: "web" | "node";
  /** Enable/disable Terser compression (default: true for web, false for node) */
  compress?: boolean;
  /** Generate source maps: true, false, or 'inline' (default: true) */
  sourcemap?: boolean | string;
  /** Working directory (default: process.cwd()) */
  cwd?: string;
  /** External dependencies: 'none' or comma-separated module names */
  external?: string;
  /** Global variable mappings for UMD builds */
  globals?: string;
  /** Build-time constant definitions */
  define?: string;
  /** Module import aliases */
  alias?: string;
  /** Enforce strict mode */
  strict?: boolean;
  /** UMD global name */
  name?: string;
  /** Show raw byte sizes */
  raw?: boolean;
  /** JSX pragma function */
  jsx?: string;
  /** JSX fragment pragma */
  jsxFragment?: string;
  /** JSX import source */
  jsxImportSource?: string;
  /** TypeScript config file path */
  tsconfig?: string;
  /** Generate TypeScript declarations */
  generateTypes?: boolean;
  /** CSS output mode */
  css?: string;
  /** CSS modules configuration */
  "css-modules"?: string;
  /** Bundle web workers */
  workers?: boolean;
  /** Generate bundle visualization */
  visualize?: boolean;
  /** Use package.json main entries */
  "pkg-main"?: boolean;
  /** Watch mode callbacks */
  onStart?: (event: any) => void;
  onBuild?: (event: any) => void;
  onError?: (event: any) => void;
}

interface MicrobundleResult {
  /** Build output message with file sizes */
  output: string;
  /** Watch mode file watchers (when watch: true) */
  watchers?: Record<string, any>;
}

Programmatic API

CLI Interface

Command-line interface providing build and watch commands with extensive configuration options. Designed for package.json scripts and terminal usage.

# Build command (default)
microbundle [entries...] --format esm,cjs,umd --output dist

# Watch command for development
microbundle watch [entries...] --sourcemap

# Common options
--target web|node        # Target environment
--compress               # Enable/disable compression  
--external dependencies  # Mark dependencies as external
--name GlobalName        # UMD global name
--tsconfig path         # Custom TypeScript config

CLI Interface

Output Formats

Microbundle generates multiple optimized bundle formats:

  • modern: Modern JavaScript bundle for browsers supporting ES modules (smaller, faster)
  • esm: Standard ECMAScript modules with broad compatibility
  • cjs: CommonJS format for Node.js environments
  • umd: Universal Module Definition for browser globals and AMD
  • iife: Immediately Invoked Function Expression for direct browser usage

TypeScript Support

Built-in TypeScript support with zero configuration:

  • Automatic .d.ts declaration file generation
  • Works with or without tsconfig.json
  • Mixed JavaScript and TypeScript codebases supported
  • Custom TypeScript configuration via --tsconfig option

Types

interface MicrobundleResult {
  /** Build output message with file information */
  output: string;
  /** File watchers for watch mode */
  watchers?: Record<string, any>;
}

// Utility types for advanced usage
type OutputFormat = "modern" | "esm" | "cjs" | "umd" | "iife";
type TargetEnvironment = "web" | "node";
type SourceMapOption = boolean | "inline";
type CSSOutputMode = "inline" | "external";