CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-microbundle

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

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

cli-interface.mddocs/

CLI Interface

The microbundle command-line interface provides build and watch commands with extensive configuration options for bundling JavaScript libraries from the terminal or package.json scripts.

Capabilities

Commands

Microbundle provides two main commands for building and developing libraries.

# Build command (default) - Build once and exit
microbundle [entries...] [options]
microbundle build [entries...] [options]

# Watch command - Rebuilds on any source file change
microbundle watch [entries...] [options]

Usage Examples:

# Basic build using package.json configuration
microbundle

# Build specific entry files
microbundle src/index.js src/cli.js

# Build with custom output formats
microbundle --format esm,cjs,umd

# Development mode with watch
microbundle watch --sourcemap

# Node.js library build
microbundle --target node --format cjs --no-compress

# Custom output directory
microbundle --output dist/bundle.js

# Build with external dependencies
microbundle --external react,lodash --globals react=React,lodash=_

Global Options

Configuration options available for both build and watch commands.

# Entry and Output Options
--entry, -i, -e <files>       # Entry module(s) (comma-separated or multiple flags)
--output, -o, -d <path>       # Directory or file path for build output

# Format and Target Options  
--format, -f <formats>        # Output formats: modern,esm,cjs,umd,iife (default: modern,esm,cjs,umd)*
--target <env>                # Target environment: web or node (default: web)

# * Default format includes 'modern' unless MICROBUNDLE_MODERN=false environment variable is set

# Dependency Options
--external <deps>             # External dependencies (comma-separated) or 'none'
--globals <mappings>          # Global variable mappings for UMD (e.g., react=React,jquery=$)

# Optimization Options
--compress                    # Enable Terser compression (default: true for web, false for node)
--no-compress                 # Disable compression explicitly
--strict                      # Enforce undefined global context and "use strict"

# Development Options
--watch, -w                   # Enable watch mode (rebuild on changes)
--sourcemap                   # Generate source maps (default: true)
--no-sourcemap                # Disable source maps
--raw                         # Show raw byte sizes instead of gzipped

# Build Customization
--define <definitions>        # Replace constants (e.g., API_KEY=1234,@assign=Object.assign)
--alias <mappings>            # Module import aliases (e.g., react=preact/compat)
--name <globalName>           # Global name for UMD builds
--cwd <directory>             # Working directory (default: current directory)

# TypeScript Options
--tsconfig <path>             # Path to custom TypeScript configuration
--generateTypes               # Generate TypeScript declaration files
--no-generateTypes            # Disable TypeScript declaration generation

# Styling Options
--css <mode>                  # CSS output mode: inline or external (default: external)
--css-modules <config>        # CSS modules configuration

# Advanced Options
--workers                     # Bundle web workers using off-main-thread
--visualize                   # Generate bundle composition visualization (stats.html)
--pkg-main                    # Use package.json main entries for output paths (default: true)
--no-pkg-main                 # Disable package.json main entry usage

# JSX Options
--jsx <pragma>                # JSX pragma function (default: h)
--jsxFragment <pragma>        # JSX fragment pragma (default: Fragment)  
--jsxImportSource <source>    # JSX import source for automatic runtime

# Help and Version
--version, -v                 # Display version number
--help, -h                    # Display help information

Package.json Integration

Microbundle automatically reads configuration from your package.json:

{
  "name": "my-library",
  "source": "src/index.js",
  "main": "dist/index.js",
  "module": "dist/index.esm.js",
  "unpkg": "dist/index.umd.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "build": "microbundle",
    "dev": "microbundle watch"
  },
  "files": ["dist", "src"]
}

Package.json Fields Used:

  • source: Entry file path
  • main: CommonJS output path
  • module: ESM output path
  • unpkg or umd:main: UMD output path
  • types or typings: TypeScript declarations path
  • exports: Modern export map support
  • name: Used for UMD global name generation
  • dependencies & peerDependencies: Auto-detected as external

