tsup Has a Free TypeScript Bundler — Here's How to Use It

#typescript #bundler #npm #devtools

Configuring webpack or Rollup to bundle a TypeScript library takes hours. tsup does it in one command — zero config, multiple formats, declaration files included.

What Is tsup?

tsup bundles your TypeScript library with zero configuration. It's powered by esbuild for speed and handles CJS, ESM, and declaration files out of the box.

Quick Start

npm install -D tsup

// package.json
{
  "scripts": {
    "build": "tsup"
  }
}

# Bundle src/index.ts → dist/index.js
npx tsup src/index.ts

That's it. One command, you're done.

Configuration

// tsup.config.ts
import { defineConfig } from 'tsup';

export default defineConfig({
  entry: ['src/index.ts'],
  format: ['cjs', 'esm'],    // Output both formats
  dts: true,                   // Generate .d.ts files
  splitting: true,             // Code splitting
  clean: true,                 // Clean dist before build
  minify: true,                // Minify output
  sourcemap: true,             // Source maps
  treeshake: true,             // Tree shaking
});

Package.json Setup

{
  "name": "my-library",
  "main": "./dist/index.js",
  "module": "./dist/index.mjs",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/index.mjs",
      "require": "./dist/index.js",
      "types": "./dist/index.d.ts"
    }
  },
  "files": ["dist"],
  "scripts": {
    "build": "tsup",
    "dev": "tsup --watch"
  }
}

Multiple Entry Points

export default defineConfig({
  entry: {
    index: 'src/index.ts',
    utils: 'src/utils.ts',
    cli: 'src/cli.ts',
  },
  format: ['cjs', 'esm'],
  dts: true,
});

Why tsup Over Alternatives

Feature	tsup	Rollup	webpack	tsc
Config needed	None	Extensive	Extensive	tsconfig
Build speed	~100ms	~2s	~5s	~3s
CJS + ESM	One flag	Plugins	Plugins	Manual
.d.ts files	Built-in	Plugin	Plugin	Built-in
Tree shaking	Yes	Yes	Yes	No
Watch mode	Built-in	Plugin	Built-in	Built-in

Advanced Features

Environment Variables

export default defineConfig({
  env: {
    NODE_ENV: 'production',
  },
  define: {
    'process.env.VERSION': JSON.stringify('1.0.0'),
  },
});

CLI Tools

export default defineConfig({
  entry: ['src/cli.ts'],
  format: ['cjs'],
  banner: { js: '#!/usr/bin/env node' },
});

Conditional Exports

export default defineConfig({
  entry: ['src/index.ts', 'src/react.ts', 'src/vue.ts'],
  format: ['cjs', 'esm'],
  dts: true,
  external: ['react', 'vue'],
});