Publish Typescript Package in NPM

In this tutorial, we will create a tutorial to publish the package on NPM. There are some steps we should follow to publish a primitive version. In this project, we used Typescript, JavaScript, and Gulpjs.
This is what we are going to build:
https://www.npmjs.com/package/persian-normalizer

• Prepare Environment
• Create NPM Account
• Create repository
• Develop, Config and, Publish

If you are familiar with simple Node programming issues, skip the first 3 steps.

Prepare Environment:

Firstly Install NodeJs and check node and npm versions with the following commands.

node -v // v14.16.0
npm -v // 7.13.0

I published with these versions. In the next step, I suggest installing VSCode in your system for a better experience in developing. In Addition, to developing installing git is required.

Create NPM Account

npm is the package manager for the Node JavaScript platform. It puts modules in place so that, Node can find them, and manages dependency conflicts intelligently. Most commonly, it is used to publish, discover, install, and develop node programs. Installing in npm website is incredibly simple. Just go to www.npmjs.com and click on signup. Then run npm login in your command prompt and make sure that you logged in.

Create repository

In Github create a repository and clone on your machine. Npm package names are lowercase and words separated with dash(-). It’s better to create a repository with these specifications. I created this repo in Github.
In the empty project, run npm init , and fill-in questions. Finally, a package.json will be created.

Develop, Config and, Publish

In the following steps, I want to create a sample javascript package and test it locally in your machine. Create index.js and write this code.

Make Sure Your Package Installs and Works

You should test your code before publishing and, you should be able to install it locally. At the root of your package, do this:

npm install . -g
npm link

Use npm ls -g to see if it's there. To test a local install, go into some other folder, and then do:

cd ../some-other-folder
npm install my-package

Use Like this:

Develop Typescript and Config It

Now it’s time to develop your code and prepare it for publication in the public NPM repository. Change your js files to ts and add a tsconfig.json. You can generate with tsc --init and set your configs. It should be like this:

Don’t forget to add "declaration": true in tsconfig.json and, also add these configs to package.json Because when you import the library, this tells the TypeScript compiler where to look for your library’s types.

"main": "dist/index.js",
"types": "dist/index.d.ts",

Add dist folder to .gitignore and .npmignore files.

Build and config Gulp

Install typescript in your machine and run thetsc command at the root of the project. It will create adistfolder and build the project into it. After building you can see that there are two files with .d.ts and .js extension.
in my project, there are two JSON files that are static and I should copy them into the dist folder to my code work well. Here I used gulp to run the task. gulp is an open-source JavaScript toolkit. I believe that this is an awesome toolkit for js developers.
This is my gulp task code:

Publish into NPM

Make sure your Readme.md , CHANGELOG.md , CONTRIBUTING.md and LICENCE files are ready to publish. that's not necessary but it’s better to have this information in your project. Now I created the final package.json and publish it with this command

npm run publish

The prepublish the script, run gulp tasks and build typescript. The final package.json is like this.

Boooom! We got a package.

I hope you had liked this tutorial. Good luck with publishing the package in NPM