Environment Variables

Microbundle respects certain environment variables:

# Control modern format inclusion
MICROBUNDLE_MODERN=false microbundle  # Disables modern format, uses only esm,cjs,umd
MICROBUNDLE_MODERN=true microbundle   # Enables modern format (default behavior)

# Set compression based on NODE_ENV (overrides target-specific defaults)
NODE_ENV=production microbundle   # Enables compression regardless of target
NODE_ENV=development microbundle  # Disables compression for faster builds

# Example: Development build with specific format
MICROBUNDLE_MODERN=false NODE_ENV=development microbundle --format esm,cjs

Output Formats

Detailed format specifications and their use cases:

# Modern format - optimized for modern browsers supporting ES modules
--format modern
# Outputs: *.modern.js - Preserves modern syntax, smaller bundles

# ECMAScript Modules - standard import/export syntax
--format esm  
# Outputs: *.esm.js or *.module.js - For bundlers and modern Node.js

# CommonJS - Node.js require/module.exports  
--format cjs
# Outputs: *.js or *.cjs - For Node.js and older bundlers

# Universal Module Definition - works everywhere
--format umd
# Outputs: *.umd.js - For browser globals, AMD, and CommonJS

# Immediately Invoked Function Expression - direct browser usage
--format iife
# Outputs: *.iife.js - Self-executing bundle for browser script tags

Advanced CLI Usage

Multi-entry builds:

# Build multiple entry points
microbundle src/index.js src/cli.js src/worker.js

# Using glob patterns (via package.json source field)
# package.json: "source": "src/*.js"
microbundle

Custom build pipelines:

# Library for browsers and Node.js
microbundle --format modern,esm,cjs --target web
microbundle src/node.js --format cjs --target node --output dist/node.js

# Development build with debugging
microbundle watch --sourcemap inline --no-compress --format esm

# Production build with optimization
microbundle --compress --no-sourcemap --visualize --format modern,esm,cjs,umd

TypeScript projects:

# Basic TypeScript build
microbundle src/index.ts --generateTypes

# Custom TypeScript configuration  
microbundle --tsconfig tsconfig.build.json --generateTypes

# Mixed JavaScript and TypeScript
microbundle src/index.js src/types.ts --generateTypes

React/JSX projects:

# React components with custom JSX pragma
microbundle --jsx React.createElement --jsxFragment React.Fragment

# Preact components
microbundle --jsx h --jsxFragment Fragment

# Modern automatic JSX runtime
microbundle --jsxImportSource react

Error Codes and Troubleshooting

Common CLI error scenarios and solutions:

# Missing entry file
Error: No entry module found
# Solution: Specify --entry or add "source" field to package.json

# Unresolved dependencies  
Error: Could not resolve 'react'
# Solution: Add to --external or install as dependency

# TypeScript configuration issues
Error: TypeScript compilation failed
# Solution: Check --tsconfig path or fix TypeScript errors

# Permission issues
Error: EACCES: permission denied
# Solution: Check file permissions or use sudo (not recommended)

Shell Integration

Bash/Zsh completion:

# Enable tab completion (if supported by your shell)
eval "$(microbundle --completion)"

NPM scripts integration:

{
  "scripts": {
    "build": "microbundle",
    "build:prod": "microbundle --compress --no-sourcemap",  
    "build:dev": "microbundle --no-compress --sourcemap inline",
    "dev": "microbundle watch",
    "dev:node": "microbundle watch --target node --format cjs",
    "analyze": "microbundle --visualize",
    "type-check": "microbundle --generateTypes --no-compress"
  }
}

CI/CD pipeline usage:

# Continuous Integration
npm run build
# or
npx microbundle --format modern,esm,cjs,umd --compress

# Pre-commit hooks
microbundle --format esm,cjs --no-compress --sourcemap

docs

cli-interface.md

index.md

programmatic-api.md

tile.json