Laravel: Which npm packages should be in "dependencies" vs "devDependencies"?

Question

In Laravel 5.3 the package.json file looks as following: all packages are in devDependencies. Do somebody can tell me which packages are needed in production too. I think all except browsersync.

package.json

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "gulp": "^3.9.1", 
    "jquery": "^3.1.0",
    "laravel-elixir": "^6.0.0-9",
    "laravel-elixir-browsersync-official": "^1.0.0",
    "laravel-elixir-vue-2": "^0.2.0",
    "laravel-elixir-webpack-official": "^1.0.2",
    "lodash": "^4.16.2",
    "vue": "^2.0.1",
    "vue-resource": "^1.0.3"
  },
  "dependencies": {
    "dropzone": "^4.3.0"
  }
}

I think some packages like vue.js are also needed in production mode so I would move them to dependencies and not devDependencies.

Answer 1

All of those are devDependencies if you are using elixir:

Firstly, you don't need elixir in production because it's just a wrapper for gulp, hopefully, you will compile your assets on your development machine and upload them.

All other npm javascript libraries can be compiled with elixir, so there is no need to have them on the production machine. By default elixir uses webpack to compile resources\assets\js\app.js into public\js\app.js which you need to include in your webpages as a script.

If you take a look at: resources\assets\js\bootstrap.js you will see the packages that laravel adds by default (things like vue, bootstrap and jQuery), so if, for example you want to add dropzone to your project you simply add it to bootstrap.js like so:

require('dropzone');

Which would now compile dropzone to public\js\app.js making dropzone a devDependency also.