If you aren't familiar, devDependencies and dependencies are two properties that are added to package.json when a package is installed as a develop...
For further actions, you may consider blocking this person and/or reporting abuse
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_modules
directory afternpm install
. Whennpm install
is run, it installs bothdevDepdendencies
anddependencies
.npm install --production
orNODE_ENV=production npm install
will 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
import
orrequire
code, will be part of the bundle. Webpack doesn't care if theimport
orrequire
is indevDependencies
vsdependencies
.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_modules
directory 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 --production
whereby thenode_modules
directory would be significantly smaller in size (but only if you semantically separated the correctdependencies
anddevDependencies
). There otherwise would not be a shortcut for this. As mentioned earlier, Webpack doesn't care where inpackage.json
the 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.
Take it like this your are building a house and you use all tools that you have to use. The tools and materials that are still going to be there when you give it to the owner like bricks, cement, roof etc., those are in the same analogy, packages that are going to be used on production, hence
npm install <package-name> --save
should be used. The tools that are necessary for building the house, but not needed by the owner like the spirit level, wheelbarrow, tape measure, spade etc., those are in the same analogy the packages and plugins that are not useful in production but useful while coding since the finished product is already made, hencenpm install <package-name> --save-dev
should be used.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 packages
refers toall required dependencies
that 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 reservedevDependencies
for things like babel plugins and presets, test runners. Things that are needed to compile your application.Make sense. Thank you.
I think packages should automatically go into dependencies or devDependencies when
is used
is there any command to installing npm install by excluding the devDependencies.
you can use
npm i --production
Well explained, thank you!