2

I am learning to use webpack and generally getting in to the Javascript world, including npm.

Several answers deal with --save vs --save-dev when using npm install. My understanding is that their use (and updates to package.json) is actually useful when recreating either a run or a dev environment via npm install <the package being developed or ran>

  • --save is used to save packages needed to run the app in node.js, that is on a server
  • --save-dev is used to save packages needed to develop the app
  • a bare npm install <module> just installs the package, without enabling the possibility to install it somewhere else though the appropriate entry in package.json

Therefore, in a webpack context, is --save ever used? I belive not, because what is created is a JS bundle which is then included in the HTML file, and ran in a browser. In that sense, there is never a need to "save modules needed to run your app".

In the same vein, --save-dev is useful (again, in a webpack context) at it allows someone to develop elsewhere (in that case both modules in the app (say, moment.js) and logistical ones (say, gulp) should be installed with --save-dev, right?)

Finally, a bare npm install <module> is also possible (although less useful) is the development is not intended to be done elsewhere (the modules are still installed but no mention of this fact is made in package.json).

Is this correct? Specifically, is the assumption of a lack of --save in a webpack context true?

WoJ
  • 27,165
  • 48
  • 180
  • 345
  • 1
    I would use `--save-dev` with WebPack since it is only required for development and build environments. – Sumner Evans Jul 24 '17 at 19:37
  • Is it going into your prod bundle? _yes:_ `--save` _no:_ `--save-dev` – Damon Jul 24 '17 at 19:41
  • @Damon: why `--save` when going in the prod bundle? It will be in that bundle, served from a server and that's all. The module itself will never be used in prod (except by being in the JS bundle) – WoJ Jul 24 '17 at 19:43
  • @SumnerEvans: this is my assumption as well – WoJ Jul 24 '17 at 20:04
  • If you're not publishing an NPM module and you're just using NPM to manage your front end assets, I suppose it doesn't matter. Your build tool should only include what is actually used in your bundle. The only case would be for clarity to yourself or other developers that "this is used in my app" vs "this is something I use for testing, building, transpiling, etc". You can put either where you wish and make it work. – Damon Jul 24 '17 at 20:28

1 Answers1

2

Anything that it utilised in the production build of your application should be listed in save. For example if you use React, your application utilises React in the final production build. It doesn't matter that your file is bundled but the fact that it's heavily relied upon running when compiled.

Anything that is used during development should be listed under devDependency. In this example, once WebPack has finished bundling your files, we no longer care about WebPack because it's not apart of the final compiled file.

--save-dev : Anything that is used during development such as Unit testing frameworks or bundlers etc.

--save : Anything that is used within your application such as Axios, React, Vue or Chart.JS etc.

Win
  • 5,498
  • 2
  • 15
  • 20
  • *because it's a vital asset of your application* -- I do not understand. These modules will not be used by my app outside of the JS bundle. The bundle and HTML file can live on a CDN for instance, away from my dev server (or the sever which just served these HTML and JS files) – WoJ Jul 24 '17 at 19:45
  • 1
    @WoJ Can your application run without WebPack? Yes, it is just a bundler and can be replaced by Browserify or any alternative bundler. If your application is a React application, can it run without React? No, you must rewrite the entire application from ground up which is why it sits in --save – Win Jul 24 '17 at 19:47
  • I do not know React (beside the name) but I believe this is a library to build reactive frontends (I know Vue.js which allegedly borrowed a lot from React). If this is the case: can a React application be served from a CDN, i.e. is it composed exclusively of HTML, JS and CSS files without a backend? If so - it does not need to sit in `--save` because when running the app the modules are never accessed directly (only via the JS bundle generated by webpack) – WoJ Jul 24 '17 at 19:51
  • @WoJ Anything that you want to load in production should be in your dependency list. If React is a part of that then it should be in your dependency list & not dev dependency. Anything that is used to help create your application such as babel or webpack is listed as a dev dependency because once it's compiled, we don't care about webpack or babel because all that heavy lifting has been done and it has nothing to do with the final output. We don't need webpack or babel anymore to run the application under production, where React is still utilised in the final build. – Win Jul 24 '17 at 19:58
  • I honestly do not understand. You do not need any React components when **running** your app ("loading in production", as you put it). Everything you need is in the webpack-generated JS bundle. This bundle together with the HTML which loads it is all you need to run the app. So the only case where you need to have all the modules again is for **development**, in which case `--save-dev` should be used. – WoJ Jul 24 '17 at 20:02
  • @WoJ Just think of it this way. Is WebPack apart of the final production build? No. It was used to bundle your application together during development and we no longer care for it after it has finished, we don't need to use anything from WebPack anymore until we develop again. Is React apart of the final production build? Yes, we're actively using the framework in our application, it doesn't matter that it's been bundled into a generated file. The remnants of React has been embedded in and it's a part of our application forever. – Win Jul 24 '17 at 20:14