Create an npm package template with TypeScript and tsup

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

1. create an npm account
2. set up a project
3. add code
4. add config & build
5. 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.

https://www.npmjs.com/

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

GitHub - koji/npm-package-template-with-tsup: npm package template with typescript and tsup