Create an npm package template with TypeScript and tsup
Tags: npm, tsup, typescript
Published: 2023-06-10 12:03:34

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

```zsh
$ 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
```ts
export const add = (a:number, b:number):number => {
  return a + b
}
```

sub.ts
```ts
export const sub= (a:number, b:number):number => {
  return a - b
}
```

index.ts
```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](https://tsup.egoist.dev/#what-can-it-bundle).

```ts
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`.

```json
  "scripts": {
    "build": "tsup ./src"
  },
```

Then build
```zsh
$ 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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jld3kwbg1qap2l52minc.png)

## 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.

```json
"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.

```zsh
$ 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.

```js
const { add, sub } = require('npm-template-with-tsup')

console.log(`add result ${add(1,2)}`)
console.log(`sub result ${sub(1,2)}`)
```
`result`
```zsh
"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 %}