5

I am a beginner (~15 days into learning web-development) and I am currently learning React among other things and I am sorry if this sounds too trivial.

I am trying to understand the difference between devDependencies and dependencies and the correct usage of the same.

I have tried to figure it out from the docs and stackoverflow questions but I am not a 100% sure if I have this right. So kindly review my understanding as of now and let me know if I have this right so far.

Definition

  • dependencies: only the packages which are finally going to be used by the production build. These will be there in the final package.json file.

  • devDepndencies: the packages which eases my development efforts and finally will not be used by the product / application. These will not be included in the package.json folder of the final build.

Importance of correct usage

Fairly important as correctly excluding devDependencies from dependencies can make the app lighter. At the same time, incorrectly excluding required dependencies will cause my app to break.

Practical example

In the package.json file created during my tutorial, I had the following packages and I am mentioning the type of dependency that the package should have according to my current understanding. Please let me know if I am erring somewhere:

  • babel-cli : devDependency
  • babel-core: devDependency
  • babel-loader: devDependency
  • babel-plugin-transform-class-properties: devDependency
  • babel-preset-env: devDependency
  • babel-preset-react: devDependency
  • css-loader: devDependency
  • node-sass: dependency
  • react: dependency
  • react-dom: dependency
  • react-modal: dependency
  • sass-loader: dependency
  • style-loader: dependency
  • validator: dependency
  • webpack: dev-dependency
  • webpack-dev-server: dev-dependency

Please let me know if I have any of these wrong

James Z
  • 12,209
  • 10
  • 24
  • 44
sam
  • 95
  • 7
  • It's more of a run-time vs dev-time distinction. I think most of those things are devDependencies because you don't need `node-sass` running whenever you are serving your app. Webpack will put together a `dist` folder and you can hand that over to whatever static server you need. That static server would likely be a dependency. However, I wouldn't get too bogged down over the distinction. You're optimizing prematurely rather than just developing. – zero298 Oct 14 '19 at 18:58
  • I wrote an answer on another question that was confused about the distinction here: [Can you import a `devDependency` in your code?](https://stackoverflow.com/q/55068767/691711) – zero298 Oct 14 '19 at 19:00
  • @zero298: Thanks for your response. I am not developing at the moment, just learning the concepts. But I appreciate your concern that I may be overthinking this and will probably figure this out as I go deeper into this. – sam Oct 14 '19 at 19:09

2 Answers2

2

devDependencies are dependencies only required within your development environment or that are required for you to build your UI, for example nodemon is a dev dependency because you'll never run your application with it.

One of the advantages of splitting up your devDependencies from your normal dependencies is a smaller docker image size when building your final layer.

For example, in my dockerfile I'll run a suite of tests and also build the UI which requires an npm install but when building the final image that is going to actually run I will simply copy over the built UI files via docker then I'll run an npm install --production so that my devDependencies won't install and bloat my node_modules folder.

Hope this helps.

Rami
  • 490
  • 7
  • 22
1

devDependencies are the module dependencies which are only required during the active development of your web application. For example, when you're coding new features into your web application. A lot of devDependencies will make development easier on your end and can provide functionality such as linting, bundling, transpiling, etc...

In contrast, regular dependencies are the modules which are necessary during the runtime of your web application. I.e. these are the necessary dependencies for your web application to work correctly when other users want to interact with your web application.

Note: By module I mean the underlying code from the library which you're leveraging. A more complete definition can be found here.

Your concerns about including more code than necessary for your production bundle are valid, and I would recommend reading more about the Cost of JavaScript. However, in the beginning I would encourage one to first get a working code base, and to keep iterating and improving your code as your skillset grows. Improving performance along the way.

Lastly, some common type of devdependencies include libraries for testing your code base, building, minifying, bundling, transpiling, and linting your code as well.

Hopefully that helps!

Nathan
  • 7,853
  • 4
  • 27
  • 50