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:
|
1 2 3 4 |
"types": "index.d.ts", "peerDependencies": { "react": "^15.0.0-0 || ^16.0.0-0" } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
{ "name": "package-name", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "types": "index.d.ts", "peerDependencies": { "react": "^15.0.0-0 || ^16.0.0-0" } } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
{ "compilerOptions": { "outDir": ".", "target": "es5", "module": "commonjs", "moduleResolution": "node", "noImplicitAny": true, "removeComments": true, "declaration": true, "jsx": "react", "lib": [ "es2015", "dom" ] }, "files": [ "src/index.ts" ], "exclude": [ "node_modules" ] } |
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.
|
1 2 3 4 5 6 7 8 9 10 |
import * as React from 'react'; interface Props { } interface IState {} export class HelloWorld extends React.Component<Props, IState> { render() { return <div>Hello world using Typescript & React!</div>; } } |
Now add index.ts with following line to folder lib as entry point for compilation.
|
1 |
export * from './HelloWorld'; |
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:
|
1 2 3 4 |
node_modules/ src/ package-lock.json tsconfig.json |
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:
|
1 2 3 |
"scripts": { "prepare": "tsc && echo 'Finished building NPM package'" } |
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
