Menu
I'm new to npm and don't really understand what should go into dependencies vs. devDependencies. I know that for testing libraries they should go into dev, but how about for things like babel and webpack? Should they be in dev too, because they're only used to transcompile es6 and JSX into vanilla JS? My understanding is that when you deploy to heroku, it do the transcompiliation with the necessary libraries already, so there's no need to host them on production?
"dependencies": { "babel-core": "^6.7.7", "babel-eslint": "^6.0.4", "babel-loader": "^6.2.4", "babel-plugin-react-transform": "^2.0.2", "babel-plugin-transform-object-rest-spread": "^6.6.5", "babel-plugin-transform-react-display-name": "^6.5.0", "babel-polyfill": "^6.7.4", "babel-preset-es2015": "^6.6.0", "babel-preset-react": "^6.5.0", "bootstrap": "^3.3.7", "css-loader": "^0.23.1", "es6-promise": "^3.2.1", "eslint": "^2.9.0", "eslint-plugin-babel": "^3.2.0", "eslint-plugin-react": "^5.0.1", "express": "^4.13.4", "extract-text-webpack-plugin": "^1.0.1", "file-loader": "^0.9.0", "lodash": "^4.15.0", "react": "^15.0.2", "react-addons-css-transition-group": "^15.0.2", "react-dom": "^15.0.2", "react-redux": "^4.4.5", "react-transform-catch-errors": "^1.0.2", "react-transform-hmr": "^1.0.4", "redbox-react": "^1.2.3", "redux": "^3.5.2", "redux-form": "^6.1.0", "rimraf": "^2.5.2", "style-loader": "^0.13.1", "webpack-dev-middleware": "^1.6.1", "webpack-hot-middleware": "^2.10.0" }, "devDependencies": { "babel-register": "^6.9.0", "chai": "^3.5.0", "mocha": "^2.5.3", "sinon": "^1.17.4", "webpack": "^1.13.2" } 
339
Packages needed during production go in dependencies , and packages used just to develop the project go in devDependencies . If our production environment needs to build (run webpack), then those dependencies must reside in dependencies.
devDependencies are typically the tooling you use to build your project, but they're not actually included in the app's production bundle. For example, webpack and rollup would both be devDependencies . These are bundlers used to compile your app, but they're not part of your app.
The babel and webpack packages will go into the devDependencies section because these packages are used in when transpiling and bundle-ing your code into vanilla javascript in the bundle.js & etc file(s).
In production you will run your code off the bundle.js build/generated code will not require these dependencies anymore.
188
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
