Build Pipeline with tsup for TypeScript Libraries

Intermediate10 min

Set up a fast build pipeline using tsup to produce ESM, CJS, and declaration files for publishable TypeScript packages.

Prerequisites

-TypeScript project
-Node.js 18+

Steps

Install tsup

Add tsup as a dev dependency for fast, zero-config TypeScript bundling.

$ pnpm add -D tsup

Create tsup configuration

Define the build config for dual ESM and CJS output with declarations.

$ cat > tsup.config.ts << 'EOF' import { defineConfig } from 'tsup'; export default defineConfig({ entry: ['src/index.ts'], format: ['esm', 'cjs'], dts: true, splitting: true, sourcemap: true, clean: true, minify: false, treeshake: true, }); EOF

Set minify: true for production libraries distributed via CDN.

Configure package.json for dual output

Set exports, main, module, and types fields for both ESM and CJS consumers.

$ npm pkg set main='./dist/index.cjs' module='./dist/index.js' types='./dist/index.d.ts' && npm pkg set exports['.'].import='./dist/index.js' exports['.'].require='./dist/index.cjs' exports['.'].types='./dist/index.d.ts'

Add build scripts

Add build and dev scripts to package.json.

$ npm pkg set scripts.build='tsup' scripts.dev='tsup --watch'

Run the build

Execute the build and verify the output files.

$ pnpm build && ls -la dist/

Full Script

full-script.sh

#!/bin/bash
# TypeScript Build Pipeline with tsup
set -euo pipefail

echo "=== Installing tsup ==="
pnpm add -D tsup

echo "=== Creating tsup.config.ts ==="
cat > tsup.config.ts << 'EOF'
import { defineConfig } from 'tsup';

export default defineConfig({
  entry: ['src/index.ts'],
  format: ['esm', 'cjs'],
  dts: true,
  splitting: true,
  sourcemap: true,
  clean: true,
  minify: false,
  treeshake: true,
  outDir: 'dist',
});
EOF

echo "=== Adding scripts ==="
npm pkg set scripts.build="tsup"
npm pkg set scripts.dev="tsup --watch"

echo "=== Building ==="
pnpm build

echo ""
echo "=== Output ==="
ls -la dist/

FAQ

Discussion

Loading comments...

#!/bin/bash # TypeScript Build Pipeline with tsup set -euo pipefail echo "=== Installing tsup ===" pnpm add -D tsup echo "=== Creating tsup.config.ts ===" cat > tsup.config.ts << 'EOF' import { defineConfig } from 'tsup'; export default defineConfig({ entry: ['src/index.ts'], format: ['esm', 'cjs'], dts: true, splitting: true, sourcemap: true, clean: true, minify: false, treeshake: true, outDir: 'dist', }); EOF echo "=== Adding scripts ===" npm pkg set scripts.build="tsup" npm pkg set scripts.dev="tsup --watch" echo "=== Building ===" pnpm build echo "" echo "=== Output ===" ls -la dist/