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 this 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