What is tsup
The simplest and fastest way to bundle your TypeScript libraries.
tsup is great because we don't need to write many lines for configuration/we can use it with zero config.
Also tsup is fast since it uses esbuild.
One thing we need to pay attention is the following.
Anything that's supported by Node.js natively, namely .js, .json, .mjs. And TypeScript .ts, .tsx. CSS support is experimental.
If you want to create an npm package for Node.js, tsup
will be a great option.
Steps
- create an npm account
- set up a project
- add code
- add config & build
- publish
step0 create an npm accout
If you want to publish your npm package but you don't have an npm account, you will need to create it.
step1 Set up a project
First, we need to create a new project for this.
In this post, I'm using pnpm since it's really fast.
$ mkdir my-npm-package
$ cd my-npm-package
$ pnpm init
$ pnpm add -D typescript tsup
$ pnpm tsc --init
step2 Add code
In this part, we will need to write code to provide the functionality we want to have in a package.
First, we need to create src
folder. Then we can start coding.
In this post, I wrote 2 simple functions.
add.ts
export const add = (a:number, b:number):number => {
return a + b
}
sub.ts
export const sub= (a:number, b:number):number => {
return a - b
}
index.ts
export { add } from './add'
export { sub } from './sub'
step3 add config & build
We need to create a tsup.config.ts
.
you can check more details here.
import { defineConfig } from 'tsup'
export default defineConfig({
target: 'es2020',
format: ['cjs', 'esm'],
splitting: false,
sourcemap: true,
clean: true,
dts: true
})
Before try to build, we will need to add the following to package.json
.
"scripts": {
"build": "tsup ./src"
},
Then build
$ pnpm run build
# if you use yarn / npm
$ yarn build
$ npm build
If you build your code successfully, you will see dist
folder in your project folder. In dist
you will see something like below.
step4 publish
We are almost there.
First, we need to add the following to package.json
. We need the following to allow people to use import
/ require
to use our package easily.
"files": [
"dist",
"package.json"
],
"exports": {
".": {
"require": "./dist/index.js",
"import": "./dist/index.mjs",
"types": "./dist/index.d.ts"
}
},
"main": "./dist/index.js",
"module": "./dist/index.mjs",
"types": "./dist/index.d.ts"
Now, time to publish the package.
$ npm login
$ npm publish
Once you can publish your package successfully, you will see your package on npm like the following.
We can test the package really quickly.
Go to https://npm.runkit.com/playground
If you want to try your own package, you need to change the package name.
const { add, sub } = require('npm-template-with-tsup')
console.log(`add result ${add(1,2)}`)
console.log(`sub result ${sub(1,2)}`)
result
"add result 3"
"sub result -1"
here is my sample package
https://www.npmjs.com/package/npm-template-with-tsup
GitHub repo for this post
koji / npm-package-template-with-tsup
npm package template with typescript and tsup
npm-package-template-tsup
This is a template package to publish npm package with typescript and tsup.
tsup
Bundle your TypeScript library with no config, powered by esbuild.
how to use this
- install dependencies
# pnpm
$ pnpm install
# yarn
$ yarn
# npm
$ npm install
- add your code to
src
- add export statement to
src/index.ts
- test build command to build
src
. once the command works properly, you will seedist
folder.
# pnpm
$ pnpm run build
# yarn
$ yarn build
# npm
$ npm run build
- publish your package
$ npm publish
Top comments (2)
Really helpful article!! It helped me to solve my issues when using
tsup
Thanks!!!
Nice article, I would add that showing deep exports would be useful, as that's probably the most annoying and difficult to do, instead of export everything in one namespace. Cheers