NPM Primer: Publishing your first npm package
Tags: npm, javascript, node, opensource
Published: 2020-07-15 16:36:46

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](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)

###**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:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cwjb5zpzi8qzv2yqnlxx.png)

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/