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.

Answer 2

Also, in newer versions of Laravel that use Laravel Mix (which is a wrapper around Webpack) all your dependencies can be under devDependencies.

Webpack compiles everything down to a single file (/js/app.js), or multiple files, if for example, you use the extract method to build your files (/js/app.js, /js/app.js, /js/manifest.js). And those are the only files your browser needs to execute your JavaScript code; and for Webpack to build them it's enough to find all the dependencies under devDependencies.