Microbundle — Zero-Configuration Bundler for Tiny JavaScript Modules

Introduction

Microbundle is a zero-configuration bundler purpose-built for authoring JavaScript and TypeScript libraries. It reads your package.json fields to determine output formats, automatically handles TypeScript, JSX, and modern syntax, and produces optimized CJS, ESM, and UMD bundles in one command.

What Microbundle Does

• Builds libraries into ESM, CJS, and UMD formats from a single source
• Reads main, module, and exports fields from package.json to determine outputs
• Handles TypeScript and JSX without additional configuration
• Minifies output with Terser and generates source maps
• Generates TypeScript declaration files automatically

Architecture Overview

Microbundle wraps Rollup with a set of carefully chosen defaults. It reads your package.json to determine entry points and output targets, configures Rollup plugins for Babel transpilation, TypeScript compilation, and Terser minification, then runs the Rollup build. The result is multiple output bundles optimized for different module systems, all from a single invocation with no config file required.

Self-Hosting & Configuration

• Install as a dev dependency: npm install -D microbundle
• Set source in package.json to your entry point (e.g., src/index.ts)
• Set main (CJS), module (ESM), and optionally unpkg (UMD) output paths
• Run microbundle or microbundle watch for development
• Override defaults via CLI flags: --target node for Node-only builds, --css inline for CSS handling

Key Features

• Truly zero-config: reads everything from package.json
• Multi-format output (ESM, CJS, UMD) in one build
• Built-in TypeScript support with declaration file generation
• CSS Modules support out of the box
• Watch mode with fast incremental rebuilds

Comparison with Similar Tools

• tsup — Similar zero-config bundler using esbuild; faster builds but fewer output format options
• Rollup — The engine under Microbundle; requires manual configuration for plugins and outputs
• esbuild — Extremely fast bundler; needs manual config for multi-format library output
• Vite (library mode) — Rollup-based with HMR for apps; Microbundle is library-focused and simpler

FAQ

Q: Does Microbundle support React components? A: Yes. Microbundle handles JSX out of the box. Use --jsx React.createElement or the automatic JSX runtime with --jsxImportSource react.

Q: Can I customize the Babel or Rollup configuration? A: Microbundle intentionally limits configuration. For advanced needs, you can use CLI flags like --external, --globals, and --alias. For full control, consider using Rollup or tsup directly.

Q: How small are the output bundles? A: Microbundle applies Terser minification and tree-shaking by default. Output size depends on your source code, but the tool adds minimal overhead.

Q: Does Microbundle support CSS? A: Yes. It handles CSS Modules and plain CSS imports, optionally inlining styles or extracting them to separate files.

Sources

• GitHub Repository
• npm Package