tsup for TypeScript: Complete Guide with Examples

Online Python Trainer for Beginners

Learn Python easily without overwhelming theory. Solve practical tasks with automatic checking, get hints in Russian, and write code directly in your browser — no installation required.

Start Course

tsup for TypeScript: Complete Guide with Examples

1. What is tsup and Why Use It?

tsup is a modern, fast, and easy-to-use bundler for TypeScript, built on top of esbuild. Its main job is to bundle your TypeScript library into one or more files, ready for publishing to npm or using in other projects. Unlike complex Webpack or Rollup configurations, tsup offers a zero-config setup that works out of the box for most use cases.

Why do you need tsup? When developing TypeScript libraries, you face several challenges: compiling TypeScript to JavaScript, generating type declarations (.d.ts), merging multiple files into a single bundle for convenience, and supporting different module formats (CommonJS, ESM). tsup solves all of these with a single command. It automatically handles imports, optionally minifies code, generates source maps, and supports tree-shaking.

tsup is ideal for: creating npm packages, utility libraries, React/Vue components, API clients, and any other project that needs fast and simple TypeScript bundling. Thanks to esbuild, tsup runs 10–100 times faster than traditional bundlers — a huge advantage on larger projects.

2. Installation

Install tsup via npm or yarn as a dev dependency:

# npm
npm install --save-dev tsup

# yarn
yarn add --dev tsup

# pnpm
pnpm add --save-dev tsup

After installation, you can run tsup via npx or add a script to your package.json.

3. Quick Start — Minimal Working Example

Let's create a simple library and bundle it with tsup.

Step 1: Create the file src/index.ts:

// src/index.ts
export function greet(name: string): string {
    return `Hello, ${name}! Welcome to tsup.`;
}

export function add(a: number, b: number): number {
    return a + b;
}

Step 2: Create a config file tsup.config.ts (or use CLI arguments):

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

export default defineConfig({
    entry: ['src/index.ts'],        // entry point
    format: ['cjs', 'esm'],         // output formats
    dts: true,                      // generate .d.ts files
    splitting: false,               // don't split into chunks
    sourcemap: true,                // generate source maps
    clean: true,                    // clean dist folder before build
});

Step 3: Add a script to package.json:

{
    "scripts": {
        "build": "tsup"
    }
}

Step 4: Run the build:

npm run build

The output will appear in the dist/ folder:

dist/
├── index.js          (CommonJS)
├── index.mjs         (ESM)
├── index.d.ts        (type declarations)
├── index.d.mts       (ESM declarations)
└── index.js.map      (source map)

4. Key Methods / Functions / Classes

tsup doesn't have classes in the traditional sense. The main API is the defineConfig function and a configuration object. Below are 8 key configuration options.

4.1. entry

Sign

Recommendations