NPM is good friend of every web-developer in JavaScript community

 

                                Yes! It is true and I feel it too as a beginner, do you feel the same? 

Section 1:  What is NPM?

NPM stands for Node Package Manager is open source command line tool use as package manager for Node.js, front-end web apps (react app), mobile apps, robots, … and many more.

Here we will talk about npm in terms of Node.js only. (I m using windows  10)

Section 2:  Installation

Lets start it by installing Node.js first because npm comes with Node.js. So, head over to official website of nodejs : https://nodejs.org/en/

After Node.js downloaded, To confirm that you have npm installed you can run  below command in your terminal.

npm -v

Note: that my version is 6.14.8 your version can be different.

So there is Package.json file in Node.js project. It is metadata of the project, basically it store all the information of project. To create package.json go to cmd and change directory(cd) to your project folder:  
Note: My project folder is “npm”.

Skip all the questions by pressing enter, we just want package.json file inside our project folder.

Or you can use trick to skip all with one line  command with “yes” flag:

npm init --yes

Now head over to vscode to see how package.json file looks like.

Don’t have vscode?

Visual Studio Code is a free source-code editor made by Microsoft for Windows, Linux and macOS. Official website: https://code.visualstudio.com/

“code  .”  will start vscode automatically at your project folder. 

Your vscode might look different.

Ok let’s dive in npm pool.

Packages are like a file having lots of functionalities that can reduce your work in project building.

To know about what kind of packages are there in free source community head over to npm website:

Official link: https://www.npmjs.com/

Section 3: Installing Packages Using npm

