npm Save Flag Guide: Best Practices For Developers

What does the npm save flag do?

The npm save flag helps manage installed packages in a project. When running npm install, the --save, --save-dev, and --save-optional flags decide where the package gets listed in the package.json file. Knowing how these flags work makes it easier to track dependencies for development and production.

Let’s break down how each one works.

What is the npm Save Flag?

The save flag in npm dictates how an installed package is recorded inside the package.json file. By default, npm install without any flag installs the package into the node_modules directory but does not update the dependencies section of the package.json file. Using different save flags, you can control whether a package is recorded under dependencies, devDependencies, or optionalDependencies.

Different npm Save Flags and Their Use Cases

save (Default Behavior in Older Versions)

Earlier versions of npm (before version 5) required the --save flag to add the package to the dependencies section of the package.json file.

Example:

1npm install lodash --save

​

This command installs the lodash package and updates the dependencies section in the package.json file like this:

1{
2  "dependencies": {
3    "lodash": "^4.17.21"
4  }
5}

​

Since npm v5 and later, this behavior is now the default.

save-dev (For Development Dependencies)

The save-dev flag is used to install npm packages that are needed only during development. These packages do not get included in a production build.

Example:

1npm install jest --save-dev

​

The package.json file gets updated like this:

1{
2  "devDependencies": {
3    "jest": "^29.0.0"
4  }
5}

​

Use save-dev when installing:

• testing frameworks (e.g., Mocha, Jest)

• build tools (e.g., Webpack, Babel)

• Code linters and formatters (e.g., ESLint, Prettier)

Mermaid Diagram for Dependency Organization:

save-optional (For Optional Dependencies)

The save-optional flag is used when a package is not critical for the application but can be installed if needed.

Example:

1npm install fsevents --save-optional

​

This command installs the package under the optionalDependencies section in the package.json file:

1{
2  "optionalDependencies": {
3    "fsevents": "^2.3.2"
4  }
5}

​

Use this for packages that enhance functionality but are not strictly required.

no-save (Avoid Recording in package.json)

If you want to install a package without modifying the package.json file, use:

1npm install lodash --no-save

​

This installs lodash but does not update the dependencies section.

Managing Installed Packages in Different Environments

Production vs. Development Dependencies

When working on a project, some npm packages are needed only during development, while others are required in production.

To install only production dependencies, use:

1npm install --production

​

This excludes dev dependencies.

For a full install, including both production and development dependencies:

1npm install

​

Specifying a Package Version

When installing npm packages, specifying a version helps maintain consistency.

Installing an exact version

1npm install react@18.2.0 --save

​

This adds:

1{
2  "dependencies": {
3    "react": "18.2.0"
4  }
5}

​

Use an exact version when stability is needed.

Using Version Ranges

npm supports version ranges to allow updates within specified limits:

• Caret (^): Updates within the same major version (^1.2.3 allows 1.x.x)

• Tilde (~): Updates within the same minor version (~1.2.3 allows 1.2.x)

Installing Packages Globally vs. Locally

• Local Installation (Default): Packages are installed in the current working directory inside node_modules.

• Global Installation: Use the g flag to install a package globally.

1npm install eslint -g

​

Understanding devDependencies Sections in package.json

The devdependencies sections of the package.json file store npm packages required for development.

Example package.json file:

1{
2  "dependencies": {
3    "express": "^4.18.2"
4  },
5  "devDependencies": {
6    "jest": "^29.0.0",
7    "webpack": "^5.0.0"
8  }
9}

​

To install both dependencies and dev dependencies, use:

1npm install

​

How npm Handles Default Registry and Scoped Packages

By default, npm installs packages from the default registry, which is https://registry.npmjs.org/ . Scoped packages belong to a specific organization and use a scope name.

Example:

1npm install @angular/core

​

Removing Installed Packages

To remove an installed package:

1npm uninstall lodash

​

For dev dependencies:

1npm uninstall webpack --save-dev

​

Wrapping Up: Understanding the npm Save Flag

The npm save flag helps keep project dependencies organized in the package.json file. Using --save-dev for development, --save-optional for optional dependencies, and --save for production makes it easier to manage packages. Keeping dependencies sorted ensures smooth version control and a more organized workflow. Knowing how to use the npm save flag can make package management simpler and less stressful.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.