Understanding Dev, Peer, and Regular Dependencies in JavaScript

Know how packages work together in JavaScript applications

Photo by Ryan Quintal on Unsplash

When building a modern JavaScript app, you will likely rely on many other packages and third-party dependencies. For example, you might use react and react-dom for your UI, lodash for utility helper methods, webpack or rollup as your bundler, and jest with @testing-library/react for unit tests.

All of these packages are stored as dependencies in your package.json file. Understanding whether to include them as dependencies, devDependencies, or peerDependencies can sometimes be a struggle for newer developers.

In this article, we’ll look at the three types of dependencies found in the package.json file and what each does.

Regular Dependencies

dependencies are packages used in your app’s production bundle. If you’re building a React app, then react and react-dom would be dependencies.

If you’re using react-router for client-side routing, that would also be part of your dependencies. Any other packages like lodash or a design system library like Material UI (@mui/material) would also be dependencies.

There is an exception to this rule, but we’ll cover this down in the Peer…