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.


Comments

Post a Comment

Popular posts from this blog

Formatting MySQL Dates

Image
MySQL's DATE_FORMAT() function provides a wide range of format codes that you can use to represent date and time values in various formats.  It allows you to format a date or datetime value as a string using custom formatting. DATE_FORMAT(date, format) date: The date or datetime value you want to format. format: A string specifying the desired format for the output. This string can include special format codes that represent various components of the date and time (e.g., %Y for the year, %m for the month, %d for the day, %H for the hour, %i for the minute, %s for the second, etc.). SELECT DATE_FORMAT('2023-09-03', '%M %d, %Y'); // returns 'September 03, 2023'. Here is a list of commonly used format codes along with examples: %Y: Four-digit year (e.g., '2023'). %y: Two-digit year (e.g., '23' for 2023). %m: Month (01-12). %c: Month (1-12). %d: Day of the month (01-31). %e: Day of the month (1-31). %H: Hour (00-23). %h: Hour (01-12). %I: Hou
Read more

SOAP Explained: With Javascript

What is SOAP? SOAP is like a set of rules that helps different computer programs talk to each other. Imagine you have two friends who speak different languages. SOAP is like a universal translator that helps them understand each other. Now, when these programs talk, they use a special type of text called XML. It's like a format that's easy for both programs to read, like having a conversation in a language that both friends understand. So, SOAP is kind of like a language translator for computers, and XML is the language they use to communicate. This way, even if two programs are running on completely different systems, they can still understand each other and share information. SOAP Request A SOAP request consists of a SOAP envelope that contains the SOAP header and the SOAP body. Here's a basic example of what a simple XML request in SOAP might look. <?xml version="1.0" encoding="UTF-8"?> <soapenv:Envelope     xmlns:soapenv="http://schemas
Read more

Mastering MySQL Timestamps

Image
Timestamps in MySQL are used to represent date and time values, and they can store information with various levels of precision. MySQL provides several data types for working with timestamps, including DATE, TIME, DATETIME, TIMESTAMP, and YEAR. Let's focus on the two most commonly used timestamp data types in MySQL : DATETIME and TIMESTAMP . These types store both date and time information, but they have some differences in behavior. 1. DATETIME: The DATETIME data type stores date and time values in the format 'YYYY-MM-DD HH:MM:SS'. It does not automatically convert stored values to the server's time zone. The values are stored as provided. You can specify a time zone when inserting data into a DATETIME column, but the time zone information is not used for calculations. Example: '2023-09-03 14:30:00' 2. TIMESTAMP: The TIMESTAMP data type also stores date and time values in the format 'YYYY-MM-DD HH:MM:SS'. Unlike DATETIME, TIMESTAMP values
Read more