DEV Community

Cover image for Create an npm package template with TypeScript and tsup
0xkoji
0xkoji

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

sub.ts

export const sub= (a:number, b:number):number => {
  return a - b
}
Enter fullscreen mode Exit fullscreen mode

index.ts

export { add } from './add'
export { sub } from './sub'
Enter fullscreen mode Exit fullscreen mode

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
})
Enter fullscreen mode Exit fullscreen mode

Before try to build, we will need to add the following to package.json.

  "scripts": {
    "build": "tsup ./src"
  },
Enter fullscreen mode Exit fullscreen mode

Then build

$ pnpm run build

# if you use yarn / npm
$ yarn build

$ npm build
Enter fullscreen mode Exit fullscreen mode

If you build your code successfully, you will see dist folder in your project folder. In dist you will see something like below.

Image description

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"
Enter fullscreen mode Exit fullscreen mode

Now, time to publish the package.

$ npm login
$ npm publish
Enter fullscreen mode Exit fullscreen mode

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)}`)
Enter fullscreen mode Exit fullscreen mode

result

"add result 3"
"sub result -1"
Enter fullscreen mode Exit fullscreen mode

here is my sample package
https://www.npmjs.com/package/npm-template-with-tsup

GitHub repo for this post

GitHub logo 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.

https://tsup.egoist.dev/

how to use this

  1. install dependencies
# pnpm
$ pnpm install

# yarn
$ yarn

# npm
$ npm install
  1. add your code to src
  2. add export statement to src/index.ts
  3. test build command to build src. once the command works properly, you will see dist folder.
# pnpm
$ pnpm run build

# yarn
$ yarn build

# npm
$ npm run build
Enter fullscreen mode Exit fullscreen mode
  1. publish your package
$ npm publish
Enter fullscreen mode Exit fullscreen mode

test package

https://www.npmjs.com/package/npm-template-with-tsup






Top comments (2)

Collapse
 
fgiraldi profile image
fgiraldi

Really helpful article!! It helped me to solve my issues when using tsup
Thanks!!!

Collapse
 
spock123 profile image
Lars Rye Jeppesen

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