michaelnguyen547's avatar

devDependencies vs dependencies

I am using Laravel Mix v4. I am having a hard time to understand which packages should be in devDependencies vs dependencies (in package.json).

    "devDependencies": {
        "axios": "^0.17",
        "bootstrap-sass": "^3.3.7",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^4.0",
        "lodash": "^4.17.4",
        "resolve-url-loader": "2.3.1",
        "sass": "^1.17.0",
        "sass-loader": "7.*",
        "vue": "^2.5.7",
        "vue-template-compiler": "^2.6.6"
    },
    "dependencies": {
        "laravel-echo": "^1.5.2",
        "popper.js": "^1.14.7",
        "pusher-js": "^4.3.1",
        "vue-resource": "^1.5.1",
        "webpack-s3-plugin": "^1.0.3"
    }

when I run npm run dev or npm run production, how does Laravel mix know should it get devDependencies or should it only get dependencies.

FYI, I would need the following package only

axios (to make ajax call)
laravel-mix (so it would work when i run npm run dev/prod)
lodash ( it is in resources/assets/js/bootstrap.js , dont know what it does to my project)
vue
laravel-echo (to use with pusher)
popper ( it is in resources/assets/js/bootstrap.js , dont know what it does to my project)
pusher-js (used with laravel-echo)
webpack-s3-plugin (publish to s3)

I dont know what the rest are for? Some were added automatically when I first ran npm run dev.

0 likes
2 replies
bobbybouwmann's avatar

With webpack basically all your dependencies can be in the devDependencies. The reason for this is that you use webpack to compile everything done to a single file (js/app.js). So your browser only needs that js/app.js file and the rest is not needed. However you do need it to compile everything done to a single file. So just devDependencies should be good enough ;)

2 likes
igaster's avatar

Although this is true, I would argue that some dependencies should move to devDependnecies.

A good example testing libraries. If you build your js files without the --production flag, then these will be included in the compiled file.

Please note that the npm run production script will just compile the assets. Don't confuse it with npm install --production will just fetch the dependencies. It is your responsibility to make the scripts compiling with the correct dependencies installed each time

Please or to participate in this conversation.