Essential Tooling for Javascript Developers: NPM In-Depth

NPM

In this series, We will be discussing and understanding all the essential tools that are an integral part of any Javascript Developers Life. We will be learning tools and technologies like Command-Line Interface, NPM, Git and GitHub, Webpack and Babel, etc. along with understanding the purpose and needs of each one of them.

Topics Covered in the Series—

1. Command Line Interface.
2. NPM.
3. Git and Github.
4. Webpack and Babel.

Before moving forward, If you don’t know, What exactly is Command Line Interface and how to use it, I have already written an article Developers Best Friend: Command-Line Interface, I will recommend do check it out before moving forward.

In this article, we will be talking about NPM.

What is NPM?

Javascript has a huge ecosystem and a community out there. So as to solve particular problems, Many small pieces of software are continuously developed and maintained by the community. These small pieces of software are known as packages.

While developing any software or application, Developers make use of these 3rd party packages (packages that are written by someone else) in their project so as to speed up the development process, As building everything from scratch will be cumbersome. Now,

NPM stands for Node Package Manager. A Package Manager is simply a software that manages all the packages and dependencies that are used in the project. Managing simply means, It allows us to install, uninstall, update packages, etc.

Npm also allows developers to publish their own packages with the Npm registry. Npm registry is simply a database that has all the published packages available with it.

It is kind of a market place for packages from where npm fetch and install packages to your local system. npm allows developers to use as well as contribute (suggest new changes) to these packages.

Npm packages are basically of two types —

1. Libraries and Frameworks. (like React, Angular, Vue, etc)

2. Development Tools. (like Webpack, Babel, Nodemon etc)

How to use NPM?

In order to use npm we first need to install it. npm comes in handy with Node.js. So if you install Node.js in your system npm will be installed automatically. (Don’t worry you don’t need to know Node.js to work with npm ). To download Node.js visit https://nodejs.org/en/download/ download the LTE version (more stable) and install it.

Now to check If Node.js and Npm was installed properly, Open Command-Line or Terminal and write command —

To check if Node.js was installed properly,

node --version or node -v

To check if npm was installed correctly,

npm --version or npm -v

If both of the commands give you a version number without any errors like —

Then we are ready to work with npm.

To start working with npm we first need to create a package.json file.

Package.json

In order to manage packages, npm uses a file called package.json. As soon as we install a new package or uninstall an existing package that package is listed and unlisted automatically in the package.json file. The Package.json file simply serves as a reference for the future.

So in the future, if someone else is working with your code they can simply look at the package.json file and figure out which packages are required in order for the project to function properly.

Because if they are using your code in their system then the application will simply crash as the packages that are required to run the project were installed in your system and not theirs. So looking at package.json they can simply install all those packages in their system and application will simply start working.

Creating Package.json File —

I have created a project folder named NPM (you can name whatever you want) which has an index.html, style.css, index.js, and an images folder. All of them are empty right now as it doesn’t matter what is present in these files because our focus is npm.

Project starter

Now, Open Command-Line or Terminal and move into your project folder NPM (in my case). (Don’t be afraid looking at my path)

Navigating to Project Folder

To create a package.json file use command —

npm init -y

As a result, you will see a package.json file will be added to your project folder.

package.json added

package.json

Note — Feel free to fill the name, description, and author of the project on your own I have added them already. (No need to worry about other fields.)

‘npm init’ means node package manager initialize. ‘-y’ is simply a flag that I used. If I have not used -y flag, The terminal will be asking me the name, author, description, etc one by one before creating the file (you can try that out on your own just exclude -y from the command). I like creating the file first and then filling these fields.

Installing packages

To install packages with npm write command —

npm install <name-of-package> typeofdependecny

type of dependency can mainly have two values —

• — save-dev (save as a development dependency)
• — save (save as an actual dependency)

Basically, the dependencies that are used in the development process only and are not part of the production code are called ‘development dependencies’. Example — Webpack, Nodemon, etc

And, The dependencies that are used in the production code are called ‘actual dependencies’. Example — Any library or Framework (React, Vue), etc.

Don’t worry whenever you will be working with any package and dependency you will know whether it is actual or development dependency. (looking at its official documentation).

For example — Let’s install webpack( I know webpack is a development dependency) or if you want to install an actual dependency simply install jquery. (I will install both just for learning purposes)

