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.
Top comments (18)
Hello, I am a newbie. I understand there are development and production files. Now I have taken a couple of tutorials and one person just used { nodemon server.js} to render the file while another tutorial showed my how to {--save-dev} which also renders the file.
Now when I use {--save-dev} is that for to be semantically correct or is it to be used with something like webpack only?
I am confused on why to use {--save-dev} and should we do it everytime, well unless it is production.
This gets easily confusing. I've found it easier to digest to consider the two:
The system that your application is being deployed to (maybe a Lambda on AWS) will have a
node_modulesdirectory afternpm install. Whennpm installis run, it installs bothdevDepdendenciesanddependencies.npm install --productionorNODE_ENV=production npm installwill only install production dependencies listed independencies.Webpack as a tool is used to optimize a hierarchy of files into concatenated smaller chunks and transformed to include any dependencies that have any sort of
importorrequirecode, will be part of the bundle. Webpack doesn't care if theimportorrequireis indevDependenciesvsdependencies.Now an example use-case for going with semantics: If you happen to have a deploy process where there is concern for the size of the
node_modulesdirectory in a Lambda, as the file-system does have a limit that can easily be surpassed, it would be a wise decision to take advantage ofnpm install --productionwhereby thenode_modulesdirectory would be significantly smaller in size (but only if you semantically separated the correctdependenciesanddevDependencies). There otherwise would not be a shortcut for this. As mentioned earlier, Webpack doesn't care where inpackage.jsonthe dependencies are listed. It's the cases where the semantics can scale.Thanks so much for your response, from what I am understanding, npm install —production only uses the dependencies in file, but the devDepdedencies install a lot more development dependencies if you use them or not.
As i searched about it a lot, I found this article very useful, thanks. Now i have a question, how could I find out, that a package, is necessary for production and should be in dependencies? or not necessary for production and devDependencies is suitable??
Best way to think about it, is to first consider the entire dependency tree of your bundled, optimized, minified, and deployed application. In order for that code to function properly somewhere in the cloud, it's going to expect certain libraries/packages to be available for it to run. These would be necessary "dependencies." The packages used to run tests (jest), bundle (webpack), optimize (babel) and minify (esbuild) your code, are required/necessary libraries/packages for the development phase of your applications lifecycle.
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 independencies?Hi Mihail,
I understand your confusion in the sentence when I say:
these packagesrefers toall required dependenciesthat your application needs at run-time. Not specifically Webpack or Rollup.Yeah, but I mean I put my webpack and clientside dependencies into
devDependencies. And it works out great.it works, but it's not semantically correct.
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 🤔
Awesome 👏
Thanks Michael
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?
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.
Hi Vic,
If your code references a dependency, it should be in
dependencies, otherwise your app will break. You'd generally reservedevDependenciesfor things like babel plugins and presets, test runners. Things that are needed to compile your application.Make sense. Thank you.
is there any command to installing npm install by excluding the devDependencies.
you can use
npm i --productionWell explained, thank you!