These days, many frameworks like Angular, React, Vue.js are using NPM to run and manage dependencies. Therefore, knowing how to use NPM has become an essential for being a front-end developer. As such, I have written this NPM tutorial to help beginners to better understand and using it.
What is NPM?
NPM is a Node Package Manager which is used to manage the dependencies of Node.js. As time goes by, NPM has become the largest repository for JavaScript with the help of all the open-source developers around the world.
Before we diving into the command and usage of NPM, you need to have NPM installed in your system. In case you not yet install NPM, you can follow this guide on how to install NPM.
Create Project with NPM
First, navigate to a directory which you would like to create the project. After that, initialize the project by running this command.
npm init
Then this command will guide you step by step to configure your package.json. The configuration of the package.json will be in the following order:
- Package name (project name)
- Version (project version)
- Description (project description)
- Entry point (project’s main file)
- Test command (to trigger testing like Standard)
- Git repository (project repository)
- Keywords (keyword for the project)
- Author (project’s author)
- License (project license)
As a result, you will get a configured package.json file. We proceed to install the dependencies.
Install dependencies with NPM
One of the most common tasks we perform with NPM is installing dependencies. The following is the command to install:
npm install <package-name>
<package-name> is the name of the dependency. For example, you can install a front-end UI library, Bootstrap with this command.
npm install bootstrap
Basically, this command generates a file and a folder. They are package-lock.json and node_modules. The purpose of package-lock.json is to lock the version of dependencies. All downloaded dependencies are placed inside node_modules.
On the other hand, if you want to install all the dependencies of a project based on the package.json. You can type this command into your terminal.
npm install
Afterwards, this command will install all the dependencies of the project. Obviously this is one of the key functions of the NPM. It allows projects sharing between developers without worry about managing the dependencies.
dependencies or devDependencies
When you installing a module, you can choose to install it as dependencies or devDependencies in package.json file. Below is a example of package.json file with dependencies and devDependencies.
{
"dependencies": {
"@angular/animations": "~12.0.1",
"@angular/common": "~12.0.1",
"@angular/compiler": "~12.0.1",
"@angular/core": "~12.0.1",
"@angular/forms": "~12.0.1",
"@angular/platform-browser": "~12.0.1",
"@angular/platform-browser-dynamic": "~12.0.1",
"@angular/router": "~12.0.1",
"rxjs": "~6.6.0",
"tslib": "^2.1.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~12.0.1",
"@angular/cli": "~12.0.1",
"@angular/compiler-cli": "~12.0.1",
"@types/jasmine": "~3.6.0",
"@types/node": "^12.11.1",
"jasmine-core": "~3.7.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"typescript": "~4.2.3"
}
}The difference between them is, dependencies are for production but devDependencies are for development. Therefore, those modules which are saved as devDependencies will be excluded from deployment.
To install a module and save it as dependencies, you need to add --save flag. As an example
npm install bootstrap --save
In contrast, to install and save it as devDependencies, you use --save-dev flag instead of --save.
Install dependencies globally with NPM
Previously, we learn on how to install dependencies in local. Now we try to install a module globally. Most of the modules installed globally is CLI. You can access these CLI installed globally in any directory of your system. CLI stands for command line interface. It is a text-based interface to enter commands.
As an example, you can install Angular CLI with this command.
npm install -g @angular/cli
After you installing Angular CLI, you can access to Angular CLI which is ng. For instance, you can use ng new my-first-project to initialize a basic angular project.
Uninstall dependencies with NPM
NPM provides the functionality to install dependency. Similarly, it also able to uninstall dependencies. The uninstall command is like this:
npm uninstall <package-name>
Basically, you replace the <package-name> with the name of dependency which you want to uninstall.
npm uninstall bootstrap
The above command is to uninstall bootstrap.
NPM Scripts
Inside package.json file, it has a scripts property. This scripts property is to automate repetitive tasks and simplify the command. Below is an example of scripts.
{
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
}
}With NPM scripts, you can run ng build --watch --configuration development, with this simple command.
npm run watch
So, you can notice the command is shortening significantly.
Lastly, I hope this NPM tutorial for beginners does help everyone on understanding what NPM is. And at the same time, this tutorial does provide everyone the knowledge about NPM usage. If you have any questions or topics which you are interested in, please leave your comment below.