web-dev-qa-db-fra.com

Placez-vous Babel et Webpack dans devDependencies ou Dependencies?

Je suis nouveau sur npm et je ne comprends pas vraiment ce qui devrait aller dans les dépendances vs devDependencies. Je sais que pour tester les bibliothèques, ils devraient aller dans dev, mais que diriez-vous de choses comme babel et webpack? Devraient-ils être également dans dev, car ils ne sont utilisés que pour transcompiler es6 et JSX en Vanilla JS? Je crois comprendre que lorsque vous déployez sur heroku, la transcompilation avec les bibliothèques nécessaires est déjà effectuée, il n’est donc pas nécessaire 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"
  }
javascriptnpmdependenciespackagespackage-managers
46
stackjlei

Les packages babel et webpack iront dans la section devDependencies car ils sont utilisés lors de la transcription et de l'intégration de votre code dans du code javascript dans Vanilla dans le paramètre bundle.js & fichier (s).

En production, vous exécuterez votre code car le code de génération/généré bundle.js Ne nécessitera plus ces dépendances.

37
Zohaib Ijaz

Malgré tout ce que tout le monde dit, je vais offrir un peu de santé mentale ... C'est vraiment très simple:

Votre projet va-t-il être npm installed par un autre projet? a.k.a créez-vous un module npm? va-t-il se retrouver dans un autre projet package.json?

Non?

Puis mettez tout dans dependencies.

Oui?

  • dependencies : Ce que vous voulez que les consommateurs en aval et les développeurs de projet de votre projet aient installé:
  • peerDependencies : Éléments dont vos utilisateurs en aval ont besoin pour s'assurer qu'ils sont installés
  • bundleDependencies : Ce dont vos utilisateurs en aval auront besoin et n’auront pas besoin de l’installer séparément, car lorsque vous npm publish, ceux-ci seront "groupés" avec votre paquet.
  • optionalDependencies : Ce qui est sympa à avoir mais l’absence de ne causera pas d’erreur fatale
  • devDependencies : éléments utilisés uniquement pour travailler sur votre projet.
  • optionalDependencies : Ce qui est sympa à avoir mais l’absence de ne causera pas d’erreur fatale

En bref, les modules ne sont pas installés comme par magie différemment. Ils sont soit installés ou non.

5
airtonix

La dépendance des développeurs est uniquement utilisée par le serveur de développement. Il s'agit de devDepedency: tous les packages qui n'utilisent ni le code source ni les produits importés sont 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"
0
Shubham Laad