Mettez-vous Babel et Webpack dans devDependencies ou Dependencies ?

Question

Je suis nouveau sur npm et je ne comprends pas vraiment ce qui doit aller dans dependencies vs devDependencies. Je sais que pour les bibliothèques de test, elles doivent aller dans dev, mais qu'en est-il de choses comme babel et webpack ? Devraient-elles être dans dev aussi, parce qu'elles ne sont utilisées que pour transcompiler es6 et JSX en vanilla JS ? Si j'ai bien compris, lorsque vous déployez sur Heroku, il effectue déjà la transcompilation avec les bibliothèques nécessaires, il n'y a donc pas besoin de les héberger en 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"
  }

Answer 1

Le site babel et webpack Les paquets seront placés dans le devDependencies car ces paquets sont utilisés lors de la transposition et de la mise en paquet de votre code en vanilla javascript dans l'application bundle.js & etc fichier(s).

En production, vous exécuterez votre code à partir du bundle.js Le code construit/généré ne nécessitera plus ces dépendances.

Answer 2

Malgré ce que tout le monde dit, je vais vous offrir un peu de bon sens... c'est vraiment très simple :

Votre projet va-t-il être npm install Est-ce qu'il sera intégré dans un autre projet ? par exemple, est-ce que vous créez un module npm ? est-ce qu'il sera intégré dans un autre projet ? package.json ?

Non ?

Ensuite, mettez tout dans dependencies .

Oui ?

• dependencies : Les choses que vous voulez que les consommateurs en aval et les développeurs de projet de votre projet aient installé :
• peerDependencies : Les choses que vos utilisateurs en aval doivent s'assurer qu'ils ont installé
• bundleDependencies : Les choses dont vos utilisateurs en aval auront besoin, et qu'ils n'auront pas besoin d'installer séparément car lorsque vous npm publish Ces derniers seront "regroupés" avec votre paquet.
• optionalDependencies : Des choses qu'il est bon d'avoir mais dont l'absence ne provoquera pas d'erreur fatale.
• devDependencies : les choses utilisées uniquement pendant le travail sur votre projet.

En résumé, les modules ne sont pas installés différemment par magie. Soit ils sont installés, soit ils ne le sont pas.

Answer 3

Les dépendances de développement sont celles qui sont utilisées uniquement pour le serveur de développement, ce sont les devDepedency : Tous les paquets qui ne sont pas utilisés dans le code source ou importés sont des devDependencies.

"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"clean-webpack-plugin": "^0.1.19",
"copy-webpack-plugin": "^4.5.1",
"css-loader": "^0.28.11",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.4.0",
"node-sass": "^4.8.3",
"optimize-css-assets-webpack-plugin": "^4.0.0",
"prop-types": "^15.6.1",
"sass-loader": "^7.0.1",
"style-loader": "^0.21.0",
"uglifyjs-webpack-plugin": "^1.2.5",
"webpack": "^4.6.0",
"webpack-cli": "^3.1.1",
"webpack-dev-server": "^3.1.9"