tsup to bundle your TypeScript package

#javascript #typescript #opensource #nextjs

Are you building a TypeScript library but not sure how to bundle it? I recommend tsup.

Below are the factors I consider:

1. It has over 1M downloads per week on NPM registry

2. tsup repository has 8.6k stars with active maintenance.

3. Well documented.

4. Used in shadcn-ui/ui CLI package.

5. tsup uses rollup internally.

I looked at tsup source code, It has Nodejs worker threads related code with all sorts of pushing messages and listening to them. This would be fun to study, this also means I would be stepping into a different arena dealing with bundlers. Not sure yet…

Finding tsup being used in shadcn-ui/ui helps you in many ways:

1. You get to learn how tsup “can” be implemented

- Implementation you find in OSS helps you navigate the docs in a better way.

- Reading the entire docs is cool but it can be overwhelming for some of us.

2. See it in action by reading shadcn-ui source code. tsup is found in two places when you search for it in the shadcn-ui/ui CLI source code:

package.json

"scripts": {  
 "dev": "tsup - watch",  
 "build": "tsup",

tsup.config.ts

import { defineConfig } from "tsup"  

export default defineConfig({  
 clean: true,  
 dts: true,  
 entry: \["src/index.ts"\],  
 format: \["esm"\],  
 sourcemap: true,  
 minify: true,  
 target: "esnext",  
 outDir: "dist",  
})

At this point, I would just go read the docs to learn what these options are and how the scripts are configured.

This way I do not feel overwhelmed with the docs and I know exactly what I am looking for. This is my way of setting a direction to read and learn the most from the docs.

This is how I did it too in my open source CLI related package to bundle my TS library, to begin with.