20

I am building a plugin component for Vue.js. Using a standard webpack configuration with vue-loader etc.

In a simple library I put modules that I expect to 'require' inside my dependencies in package.json. However since Webpack will be compiling all my code and dependencies into a single bundle I'm not sure where to put a dependency like: axios.

Would appreciate someone shedding some light onto this.

user3690467
  • 3,049
  • 6
  • 27
  • 54

3 Answers3

24

Technically, when using a bundler like webpack, the result will not make a difference with regard to the output of your bundling process.

That being said, dividing the packages in dependencies and devDependencies still helps you (and others looking at your package.json) to understand which packages are meant to end up being a part of the bundle created (dependencies), and which are needed to build the bundle only (devDependencies).

connexo
  • 53,704
  • 14
  • 91
  • 128
4

There is already a good answer explaining difference between dependencies and devDependencies: https://stackoverflow.com/a/22004559/5157538

Just remember main principle:

If you need package in production put it into dependencies (most likely axios should be in dependecies in your case).

If you need package only during development, put it into devDependencies (e.g. unit-test libraries, which isn't needed in productions should be in devDependencies

David Yunevich
  • 194
  • 8
  • 7
    This does not answer the question. OP uses Webpack to process his code, thus producing a bundle going to production. – Ealhad Nov 05 '18 at 09:10
  • @Ealhad We could say that packages like `sass-loader` or `eslint` are not going to be used in production and may be trimmed in the final build. It is more like a semantic categorization. – HosseyNJF Jun 18 '22 at 11:16
  • 1
    @HosseyNJF Still does not answer the question. Yes those are very clearly devDeps but even Vue itself is getting bundled with WebPack at the end. So pretty much any dependency that is related to Vue can be a devDep IMO because none of those packages needed to be carried into production. But in the sense of clarity, that's a bit problematic. – m4heshd Oct 19 '22 at 07:47
1

The simple answer: Yes, in the case described above all front-end npm dependencies CAN be devDependencies. Only node production runtime dependencies (e.g. if you're using express and components related to the runtime server) would need to be in 'dependencies'.

The squishiness of the answers above is because there are philosophical differences of opinion about where these dependencies SHOULD be.

In my case - working in a company where security is important - we would require anything related to build and development but not running production code to be considered 'devDependencies'. Why? Well beyond the fact that feels like the whole point/intent of separating the dependencies (to me): in my context at least given that they are not used in production and are not loaded let alone used in production, the risk profile of those modules is significantly diminished by making them devDependencies. Perhaps this is more obvious if you have a combined express app and vue app in one repo? If you made these regular dependencies then your express app would have lots of extra cruft when you npm install in production.

darrin
  • 749
  • 5
  • 23