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