Installing Dev Dependencies with npm: Beginners' Guide (2024)

Whenever you're developing and running a project on localhost, you need to specify the packages your project depends on. These packages are known as dependencies and devDependencies. With the package manager installation, dependencies get automatically downloaded and listed in the package.json file of the package manager you're using. You can manually edit this package.json file or use the command line to add mode dependencies and devDependencies as per your project requirements.

If you're using Node Package Manager and want to add node-modules as npm devDependencies for your project development, you need to know a few things beforehand. Here we’ve curated a complete guide comprising 101 npm install devDependencies. Whether you are using npm exclusively with Node.js or as a build tool for the front-end, this guide will help you add devDependencies in minutes.

So without further ado, let’s take a look at the process below. You can also learn Node.js step-by-step to start your journey as a full-stack developer.

What is devDependency?

In the package.json file of your package manager, i.e., npm, there is an element known as devDependencies. It contains all the packages with specific version numbers that you require in the development phase of your project and not in the production or testing environments. Whenever you add a library or module that is required only in the development of your project, you can find it under devDependencies.

For npm users, the below command will help to add devDependencies in the project: [Replace 'dev dependencies' with the module you're installing.]

Difference Between Dependency and devDependency

For every web application project, the package.json file of the package manager contains the metadata, i.e., dependencies and devDependencies with corresponding version numbers. But both work differently. Dependencies are used for production or in testing environments. Whereas devDependencies are used for project development purposes only. Here we’ve created a comparison table that will help you understand the key differences between dependencies and devDependencies. Have a look.

Dependencies	devDependencies
Dependency is an object that contains the library, which your project requires for production environments and functioning effectively.	devDependencies are those packages in the package.json file that you need only for project development purposes. Example- Babel, Webpack, etc.
You require these packages to test and run your project on the localhost.	These types of dependencies are required during the web application development process but not while testing or executing it.
You can add dependencies to the package.json file by running the below command: npm install <dependencies>	For adding devDependencies to your project, run the below command: npm install <dev_dependencies> --save-dev

Install NPM Modules as devDependency

There are different npm modules like mocha, grunt-contrib-watch, gulp-jade, jscs, etc. You can add these devDependencies in your project to perform development tasks. Here we’ve provided a complete step-by-step guide for installing npm modules as devDependencies on Windows, macOS, and Linux. Have a look. You can also sign up for the KnowledgeHut to learn Node.js step-by-step course and know more about Node.js environment for installing devDependencies.

Note: We have used the Git Bash terminal along with VS Code for installing Mocha library.

Method 1

First, open your choice of theterminalwithin the project folder; Windows users can use Git Bash or Command Prompt, macOS and Linux users can use ZSH terminal.
Next, type in the below commandto install your desired npm-module. (Replace dev dependencies with the package name you want to add.)

npm install <dev_dependencies> --save-dev

Once the installation is finished, the dev dependency will be addedto your package.json file.

Method 2

Alternatively, you can edit the package.json file directly and add an attribute, 'devDependencies' to it.
For that, copy the below file to a text editor and save it as devDependencies after replacing the name and version numbers as per semantic version of each dependency.

"name": "dev_dependencies","version": "1.1.0","dependencies": {"my_dep": "^1.1.0","another_dep": "~2.1.0"},"devDependencies" : {"my_test_framework": "^3.2.0"."another_dev_dep": "1.1.0 - 1.3.0"}

What to Do If Unable to Install devDependency?

There can be three different reasons why you're unable to install devDependencies in your package.json file. The reasons are as follows:

1. Use --only=dev

When your NODE_ENV is set to production, you need to use the below command to install devDependencies for your project.

npm install --only=dev

The element 'only' will ensure that only the devDependencies get installed irrespective of the NODE_ENV.

2. Set --production Flag to False

Setting the --production flag for the npm configuration of your project to false means it will start to install the npm libraries as devDependencies. Enter the below-mentioned commands in a terminal window to do that.

npm config get productionnpm config set -g production false

3. Set Up a New NPM Package

If there is a faulty installation, you can verify that by creating a new npm package folder in any location but the same filesystem you're presently using.
Then initialize npm by entering the below command:

npm init --yes

Next, install any npm module as dependencies and devDependencies by entering the following commands: [Replace 'dependencies' and 'dev_dependencies' with your desired package names.]

npm install dependencies --savenpm install <dev_dependencies> --save-dev

Now, check whether the dependencies and dev_dependencies files are saved under the corresponding files.
If it is, then there was a problem with your npm package folder.
In this case, you can delete this node-module along with the package-lock.json file and run the below command to reinstall the npm modules.

npm install

You should be able to add npm modules as devDependencies in your project after performing these steps.

Managing Dev Dependencies with NPM Scripts

We can Automate common dev tasks like testing, building, and linting by defining scripts in ourpackage.jsonfile.
Example scripts:"test": "npmrun jest"to run Jest tests,"lint": "eslint."for code linting.
We have the following benefits: Saves time, improve consistency, and simplifies development workflow.

Code example:

{ "scripts": { "test": "npm run jest", "lint": "eslint .", "build": "webpack --mode production", "start": "node server.js" }}

Updating and Removing Dev Dependencies

We can update dev dependencies with thenpmupdatecommand, specifying package names or using wildcards (npmupdate --save-dev *).
We need to remove unused dependencies withnpmuninstallfollowed by package names.
Also, we have to keep dependency versions consistent across our team to avoid compatibility issues.

Code example:

npm update --save-dev eslint webpacknpm uninstall @babel/core

Best Practices for Managing Dev Dependencies

Following are the best practices to follow for managing dev dependencies:

Minimize dependencies: Only install required dev tools, avoid bloated projects.
Use dependency groups: Separate dev and production dependencies for clarity.
Pin versions: Specify exact versions inpackage.jsonfor stability.
Use lock files:npmciinstalls dependencies based on the defined versions.
Regularly clean dependencies: Remove unused packages to avoid clutter.

Alternative Tools for Dev DependencyManagement

In the realm of dev dependency management, several alternative tools offer diverse features to cater to different development needs. Yarn, a prominent package manager, stands out for its swifter installation process and offline support, providing developers with a seamless experience. Nx, on the other hand, goes beyond traditional package management, serving as a build framework that facilitates the creation of applications agnostic to specific frameworks, enabling shared dependencies across projects.

Webpack Dev Serveremergesas another valuable tool, specifically addressing the need for hot reloading during development. This server ensures that changes in the codebase areimmediatelyreflected in the running application, enhancing the development experience by allowing developers to see real-time updates without manual refreshes.

These alternative tools present developers with a range of options for managing dev dependencies, each offering unique advantages. Choosing the right tool depends on the specific requirements of the project and the preferences of the development team, contributing to a more tailored and efficient development workflow

Looking to enhance your programming skills? Join our Python programming training and unlock endless possibilities. Start your journey today!

Conclusion

That’s all! Now you know how to install devDependencies with npm. Effectively managing development dependencies is paramount to ensure a seamless and efficient development process. DevDependency, a concept often associated with package management tools like npm, plays a crucial role in delineating dependencies used solely for development purposes. By comprehending this distinction and incorporating it into our workflow, developers can streamline their projects.

Leveraging NPM scripts further enhances the efficiency of managing dev dependencies. These scripts allow for automated tasks, facilitating actions such as installing dependencies, running tests, and other essential development processes. Integrating these scripts into the workflow not only saves time but also ensures consistency across different environments Following established best practices is essential in maintaining a clean and organized project structure. This includes avoiding the global installation of dev dependencies, which can lead to version conflicts and unexpected behavior. Instead, local installation per project is recommended, enhancing project isolation. Next step, checkout our blog where does NPM install global and local packages?