npm install webpack --save-dev
OR
npm install jquery --save

Note — If you don’t specify the type of dependency it will by default be installed as an actual dependency.

As it gets installed 3 Things will happen —

• You will see these two packages will be listed to package.json file automatically in their respective category (development or actual)

• A node_modules folder and a package-lock.json file will be added to your project folder.

Node modules — node_modules is the folder that will contain the code for the packages that you have installed in your project. As we have installed webpack and jquery you will find two folders named jquery and webpack within the node_modules folder.

But, there will be 100s of other folders too within the node_modules folders (all are arranged alphabetically) apart from the packages that you have installed. That is simply because In order for your project to work correctly you need webpack and jquery, Similarly, in order for webpack and jquery to work correctly they need other packages and that packages, in turn, need other packages and so on. All these other supporting packages get installed automatically. (That’s the power of npm)

package-lock.json — It simply locks the exact versions of all the dependencies that are installed in the project.

package-lock.json

It also serves as a reference for the future. Packages constantly update with time. And sometimes the application breaks if there is a major update(will be discussed at the end). So package-lock.json simply helps us to remember that with which package versions the project was initially created.

Note — npm install <name-of-package> always installs the latest available version of the package.

Uninstalling Packages

For uninstalling packages use the command —

npm uninstall <name-of-package>

For example — npm uninstall jquery or npm uninstall webpack

This will uninstall the package from your project folder (now package will not be available in the node_modules folder) as well as unlist it from the package.json file.

Installing and Uninstalling multiple packages at the same time

To install multiple packages at the same time simply list them simultaneously —

npm install <package-1> <package-2> and so on.... typeofDependecies

Example —

npm install webpack webpack-cli webpack-dev-server --save-dev

To uninstall multiple packages at the same time —

npm uninstall <package-1> <package-2> and so on....

Example —

npm uninstall webpack webpack-cli webpack-dev-server

List all the installed packages

To list all the installed packages from the terminal use the command —

npm ls --depth 0

npm ls — depth 0

You can even check manually from the package.json file.

‘ls’ simply means list and — depth 0 is used as we want to only see the packages that we installed directly at depth 0, not the indirect packages (supporting packages). (As discussed above in node_modules)

If you want to list all the packages including supporting packages use the command —

npm list

To read about what a package does?

If there is a package that you want to learn about or know what exactly it does use the command —

npm docs <name-of-package>

Example — npm docs webpack, This will simply take you to the official Github page of the package automatically.

To check if there is a newer version available?

Suppose you have been working on a project for quite some time and want to know if there is a newer version available for the packages used in the project use command —

npm outdated

In order to illustrate this example, I have intentionally installed outdated versions of webpack and webpack-cli in my project as —

npm install webpack@3.0.0 webpack-cli@2.0.0  — save-dev

Now to check for outdated packages —

npm outdated

As you can see the current, wanted and latest versions are different which means a newer version is available.

Note — wanted and latest are both different. (will be discussed in a minute).

To update packages

To update a package to the latest version, use the command —

npm update <name-of-package>

To update all packages simultaneously —

npm update

But npm update will always update package to the wanted version and not to the latest version. (excluding the case when wanted and latest are both same.)

This happens because npm uses semantic versioning. Any package version consists of three numbers.

"webpack": "^3.2.4"

• First number 3 — represents the major version.
• Second number 2 — represents the minor version.
• Third Number 4 — represents the patch version.

major version updates when there are breakthrough changes. minor version updates when some simple new features are added And patch version updates when existing bugs are fixed.

npm update usually updates packages to the latest minor versions (second number) because whenever major version (first number) changes there are breakthrough changes which in many cases crashes the application. (and not considered good practice) and this happens because of the ^ symbol present before the package version.

"webpack": "^3.2.4"

^ only allows the packages to update to the latest minor version(2nd number) if you replace ^ with ~ in package.json(manually) then npm update will only allow the package to update to the latest patch version (3rd number).

And if you want that your packages are allowed to even update to the latest major versions simply replace the whole version in package.json with * —

"webpack": "*"

Now, when you run npm update, it will update your package to the latest major version available.

So, that’s it for npm. Do let me know if you find this article helpful. Stay tuned!!!