14

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.

Jan Żankowski
  • 8,690
  • 7
  • 38
  • 52
Ilario Engler
  • 2,419
  • 2
  • 27
  • 40
  • It is not clear what you are trying to do. Do you want to use the laravel package in your application or do you want to work on the packge itself? Also which module system are you using for the dependencies (CommonJS, Bower, ...)? – Bruno Ranschaert Oct 24 '16 at 13:14
  • @BrunoRanschaert I edited my post – Ilario Engler Oct 24 '16 at 13:47

2 Answers2

21

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.

craig_h
  • 31,871
  • 6
  • 59
  • 68
  • thank you very much for your answer now much things are clearer to me :) one additional question... how do I import stylesheets from node_modules folder? – Ilario Engler Oct 25 '16 at 15:11
  • For stylesheets you just use an `@import` statement in `resources/assets/sass/app.scss`, you can include either `css` or `scss` files (or a folder), you just need to include the entire path from the root of your project e.g. for bootstrap you have `@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";` – craig_h Oct 25 '16 at 15:15
  • okaay thanks that worked... I had the error to put .css at the end of the path – Ilario Engler Oct 25 '16 at 15:37
  • Caveat: when using `npm shrinkwrap` to lock down specific package versions (so that you push to prod exactly what you've been working on in dev), by default `devDependencies` are NOT locked down. To do that, use `npm shrinkwrap --dev`. – Jan Żankowski Sep 06 '17 at 08:12
5

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.

hatef
  • 5,491
  • 30
  • 43
  • 46
  • What if we DON'T want to install some of these `devDependencies` in production environment? Concretely, I don't want to use both `browser-sync ; browser-sync-webpack-plugin` packages in production because at least one of them sets the cookie `io` that is not wished for the enduser, regarding to GDPR law / spirit. – JarsOfJam-Scheduler Jun 20 '21 at 12:08
  • 1
    Note also that you may be referring to `npm run prod` when saying "Webpack compiles everything down to a single file (/js/app.js)," – JarsOfJam-Scheduler Jun 20 '21 at 13:18