Introduction to NPM and Dev Dependencies
Npm (initially called Node Package Manager) is a package manager for the JavaScript programming language and the default package manager for Node.js. It is the world’s largest software registry, used by over 17 million developers and consisting of over 2 million packaged.npm is written in JavaScript and was released in 2010.
It is open source, and developers worldwide use npm to manage dependencies for their JavaScript projects. It is free to use, and you can share your packages with the community at no cost.
Every JavaScript project has a package.json file which contains metadata about the project, such as the name, version, and list of dependent packages. The dependent packages can be listed under two categories in the package.json: “dependencies” or “devDependencies”.
- “Dependencies” – Dependencies required by the project in production.
- “DevDependencies” – Dependencies required by the project only for local development and testing.
Check out our free technology courses to get an edge over the competition.
Difference between Dependency and DevDependency
Wondering how to differentiate DevDependencies vs Dependencies? Here’s a small guide to learn about it.
| Dependency | DevDependency |
| Mentioned under the “dependencies” key in the package.json file | Mentioned under the “devDependencies” key in the package.json file |
| Projects in the production environment require them | They are required by projects for local development and for testing the project |
| These packages can be installed by executing npm install in the folder containing package.json or by running npm install “$package” to install a specific package from any directory | These packages can be installed by executing npm install in the folder containing package.json but are not installed by executing npm install “$package”. If required, the packages can be installed by passing the –dev flag, npm install “$package” –dev |
| Dependencies are installed transitively, i.e., if dependency A requires B, and B requires C, then B and C are installed | DevDependencies are not installed transitively, i.e. we don’t need dependency B to test dependency A. So B can be left out. |
Installing Node.js and NPM on your System
Node.js and npm can be installed in multiple ways depending on the working environment, operating system, etc. As these are open sources, one approach is to directly clone the source code from Git onto your system and then compile it. Another way is to download the 32-bit/64-bit Installer from the official node.js website, https://nodejs.org/en/download, depending on your OS (Windows/ macOS /Linux) and walk through the installation wizard. These installers include both Node.js and an npm distribution.
The installation can be verified by running the below commands at a command prompt. If the installation was successful, the commands should print the installed node/npm version. If you receive an error saying node not found, you might need to add the installation path to a system variable and open a new command prompt session for the changes to reflect.
$ node -v v16.18.1 $ npm -v 8.19.2
The last step is to update the installed npm version (if required) using the following command:
$ npm install -g npm@latest
Understanding package.json and Dependencies
The package.json is a metadata file containing information about the project and its dependencies. This package.hson file is created automatically by navigating the project folder and running the npm install command. It is mandatory to publish this file as it makes the project shareable.
The ‘name’ and ‘version’ are the mandatory fields in a package.json file. The list of dependencies and devDependencies discussed earlier are also included in this file. Various other fields can be added to the package.json, found in the official documentation.
An example package.json is as below:
{ "name": "my-awesome-package", "version": "1.0.0", "author": "Your Name <email@example.com>", "dependencies": { "my_dep": "^1.0.0", "another_dep": "~2.2.0" }, "devDependencies": { "my_test_framework": "^3.1.0", "another_dev_dep": "1.0.0 - 1.2.0" } }
If you’re wondering how to install all dependencies in package json the npm install command will install all modules listed as dependencies in package.json. If the command is executed with the -g or –global flag, it installs the modules as a global package. Adding the –production flag will make it ignore the dependencies under ‘devDependencies’. For the other options, refer to the npm-install documentation at https://docs.npmjs.com/cli/v8/commands/npm-install.
Check Out upGrad’s Software Development Courses to upskill yourself.
Installing Dev Dependencies using NPM
In the package.json file of your project, the “devDependenies” contains packages with specific version numbers that are required during the development phase and not in the production environment.
Below is a step-by-step command to add a dev dependency to a project using the npm commands:
Method 1
- Open a command prompt (Windows) / (macOS & Linux).
- Type the below command to install the desired npm module (Replace dev_dependencies with the required dependency module).
$ npm install <dev_dependencies> --save-dev
Once the installation is finished, the dev dependency will be added to the package.json.
Method 2
- Open the package.json and add the parent key devDependencies
- Under this, add the required dependencies and the version number per the semantic dependency version.
Common Dev Dependencies for Front-end Development
Commonly used front-end dev dependencies include:
- Browserify – Tool for curating node-flavoured common modules for the browser.
- Tape – Tap-producing test harness for nodes and browsers.
- Sinon – Standalone test spies, stubs and mocks for JavaScript.
Common Dev Dependencies for Back-end Development
Commonly used back-end dev dependencies include:
- babel – JavaScript Compiler used ECMAScript 2015+ code into a backwards-compatible version of JavaScript.
- ESLint – Tool for identifying and reporting on patterns found in ECMAScript/JavaScript code.
- Grunt – Automation framework for repetitive tasks with multiple plugins.
Explore our Popular Software Engineering Courses
Managing Dev Dependencies with NPM Scripts
Using Dev Dependencies for long enough can make testing tedious, where you start fighting with the tool rather than writing code for your application. Each new tool has its way of doing things, which requires you to learn its functions, syntax, etc.
Since most packages have their own CLI, running them directly using the command line rather than the build tool is often better. However, running multiple tools can aggravate some issues. This is where npm scripts come in.
Starting from npm version 6, it is possible to define “scripts” as part of the package.json, which can run various CLI commands. Once the script is defined, it can be run using the npm-run-script command.
These scripts can be as simple as a single command or a chain of multiple commands. For example, the sass tool compiles the input sass file to a CSS file. This can be done by installing the sass tool using npm install sass –save-dev and then run using:
$ sass <input>.scss <output>.css
Let’s convert this into a script in our package.json to execute the same using the npm run command.
{ . . . "scripts": { "scss": "sass <input>.scss <output>.css " } }
Now executing npm run scss yields the same result as the command line sass tool mentioned earlier. This process can be repeated for other dev dependencies in the same way.
Updating and Removing Dev Dependencies
The npm package manager also provides options to list outdated dependencies and get npm update package.
To list outdated packages, run:
$ npm outdated -g --depth=0.
To get npm update package, run
$ npm update -g <package_name> on the command line.
To update all international packages on the command line, run
$ npm update -g.
To update the package.json in addition to local modules:
$ npm update --save-dev
To get npm remove package, you would need to use the -D or the –save-dev flag along with the npm uninstall command. Similarly, these commands must be executed in the root directory where the dependencies are located.
$ npm uninstall -D <package_name> or $ npm uninstall --save-dev <package_name>
Troubleshooting Dev Dependency NPM Installation Errors
There could be multiple reasons for installing dev dependencies that may cause errors. Below are some common troubleshooting tips to help resolve them:
- If the NODE_ENV is set as production, running the npm install command will only install modules in “dependencies” and ignore the “devDependencies”. You can run the install command using the –only=dev option. This ensures that devDependencies get installed irrespective of NODE_ENV.
- If the –production flag in the npm config is true, only the production dependencies get installed. Setting the –production flag to false would help resolve this and install the devDependencies. This can be done by running the below commands.
$ npm config get production $ npm config set -g production false
- You could have a faulty or misconfigured npm installation that cannot add devDependencies. In this case, you can create a new npm package in a different location by running the npm init –yes command and installing the devDependencies using the usual commands.
Explore Our Software Development Free Courses
Best Practices for Managing Dev Dependencies
npm is the most common way to use the npm-cli. But with bigger projects, it gets challenging to manage all dependencies, especially when it is being distributed and utilised by others in the community. Below are some of the best practices recommended for maintaining projects:
- Using Caret Ranges (^) to maintain dependency version – Mentioning dependency version ranges in the package.json helps provide the same experience to other developers while ensuring higher compatibility. For example, mentioning a dependency version as ^3.0.0 means that the dependency can be used for any version of 3. x.x, which would support backward compatibility, the latest bug fixes, and major refactoring.
- Committing package-lock.json to source control – The npm documentation suggests that committing to the created package lock to source control is recommended. This ensures that anyone else, be it your deployments, teams, your CI/continuous integration, and anyone else running npm installs in your package source, gets the same dependency tree you were working to develop.
Alternative Tools for Dev Dependency Management
Some other open-source package managers can then be used to add dev dependencies to the project, like yarn, which Facebook develops. Yarn comes with an additional license checker which fetches information regarding the project’s license and also supports adding a description explaining why a particular dependency was included in a project – both of these features are not available in npm, making yarn a popular choice among developers.
Some popular alternatives to npm include Yarn, PNPM, Bower, Verdaccio, and Rush.
In-Demand Software Development Skills
Conclusion
Understanding how to install dev dependencies npm is important if you want to enter the world of Software. However, upGrad’s Master in Science in Computer Science from Liverpool John Moores University can help you gain an understanding of the same, helping you bag a place among the list of leading developers.
Alternatively, you can also enrol for the Executive Post Graduate Programme in Software Development – Specialisation in Full Stack Development by IIIT-B to advance your career. This course will also help you understand the impact of devDependencies on a project.
![Top 14 Technical Courses to Get a Job in IT Field in India [2024]](/__khugblog-next/image/?url=https%3A%2F%2Fd14b9ctw0m6fid.cloudfront.net%2Fugblog%2Fwp-content%2Fuploads%2F2020%2F09%2F911-Banner.png&w=3840&q=75)
![25 Best Django Project Ideas & Topics For Beginners [2024]](/__khugblog-next/image/?url=https%3A%2F%2Fd14b9ctw0m6fid.cloudfront.net%2Fhttps%3A%2F%2Fec2-3-7-241-34.ap-south-1.compute.amazonaws.com%2Fblog%2Fwp-content%2Fuploads%2F2020%2F04%2F281.png&w=3840&q=75)
![Must Read 50 OOPs Interview Questions & Answers For Freshers & Experienced [2024]](/__khugblog-next/image/?url=https%3A%2F%2Fd14b9ctw0m6fid.cloudfront.net%2Fugblog%2Fwp-content%2Fuploads%2F2020%2F08%2F952-OOPS-Interview-Questions.png&w=3840&q=75)
![33 Best Computer Science Project Ideas & Topics For Beginners [Latest 2024]](/__khugblog-next/image/?url=https%3A%2F%2Fd14b9ctw0m6fid.cloudfront.net%2Fugblog%2Fwp-content%2Fuploads%2F2020%2F09%2F909-Banner.png&w=3840&q=75)
![Top 58 Coding Interview Questions & Answers 2024 [For Freshers & Experienced]](/__khugblog-next/image/?url=https%3A%2F%2Fd14b9ctw0m6fid.cloudfront.net%2Fugblog%2Fwp-content%2Fuploads%2F2021%2F08%2F2239.png&w=3840&q=75)
