This NPM tutorial will show you how to upload your JavaScript packages. And install it through a few commands using node.js NPM commands. Also, you will learn how to search and select the right package from the repository.

NPM is a Node Package Manager, a giant repository or large online store with over 1.3 million packages. Those packages are developed by JavaScript users called publishers. To serve up the javascript platforms and their technologies.

Table Of Contents

NPM uses two parts to download JavaScript packages:-

  • An Online Store that contains all packages of JavaScript.
  • Command Line Interface allows developers to download and share their packages in the online repository.

Prerequisites

  • Some Knowledge of Javascript.
  • Some Knowledge of Node.js
  • Command-Line Interfaces ( CLI ) or Terminal

JavaScript runtime Node.js uses NPM as a default repository. To run the following NPM commands, you have to install NPM.

How Node.js NPM Works

As we mentioned, Node.js NPM is an online repository with many JavaScript packages. But we need to know who is uploading and publishing those packages.

They are developers like you who upload and share their code in the NPM repository. They are called NPM package authors or contributors. To assist those who need to use those packages according to their project needs.

NPM indexed the JavaScript packages according to stats and most downloaded packages. To help other developers who need to use those packages according to what is the best one have to use.

NPM helps all developers to save their time by using those javascript packages rather than writing the code from scratch by utilizing some Node.js NPM commands.

NPM Registry Process

The thing that starts with initializing the command and then downloading needed functionalities inside the Node.js modules folder. It is incredible when you find a module in the NPM repository that saves your time without starting from scratch in coding, all through a few NPM commands.

Sharing and Publishing Node.js NPM Packages

As we mentioned, other developers are developing and creating those npm packages. They called NPM package authors. They are starting with a few commands to upload and share their Javascript packages.

NPM Login Command

Firstly, you need to have an account on npmjs.com through this registering page. Then open terminal or CLI.

  • If your OS is windows, click on start ( windows icon ) and search for the command prompt.
  • If the OS is Linux ( ubuntu ) or macOS, you have to open the system menu and then write in search “terminal” word.

Next is the node package manager account login access, which can be done using the following command.

npm login

When you log in with your username and password, it will send you ( OTP ) to your email; you must insert it to verify your account.

NPM Login Command

You must write the following commands to create a project folder and explore it using CLI.

# For create new folder 
mkdir codedtag-project

# To explore the created folder
cd codedtag-project

NPM Init Command

The next step we need is to create the package.json file, which can be done using the below command.

npm init

When you run the “npm init “ command, It will request you to fill the package.json properties, which is information about your project.

NPM Publishing Command

Once you have created your package development, you must use the following command to share and publish this package on the NPM registry.

npm publish

The result should be like the below image

NPM Publish Command

Downloading and Installing NPM Packages

Before downloading the js package dependencies, some statistics deserve to check by the user. So, according to these statics, the user should know which package is better.

NPM Package Statics

In the previous image, you saw some information for the needed package like weekly downloads, version, and other details. These data help package users choose the better one rather than losing the time for the downloading, and then a problem or something else appears. So these details help users to find and search for the right package.

There are two ways to search and find the node package manager package.

  • Through the npmjs registry: Once you open the npmjs registry, you will see a search box. Just write the needed package. It will show you indexed packages in descending according to the famous one.
  • Through the CLI or Terminal: There is a command to search for packages in the npm registry using CLI or Terminal. Only open your terminal or CLI and write npm search <package-name>. The results should be like the below image.
NPM Search Command

Once you decide which package to use, you must download it to your project.

There are a few commands to install and download node package manager package dependencies. You have to open the root of your project in CLI and then use the below command.

npm install <PACKAGE-NAME>

Once you start the command, you will see the progress of installing through the CLI or terminal. And a new folder is added to your project root called “node_modules” with created file “package-lock.json.”

When you run the “npm install” command without arguments or flags, it will list the new property with the “dependencies“ object containing the name.

Node.js Modules

As we mentioned, The “node_modules” folder was created when we used the “npm install“ command. The purpose of that folder is like a wallet that contains all required packages and needed functionalities that have invocations in your project.

