Install Dev Dependencies With npm

Install Dev Dependencies With npm

Dev dependencies are packages required only for the development phase and not for the application to run in production. Some common examples of such packages are testing frameworks (jest, cypress, karma, mocha), code linters (prettier, eslint), build tools (babel, webpack), and more.

The short answer

To install one or more npm packages as dev dependencies, you can use the [.inline-code]npm install[.inline-code] command combined with the [.inline-code]--save-dev[.inline-code] flag as follows:

$ npm install <package_name …> --save-dev

For example:

$ npm install jest eslint --save-dev

Alternatively, you can use the shorthand [.inline-code]-D[.inline-code] flag (short for development):

$ npm install <package_name> -D

All the npm packages you add using the above flags will be found under the [.inline-code]devDependencies[.inline-code] section in [.inline-code]package.json[.inline-code] and automatically installed in the [.inline-code]node_modules[.inline-code] folder of your project.

[#easily-recall-with-ai]Easily retrieve this command using Warp’s AI Command Search[#easily-recall-with-ai]

If you’re using Warp as your terminal, you can easily retrieve this command using the Warp AI Command Search feature:

Entering [.inline-code]npm install dev dependencies[.inline-code] in the AI Command Search will prompt an [.inline-code]npm[.inline-code] command that can then quickly be inserted into your shell by doing [.inline-code]CMD+ENTER[.inline-code].

[#install-a-specific-package-version]Installing a specific package version[#install-a-specific-package-version]

By default, the [.inline-code]npm install[.inline-code] command installs the latest version of the specified packages. If you want to install a specific version instead, you can use [.inline-code]@[.inline-code] followed by the package's version number.

For example:

$ npm install jest@^27.0.0 --save-dev 

[#install-using-the-package-json]Installing dev dependencies using the [.inline-code]package.json[.inline-code][#install-using-the-package-json]

Suppose you want to add multiple packages with specific versions, then adding the package names and versions in the [.inline-code]package.json[.inline-code] file would be easier than manually installing each package using the [.inline-code]npm install <package_name>[.inline-code] command.

"devDependencies": {
  "eslint": "^7.7.0",
  "eslint-config-prettier": "^6.9.0",
  "jest": "^29.4.2"

Once the [.inline-code]package.json[.inline-code] file is updated, you can run the [.inline-code]npm install[.inline-code] command to automatically install all the packages listed under the [.inline-code]dependencies[.inline-code] and [.inline-code]devDependencies[.inline-code] sections in the [.inline-code]node_modules[.inline-code] folder.

$ npm install

[#install-dev-dependencies-only]Installing dev dependencies only[#install-dev-dependencies-only]

To install only the dev dependencies, you can use the [.inline-code]npm install[.inline-code] command followed by the [.inline-code]--only=dev[.inline-code] flag:

$ npm install --only=dev

[#troubleshoot-installation-issues]Troubleshooting common dev dependency installation issues[#troubleshoot-installation-issues]

If you cannot install the [.inline-code]devDependencies[.inline-code], cross-check the value of the [.inline-code]NODE_ENV[.inline-code] environment variable (commonly used in the Node.js environment). If this value is set to [.inline-code]production[.inline-code], then npm will skip the installations of packages listed under the [.inline-code]devDependencies[.inline-code]. Thus, ensure that the value for [.inline-code]NODE_ENV[.inline-code] is set to [.inline-code]development[.inline-code].

To verify the value of the [.inline-code]NODE_ENV[.inline-code] variable, you can use the [.inline-code]echo[.inline-code] command as follows:

$ echo $NODE_ENV

To set or update the value of the [.inline-code]NODE_ENV[.inline-code] variable, you can use the [.inline-code]export[.inline-code] command as follows:

$ export NODE_ENV=development

Alternatively, you can use the following syntax, to locally set the [.inline-code]NODE_ENV[.inline-code] variable as [.inline-code]development[.inline-code] everytime you execute the [.inline-code]npm install[.inline-code] command, ensuring that both production and development dependencies are installed. 

$ NODE_ENV=development npm install

[#reinstall-dev-dependencies]Reinstalling dev dependencies[#reinstall-dev-dependencies]

Reinstalling or updating or all npm packages follows the same process and commands for both [.inline-code]dependencies[.inline-code] and [.inline-code]devDependencies[.inline-code]. Read more about how to reinstall all packages with npm

To update or re-install only the dev dependencies, you must use the [.inline-code]--save-dev[.inline-code] flag. This command will update the already installed dev dependencies according to the version ranges defined in the [.inline-code]package.json[.inline-code] file.

$ npm install --save-dev

To update a specific package to the latest version regardless of the version specified in the [.inline-code]package.json[.inline-code] file, use the [.inline-code]npm install[.inline-code] command followed by the package name:

$ npm install <package_name> --save-dev 

Alternatively, you can use the [.inline-code]npm update[.inline-code] command as well: 

$ npm update --save-dev
$ npm update <package_name> --save-dev

[#troubleshoot-cache-issues]Troubleshooting cache issues when updating already installed packages[#troubleshoot-cache-issues]

NPM maintains a cache of downloaded packages to speed up the installations. If you encounter any installation issues, consider clearing the npm cache by using the [.inline-code]npm cache[.inline-code] command:

$ npm cache clean --force