How to publish TypeScript package to NPM
Tags: typescript, webdev, javascript, react
Published: 2021-04-20 13:33:39

In this article I'm going to cover a process of publishing TypeScript package with external dependencies to NPM 


## Write some code

The package we're going to publish is React.js custom hook for throttling values: [react-use-throttle](https://www.npmjs.com/package/react-use-throttle). I've already written [article about developing this hook](https://dev.to/loonywizard/react-usethrottle-hook-87h) and now we're going to publish it to NPM

First things first, we need to write code for the package. I've put my code to `src/index.ts` file

## tsconfig.json

In order to develop with TypeScript we need to add tsconfig to our repository. My config looks like this:

```json
{
  "include": ["./src/**/*"],
  "compilerOptions": {
    "strict": true,
    "declaration": true, // generates declaration files
    "esModuleInterop": true
  }
}
```

To learn more about different options please look at [ TSConfig Reference](https://www.typescriptlang.org/tsconfig/)

## Set up Rollup

[Rollup](https://rollupjs.org/guide/en/) is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application

Rollup allows developers easily compile code into different JavaScript module systems such as ESModules, UMD, AMD or CommonJS. There's a [great article covering major differences between them](https://dev.to/iggredible/what-the-heck-are-cjs-amd-umd-and-esm-ikm)

This is my `rollup.config.js` file, it exports an array of objects, where each object defines how Rollup should build our code in specified format. Here we're building code for ES and UMD modules, because there're most common nowadays. Each bundle has TypeScript and Babel plugins, and UMD bundle also has terser plugin for code minification

```js
import typescript from 'rollup-plugin-typescript2'
import babel from '@rollup/plugin-babel'
import { terser } from 'rollup-plugin-terser'

export default [
  // ES Modules
  {
    input: 'src/useThrottle.ts',
    output: {
      file: 'dist/index.es.js', format: 'es',
    },
    plugins: [
      typescript(),
      babel({ extensions: ['.ts'] }),
    ],
  },

  // UMD
  {
    input: 'src/useThrottle.ts',
    output: {
      file: 'dist/index.umd.min.js',
      format: 'umd',
      name: 'reactUseThrottle',
      indent: false,
    },
    plugins: [
      typescript(),
      babel({ extensions: ['.ts'], exclude: 'node_modules/**' }),
      terser(),
    ],
  },
]
```

To learn more about Rollup configuration please look at [Rollup quick start guide](https://rollupjs.org/guide/en/#quick-start)

## Build code and publish package to NPM

We need to specify the following fields in package.json file
```json
"name": "react-use-throttle",
"version": "0.0.1",
"main": "dist/index.umd.min.js",
"module": "dist/index.es.js",
"types": "dist/useThrottle.d.ts",
"files": ["dist"]
```

`name` and `version` together identify package completely unique
`main` is the primary entry point to our package
`module` is the entry point for ESModules
`types` is the entry point for TypeScript type declarations
`files` is an array of patterns that describes the entries to be included when your package is installed as a dependency

Learn more about different fields in package.json file: [Package.json docs](https://docs.npmjs.com/cli/v7/configuring-npm/package-json)

Also, we need to specify `react` as [peerDependency](https://nodejs.org/es/blog/npm/peer-dependencies/), because it will not be added to final build

```json
"peerDependencies": {
  "react": "^16.8.0  || ^17.0.0"
}
```

To build code with rollup we need to run the following command:

```sh
rollup -c
```

It will build our package based on rules we defined in `rollup.config.js`. Code will be generated to `dist` folder

Now we're ready to publish our package, to do this we need to run the following commands:

```sh
npm login # this will ask you for your NPM login and password
npm publish
```

Package was successfully published to NPM 🎉

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/011cmvx3auvebe81smrd.png)


## Links
- [react-use-throttle package on NPM](https://www.npmjs.com/package/react-use-throttle)
- [GitHub repo](https://github.com/loonywizard/use-throttle)
- [CodeSandbox demo](https://codesandbox.io/s/react-use-throttle-demo-kcmrl)
- [Article about developing useThrottle hook](https://dev.to/loonywizard/react-usethrottle-hook-87h)
- [My personal website](https://www.vladimirnikitin.com)