NPM Primer: Publishing your first npm package

Publishing an npm package to npmjs registry can be your first step towards being part of open source community.Before diving into publishing a piece of javascript code as a package, let's brush up some relevant nomenclature.

What is NPM for?

npm is a package manager for the Node JavaScript platform.It manages packages/libraries in in a single place and facilitates node to find them when required.The registry www.npmjs.com hosts numerous free packages to download ,install and use in your projects.

To set up node and npm please follow the official documentation Link

Setting up the piece of code

Let's consider an example and create an npm module exposing some methods that will come in handy for array processing.

Make project directory

mkdir array-util

cd array-util

Make it a node project

npm init

This will create a file package.json that holds name of dependencies and scripts like test, eject, build etc.
Use the command line to follow through the entire process like the below image:

The package.json file will look like:

{
  "name": "arrayutil",
  "version": "1.0.0",
  "description": "Package having methods for array processing",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Sanskar Gupta",
  "license": "ISC"
}

Create a directory src and place your js file and name it as utils.js .This file will hold
all the methods that are supposed to be exposed.

const arrayutils = {
  sort: (array) => {
     return array.sort()
  }
}

export default arrayutils

Note that here ES6 is being used, we will convert it to ES5 using babel.

Create a file export.js under src that will will serve as the entry point for the module.
export { arrayutils } from "./utils"

Cant ignore .npmignore

Create a file namely .npmignore in the project root, here we will add all the directories or files that should not contribute to out npm module for eg, .vscode, .idea , src.

Note that here we are writing our module in ES6 that will be converted to ES5 later under the dist folder that will hold the cross browser supported module, as a result we need to add src (in ES6) to .npmignore to mitigate the unecessary increment in package size.

Modify package.json

Change the main field in package.json to "./dist/export.js"
Add a publish script under scripts

Include babel core and babel cli
PS: Babel is a free and open-source JavaScript transcompiler that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript that can be run by older JavaScript engines.

The package.json should look like:

{
  "name": "arrayutil",
  "version": "1.0.0",
  "description": "Package having methods for array processing",
  "main": "./dist/export.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    "publish:npm": "rm -rf dist && mkdir dist &&  babel src -d dist --copy-files"

  },
"babel": {
    "presets": [
      "@babel/preset-react"
    ]
  },
  "author": "Sanskar Gupta",
  "license": "ISC"
"dependencies": {
    "@babel/core": "^7.9.0",
  },
  "devDependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/preset-react": "^7.9.1"
  }
}

Note that on running the command:
npm run publish:npm a folder named dist will be created having code in ES5 format.

Lets publish to npm!

1)Commit and push your changes to your preferred branch.We need to keep the commit tree clean before publishing to npm.

2)Run npm login

3)Login with the credentials.Make sure you have created an account on https://www.npmjs.com/

4)You can check your login status by npm whoami

5)Run npm run publish:npm to build

6)If publishing for the first time you can directly run npm
publish, if updating the current published version execute
npm version <version_number> before publishing
You can follow any version sequence as per your choice
though it is suggested to use 1.x.x

7)Go to npmjs and validate your package by downloading and using in some other project

8)Note that its always good to have a readme, so make sure that README.md is added stating instructions on how to import and use the module preferably with an example.

Example Repo: https://github.com/Sanskar95/snack-toast

PS: You can check the download stats of your module on
https://npm-stat.com/