javascript - node - ¿Pones Babel y Webpack en DevDependencies o Dependencies?

update npm

Question

Soy nuevo en npm y no entiendo realmente lo que debería incluir las dependencias frente a devDependencies. Sé que para probar las bibliotecas deberían estar en dev, pero ¿qué hay de cosas como babel y webpack? ¿Deberían estar en dev también, porque solo se utilizan para compilar es6 y JSX en vainilla JS? Mi entendimiento es que cuando se implementa en heroku, ya se realiza la compilación con las bibliotecas necesarias, por lo que no es necesario alojarlas en producción.

 "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"
}

Answer 1

Las dependencias de desarrollo son aquellas que solo se usan para el servidor de desarrollo, creo que estas son dependencias de dependencia:

"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"eslint": "^4.11.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-react": "^7.5.1",
"webpack-dev-server": "^2.9.4"
}

Answer 2

Los paquetes de babel y webpack irán a la sección devDependencies porque estos paquetes se usan cuando se transpilen y agrupan su código en javascript de vainilla en los bundle.js & etc.

En producción, ejecutará su código fuera del bundle.js código de compilación / generado ya no requerirá estas dependencias.