loading...
Cover image for Demystifying `devDependencies` and `dependencies`

Demystifying `devDependencies` and `dependencies`

moimikey profile image Michael Scott Hertzberg ・1 min read

If you aren't familiar, devDependencies and dependencies are two properties that are added to package.json when a package is installed as a development dependency or a production dependency, respectively.

In the npm ecosystem packages are installed and consumed by requiring or importing them in files, or run in the command-line as binaries. When an application is fed into a module bundler, like Webpack or Rollup, all required dependencies are pulled together and bundled (as the name suggests). You should ensure that these packages are present in dependencies, as they're needed at runtime.

Development dependencies, or devDependencies are packages that are consumed by requiring them in files or run as binaries, during the development phase. These are packages that are only necessary during development and not necessary for the production build. Some examples of packages that would only be required during development are babel plugins and presets, test runners and linter packages.

Alternatively, there is a dependency that is necessary in both production and development. In this case, it can be added to dependencies, since dependencies are available in both production and development.

I hope this explanation helps with you in deciding whether to --save-dev or --save that package, next time.

Discussion

pic
Editor guide
Collapse
qm3ster profile image
Mihail Malo

The second paragraph is confusing.
Why should I have Webpack or something that webpack is bundling in dependencies? Both are often (there are exceptions) used only in development. Only server dependencies should be in dependencies?

Collapse
moimikey profile image
Michael Scott Hertzberg Author

Hi Mihail,

I understand your confusion in the sentence when I say:

You should ensure that these packages are present in dependencies, as they're needed at runtime.

these packages refers to all required dependencies that your application needs at run-time. Not specifically Webpack or Rollup.

Collapse
qm3ster profile image
Mihail Malo

Yeah, but I mean I put my webpack and clientside dependencies into devDependencies. And it works out great.

Thread Thread
moimikey profile image
Michael Scott Hertzberg Author

it works, but it's not semantically correct.

Thread Thread
qm3ster profile image
Mihail Malo

Seems more semantic than downloading unused packages. 🤔
The less packages in production, the faster and safer 🤔
Maybe we should just Rollup our servers and not have runtime dependencies at all 🤔

Collapse
vilmes21 profile image
VM

Question: if I have code referencing a devDependency. And that code continue to exist on prod, my app would break, correct? Then should I remove my code when deploying?

Collapse
moimikey profile image
Michael Scott Hertzberg Author

Hi Vic,

If your code references a dependency, it should be in dependencies, otherwise your app will break. You'd generally reserve devDependencies for things like babel plugins and presets, test runners. Things that are needed to compile your application.

Collapse
vilmes21 profile image
VM

Make sense. Thank you.

Collapse
alanaasmaa profile image
Alan Aasmaa

Also one option would be to check envoriment. And when building for production uglify removes unnecessary code. See more in uglify documentation.

I actually use this also for building multible different sites from one source.

Collapse
kiransiluveru profile image
kirankumar

is there any command to installing npm install by excluding the devDependencies.

Collapse
jainabhishek14 profile image
Abhishek Jain

you can use npm i --production