Website: https://www.knowledgehut.com
Share
Installing Dev Dependencies with npm: Beginners' Guide
Read it in 8 Mins
The Only Way to Learn Coding
Is by Doing
In this article
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.]
npm install <dev_dependencies> --save-dev
Note: Many developers use the open-source yarn package manager, developed by Facebook, instead of npm while installing devDependencies. It's because yarn comes with a license checker that fetches information regarding all the licenses related to your project and supports the 'why' command that shows why a particular dependency is present in your project. But, npm fails to offer both. You can enter the below command in a terminal for yarn install devDependencies; make sure to replace 'dev_dependencies' with your package name.
yarn add dev_dependencies –dev
If you want to learn about the other package managers and the process of installing devDependencies on each, get started with the full stack software developer course.
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 the terminal within 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 command to 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 added to 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:
- If your NODE_ENV is set to production, entering the 'npm install' command won't add the devDependencies automatically. Since the command will run in a production environment, it will act like 'npm install --production', and all devDependencies will be excluded from the installation process.
- In case the --production flag for the npm configuration of your project is set to true, npm modules will only get installed as dependencies and not devDependencies even if you run the npm install dev dependencies command.
- If none of the above is a reason, then you're probably dealing with a faulty installation, and it is restricting you from adding npm modules as devDependencies.
Perform the below troubleshooting methods to resolve this issue.
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 production npm 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 --save npm 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.
Conclusion
That’s all! Now you know how to install devDependencies with npm. Both of the above-mentioned methods are effective. Either you can do it from the command line or by editing the package.json file directly. If you have further queries, drop us a comment through the below box. Thanks for reading!
For next step, checkout our blog where does NPM install global and local packages?
Frequently Asked Questions (FAQs)
1. How Does NPM Install devDependencies?
NPM installs devDependencies within the package.json file. The ‘npm install’ command should add all the dependencies and devDependencies automatically during installation. If you need to add specific devDependencies to your project, you can use this command- ‘npm install --save-dev’. This will add your desired npm library to the package.json file.
2. Is TypeScript a devDependency?
Yes, TypeScript is a devDependency and you can add it to your project using this command- ‘npm install typescript --save-dev’. But before installing this compiler, you need a copy of Node.js as an environment to run the package. Once it’s installed, you’ll find TypeScript within the package.json file as a devDependency.
3. What Do You Mean by NPM devDependencies?
Development dependencies (devDependencies) are meant to support the development process of your web application. When installed through the node dependency manager, npm, the devDependencies will get stored in the package.json file. However, devDependencies won’t work in the production or functioning of your project.
4. How Can I Install Dependencies?
Dependencies get installed in your project whenever you install the package manager for the first time. For example, the ‘npm install’ command adds all the dependencies to the default package.json file, which was created during the first initialization (npm init --yes) of your package manager, npm. However, if you want to add any dependency to the package.json file for your project-specific requirements, use this command- ‘npm install [--save-prod]’ [Replace 'dependencies' with your package name.]
Upcoming Web Development Batches & Dates
| Name | Date | Fee | Know more |
|---|