The guide to create and publish an NPM Package

May 15, 2019

Create NPM Package

Photo by @fempreneurstyledstock on Unsplash

Recently, I thought it would be a good idea to modularise some of my JavaScript code into reusable npm packages. It started out as something very trivial, but I had to spend considerable amount of time into setting everything and get it working. This article is an attempt to summarize the learning, and create something useful.

To make things simpler and to reduce boilerplate code generation, I have created and published a CLI tool. The tool can be found on npm repository, and the source code for it can be found on GitHub. We will be using this CLI to generate the boilerplate code for npm package. Please watch the below video to see it in action, and follow below instructions to give it a spin.

  1. Setup NPM Account 🔑

One needs an NPM account to be able to publish the packages on npm registry. Head to and create an account. After creating the account, you need to run npm login in the terminal using the credentials you used to create the account on NpmJs. Publishing public packages is free on NpmJs. However, if you wish to publish private packages, you need a paid account.

  1. Install create-npm-package CLI tool ⚒️

npm install -g @a6kme/create-npm-package

  1. Create the package folder 📁

Once you have come up with a name for your package, create the boilerplate for that package with command create-npm-package <YOUR_PACKAGE_NAME>

  • Select the JavaScript flavour that you want to write your package in. The source code will reside in src/ of the project directory.
  • If you want to use this package as a <script> tag in HTML files, select this option. The reason for asking this is the type of bundle webpack will output. If it needs to be used as part of a HTML document, the format has to be UMD. Else, commonJS2 will be more appropriate. You can read more about it in webpack official documentation of output.libraryTarget.
  1. Publish and feel awesome 😀

The moment that you have been waiting for. You can publish your package now.

npm publish --access public
  1. Access your published package

You can checkout your published package on under your profile. The link should look like<YOUR_NPM_USERNAME>/packages. You can install this package as a dependency in other project, or can use it as a script tag in browser. provides free CDN for your published packages on npm. You can access your build by going to<YOUR_NPM_USERNAME>/<YOUR_PACKAGE_NAME> and then using the distribution as <script> tag in an html file.

_ _ _ _

Thank you so much for taking time to go through this.❤️ If you feel there is some typo in this article, or some of the content can be improved, please feel free to Edit this Post. Or you can go back to continue reading other articles. 😀