"If a worker wants to do his job well, he must first sharpen his tools." - Confucius, "The Analects of Confucius. Lu Linggong"
Front page > Programming > tsup to bundle your TypeScript package

tsup to bundle your TypeScript package

Published on 2024-09-01
Browse:185

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…

tsup to bundle your TypeScript package

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.

Want to learn how to build shadcn-ui/ui from scratch? Check out build-from-scratch

About me:

Website: https://ramunarasinga.com/

Linkedin: https://www.linkedin.com/in/ramu-narasinga-189361128/

Github: https://github.com/Ramu-Narasinga

Email: [email protected]

Build shadcn-ui/ui from scratch

References:

1. tsup docs: https://tsup.egoist.dev/

2. npm: https://www.npmjs.com/package/tsup

3. tsup usage in shadcn-ui/ui: https://github.com/shadcn-ui/ui/blob/main/packages/cli/package.json#L33

4. My open source CLI related project: https://github.com/Ramu-Narasinga/TThroo/blob/main/packages/cli/package.json#L35

Release Statement This article is reproduced at: https://dev.to/ramunarasinga/tsup-to-bundle-your-typescript-package-1ln2?1 If there is any infringement, please contact [email protected] to delete it
Latest tutorial More>

Disclaimer: All resources provided are partly from the Internet. If there is any infringement of your copyright or other rights and interests, please explain the detailed reasons and provide proof of copyright or rights and interests and then send it to the email: [email protected] We will handle it for you as soon as possible.

Copyright© 2022 湘ICP备2022001581号-3