Package-lock json

Package-lock.json file is something like a watcher to detect if the package.json file has changed or not.

Most things that can change in the package.json file are the “version“ property and the “dependency” property. If values don’t match the values in package.json, the new values of package.json will replace automatically in both files.

What is Package.json

Package.json is like a label of a javascript package containing all project information. And it can be generated by using the “npm init“ command. It is also considered a document that has the needed or required specifications for the current package.

When you run “init npm” from the CLI or terminal, you will see the following required fields. You have to insert them one by one.

Package.json File
  • Name: it refers to the project or package name.
  • Version: it refers to the version of the current package.
  • Main: This property is used to know the name of the main js file for this package.
  • Description: It describes what the JavaScript package is used for
  • Keywords: are many keywords followed by a comma to describe the package.

The following JSON snippet shows you the package JSON contents.

{
  "name": "celinia",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.11.6",
    "@babel/preset-env": "^7.11.5",
    "node-sass": "^4.14.1",
    "opentype.js": "^1.3.3",
    "serve-static": "^1.14.1"
  },
  "dependencies": {
	"browser-sync": "^2.26.14", 
  }
}

The Difference Between Dev Dependencies and Dependencies

Dev Dependencies

DevDependencies: An object includes all the packages or modules used in the package or project with its versions that are only needed in the testing and local development, not in the production.

The “devDependencies“ object is a property in the package.json file like the one shown below.

DevDependencies:{ 
   "jquery": "^3.6.0",
  "serve-static": "^1.14.1"
}

To install any module, you need in the local development.

npm install <PACKAGE-NAME> --save-dev

Dependencies

Dependencies: An object includes all the packages or modules your application needs or requires at runtime. So you will not be able to work on this project before installing those required packages.

The “dependencies” object is a property in the package.json file like the one shown below.

Dependencies:{ 
  "jquery": "^3.6.0", 
  "serve-static": "^1.14.1" 
}

To install any module, you need to be in the production mode.

npm install <PACKAGE-NAME> --production

OR

npm install <PACKAGE-NAME>

Add custom script to package.json file

Scripts property is an object that contains many defined shell commands, which can be executed by running it while writing the below Node Package Manager commands.

npm run <SCRIPT-NAME>

-- OR

npm run-script <SCRIPT-NAME>

The “scripts” object is a property inside the package.json file like below

scripts:{ 
   "<SCRIPT-NAME>": "<THE-COMMAND-LINE-SHOULD-BE-HERE>"
}

For example, we need to print “CodedTag.com Tutorial “ text in terminal or CLI

scripts:{ 
   "print_me”: "echo \"CodedTag.com Tutorial\" && exit 1" 
}

And to execute this example in CLI, you must run the below command.

npm run print_me

It will print the results like in the below image.

NPM Run Script Command

The standard uses case for scripts like compiling sass, minifying or starting your Node.js server, or anything else you want to write in the CLI or terminal related to your project.

List Of Useful Node Package Manager Commands

  • NPM Search Command: To search and find any js packages on the npm registry npm search <PACKAGE-NAME>
  • NPM View Command: Watch and view any js package information like the latest published package and version, keywords, and much more information else npm view <PACKAGE-NAME>.
  • NPM Login Command: Login to your account through email and password. This command sends you an email containing OTP verifying the code you must insert. npm login
  • NPM Install Command: This command to install js packages. As we mentioned, it affects package.json, package-lock.json, and the “node_modules“ folder. npm, install <PACKAGE-NAME>.
  • NPM Publish Command: To upload and publish your packages on the npm registry, but you will not be able to use this command before login in with the “npm login“ command npm publish <PACKAGE-NAME>.
  • NPM Run Command: It runs all scripts listed on the “scripts” object. You could able to execute bash commands on your operating system. npm run <PACKAGE-NAME>.

Conclusion

  • The Node Package Manager is a large online store with over 1.3 million packages. Allows developers to share, publish and download their javascript packages.
  • Node_module is like a wallet that contains all required packages.
  • Package-lock.json is a watcher to detect if the package.json file has changed or not. also, to monitor whether the version object is changed or not.