To install packages using npm first you need to know the name of packages here we will install package named lodash    ( https://www.npmjs.com/package/lodash ) :

Instead of “install” you can use “i” as shortform of it.

npm install lodash

This will install lodash and store it inside “node_modules” named folder.

So why “node_modules”? Basically all the dependencies of Node.js project is stored inside this folder.

One more file has been created namely “package-lock.json” we don’t have to worry about it much, it is file matained by node for having knowledge about package.

Now we can see “package.json” file, under dependencies there is new entry with name lodash and its version. (Note that your version could be different. As newer version may  be released.)

So in package.json under dependencies it shows all the packages with version we installed for project.

Let say you downloaded free source Node.js project from internet, to download all the dependencies for that node project command is “npm install”, by this the project can work properly due to perfect package version download. 

npm install 
OR 
npm i

Section 4: What is Package Version?

For that we need to understand first what is versioning?

3 number separated by period is format of versions. When project/software is published for first time its version would be 1.0.0.

Format of versions - Major.Minor.PatchRelease

• patchRelease – when bugs were fixed the patch number increases

            Ex:

            from 1.0.0  to  1.0.1

• Minor – we increase the minor number when feature is added that don’t break the existing System or API (application programming interface).

            Ex:

            From 1.0.0  to  1.1.0

• Major – major number is increased when added new feature can potentially break existence Application that depend upon the current version of system or api.

            Ex:

            From 1.0.0  to 2.0.0

Note that when left side number changes right side number gets reset to 0.

Like:

If previous version is 1.19.30 and major changes occur then version would be 2.0.0

Section 5: Advance Package Installing Trick

• Charat character – ( ^)

Ex: npm install <package_name>@^4

It shows that  I don’t care about minor & patch version unless major version is 4, install it. That is we need 4.x.x

• Tiltde character—(~)

Ex: npm install <package_name>@^4.17

It shows that I don’t care about patch version unless major & minor version is 4 & 17 respectively, install it. That is we need 4.17.x

Section 6: Play With Dependencies

   🚩     To see the version of all the dependencies that you have downloaded command is “npm list”

To simulate this I have installed one more package named as “mongoose”

npm list

you can see the list & even if I had just installed 2 packages it shows me list of all extra dependencies also, actually mongoose is package which need the functionality of all packages other than lodash that you see here in list. So npm will install all other dependencies too that is needed for mongoose work properly.

Output: 

       🚩    To see the version of dependencies strictly installed by you.

Now we don’t care which dependency depends on which package, we just want package that we had installed. For that command is “npm list - -depth=0".

npm list --depth=0

Output:

 🚩  May be you want to get every information about the package for that command is “npm view <package_name>”

Here I have used mongoose you can get any package info.

npm view mongoose

So we can extract the data like mongoose depends on total of 12 other dependencies, the version that we have on our machine, when it was last updated, the lastest version, the unstable version, who is maintainer and so on.

Output:

Section 7: Downgrading & Upgrading the npm Package Version

🚩   To see all the version released by for package command is “npm view <package_name> versions”.

Output:

      🚩     Now select any one version of list of versions & install it, to do that command is

“npm install <package_name>@major.minor.patch_version”.

Lets install 4.16.6

npm i lodash@4.16.6

This type of error will be seen as it is older version it have some bugs/ vulnerabilities. But its fine ignore it lets move ahead.

 found 4 vulnerabilities (2 low, 2 high)

To make sure that the lodash version 4.16.6 is installed you can check the package.json file.

     🚩    To see all the outdated packages version that we had installed.

Command is  “npm outdated”.

Note that mongoose is not in list because it is up-to-date. So by this we know if there is any update available or not without visiting npm website.

npm outdated

     🚩    To simulate “npm update” to update the outdated package i m installing lodash version: 3.0.0

Now type command “npm update” to update

npm update

This is what I want you to notice (see below ) that “npm update” only update the minor and patch number to latest. (The latest version is 4.17.21)

     🚩    lets install lodash to latest version, For that we have simple solution just change the version of lodash to latest version manually in package.json file and then run command “npm install”. To make this work automatic you can use many other npm package like:
npm-check-updates, updates.

npm install npm-check-updates
OR 
npm install updates

Section 8: Managing Dev Dependencies

Among all the dependencies or packages that we install few are helpful only during development like “npm-check-updates”, “updates”,  tools for unit testing, …. And many more. These all dependencies are development tool so they should not go to production environment where we deploy our app.

To specify that certain npm packages are development tools only we use “- -save-dev” flag while installing it.

Lets install “updates” as a development tool

npm install updates --save-dev

In package.json file, so all our normal dependencies are under dependencies and all our development tools would be inside devDependencies. So now node knows that which packages are normal and which only for development purpose.

Section 9: Global and Local Packages

Sometimes we don’t have track of dependencies which were installed globally

 🚩    To get information about which globally installed dependencies are outdated

Here you can see I have 3 global dependencies installed on my machine of which netlify-cli & nodemon needs patch version update to  latest version, npm needs major, minor, patch version update.

npm -g outdated

 🚩    if you want to uninstall any globall package (un is short form of uninstall)

npm un -g <packagename>

To uninstall local package

npm un <packagename>

Section 10 : Publish Your Own Packages to npm and Maintain its Version on cmd.

We are at last section, but it is the most interesting part of all, So the question anyone should have that who is managing all these npm packages?

Well Good Question, Answer is a community of people like us, Yes! Any one can create npm package.

So how?

 🚩    Lets see the steps to create and publish our own npm package so that anyone in world can install it and can use it.

Step 1: Create Separate folder with name that you want to see as published package ‘name’.

Step 2: Create package.json file by 

npm init

Step 3: Create index.js file this would be your main module of package.

Step 4: To go further you should have account in npm if not created one, type following command

npm adduser

after adding yourself it will log you in directly

if you already have account then use “npm login” instead.

npm login

Step 5: now lets publish the package, make sure you do all this steps while cd (change directory) into the folder that you made at first with package “name”.

npm publish

you will get output like below:

so it shows that you package with “name” has been publish which have initial version 1.0.0

major version – 1, minor version – 0, patch version - 0

+<package_name>@1.0.0

Great Work!!!   Now package is published and Anyone can use it.

 🚩    So now lets say you worked  hard and made changes in your package or introduced a new feature so how to do the versions update over npm.

Well in npm world its simple.

Step 1: we can change version manually from package.json file on our machine that is changing major.minor.patch version as we need. Above I have explained about the difference and when you increase the version.

Or you can use cmd to change it

npm version major.minor.patch

 Ex: let say we found bug in our package and fixed that, package version before: 1.0.0

npm version 1.0.1

step 2: publish Again

npm publish

Now everyone can see our package on npm with version 1.0.1

+<package_name>@1.0.1

You can always see your published package over npm website : https://www.npmjs.com/

Login with your credentials and go to packages option as shown in picture above.

Thank you For reading till last, I hope you get something from this blog.