react
React,  Typescript

Publish npm Typescript react component

We have a couple small react component libraries to share. In addition to host the libraries at github.com, the best approach is to publish them at npm so that others can readily use them. So I went through the process to publish npm typescript module, documented it and share my steps to whoever might want to do the same. There are different ways in compiling Typescript libraries. In this guide, we go with the simple one, the ‘tsc’ command that comes with typescript package.

Initial setup

npm command comes as part of Node.js install. Therefore, download and install Node.js if you haven’t done so yet.

We will run some npm commands using a command prompt (did that in windows. just do the same for unix console). So start a command prompt, create a new folder using the npm package name as the folder name and change directory to the new folder.

Create package.json

Run npm init. It will prompt you to fill in some information to generate initial package.json file. You can fill them in or simply hit return. You can always modify them later.

Now edit package.json file, and add the following lines:

types points to where the typescript definition file is whereas peerDependencies defines what dependencies this library requires (without installing them).

The package.json file should now look like this.

Install dependencies

Run npm install typescript react react-dom @types/react --save-dev. These are minimum required packages for React Typescript component library. This command will add the dependencies to package.json automatically.

Typescript compiler

tsc is the command to compile typescript modules to compatible javascript libraries. To allow easy access to the command, we install typescript globally:

Run npm install typescript -g

Typescript configuration file

Add following as tsconfig.json.

Typescript compiler uses this config file to determine what to do. Compiled files will be in  es5 compatible javascript and output folder is at  ./dist.

Build React component

Create folder lib and copy your React typescript component to the folder.

Here we will use  HelloWorld component from our other examples to demonstrate.

Now add index.ts with following line to folder lib as entry point for compilation.

Compile the library

Run tsc to compile your library. In addition to javascript files, it also generates  .d.ts files automatically and are ready for use by other Typescript projects.

Publish npm Typescript module

Exclude some files and folders

We don’t need to publish all files. Therefore, we add a file .npmignore to specify what files or folders to exclude:

Update package.json

Add a prepare script to it. prepare script is invoked before the package is packed and published. Replace the scripts property as follow:

Authentication

Next, log in to npm by running npm login. This process will create an account, if you don’t have one yet.

Publish

Everything is ready and time to publish. Finally, run npm publish to publish the package.

Done. When you have a newer version, simply update version number at package.json and publish the package again.

 

Note: while you can remove a published package using unpublish command, it’s better to use deprecate instead. Also, even if you removed all versions of a package, you cannot reuse the package name. So only publish your package when everything is set correctly. You can check what files/folders will be published by running npm pack command. It packs your package into .gz file where you can double check to make sure they are correct.

Shared modules

Check out our react route transition library: css-transitioner

Leave a Reply

Your email address will not be published. Required fields are marked *