Fügen Sie Babel und Webpack in devDependencies oder Dependencies ein?

76

Ich bin neu bei npm und verstehe nicht wirklich, was in Abhängigkeiten gegenüber devDependencies enthalten sein soll. Ich weiß, dass sie zum Testen von Bibliotheken in die Entwicklung gehen sollten, aber wie wäre es mit Dingen wie Babel und Webpack? Sollten sie auch in dev sein, weil sie nur verwendet werden, um es6 und JSX in Vanilla JS zu transkompilieren? Ich verstehe, dass bei der Bereitstellung auf Heroku bereits die Transkompilierung mit den erforderlichen Bibliotheken durchgeführt wird, sodass diese nicht in der Produktion gehostet werden müssen.

  "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"
  }
javascript npm dependencies packages package-managers stackjlei
quelle
stackoverflow.com/questions/18875674/… . Dies gibt Ihnen die erforderliche Klarheit!
Semuzaboi

Antworten:

61

Die Pakete babelund webpackwerden in den devDependenciesAbschnitt aufgenommen, da diese Pakete beim Transpilieren und Bündeln Ihres Codes in Vanille-Javascript in den bundle.jsDateien & etc verwendet werden.

In der Produktion führen Sie Ihren Code aus dem bundle.jsBuild aus / der generierte Code benötigt diese Abhängigkeiten nicht mehr.

Zohaib Ijaz
quelle
Auch in der Produktion würde der Build nur mit Babel transpiliert, oder? Können Sie mir bitte helfen, dies zu verstehen?
Harkirat Saluja
2
In der Produktion enthält Ihr Build- oder Bereitstellungsordner Inhalte, die bereits von babel auf ES5 übertragen wurden. Sie benötigen sie also nicht, um Ihre Anwendung auszuführen.
Semuzaboi
41
Eine Ausnahme ist babel-polyfill, da zur Laufzeit polyfill
HaoCS
2
@HaoCS Ich habe gesehen, wie Babels Dokumente sagen, dass sie babel-polyfillAbhängigkeiten einfügen sollen , aber ich verstehe nicht warum. Wird das Bundle es nicht enthalten, sobald ein Build ausgeführt wird? Ich sehe keinen Grund, warum es nicht in devDependencies sein kann. Würde mehr Einsicht lieben.
Der Qodesmith
11
Als Antwort auf die Frage von Harkirat (und den Kommentar, der sie beantwortet) werden einige Annahmen darüber getroffen, wie Sie sie bereitstellen. Wenn Leute sagen "Babel ist eine Entwicklungsabhängigkeit", erwarten sie, dass Sie Ihren Babel-kompilierten Code in Git (oder was auch immer Sie verwenden) festschreiben und diesen kompilierten Code dann auf Ihrem Server bereitstellen. In diesem Szenario ist Babel eine Entwicklungsabhängigkeit, da es niemals auf dem Server ausgeführt wird. Wenn Sie jedoch stattdessen den normalen Code festschreiben und Babel auf Ihrem Server ausführen, möchten Sie ihn wahrscheinlich nicht als Entwicklungsabhängigkeit, da der Server ihn benötigt.
Machineghost
24

Trotz allem, was im Grunde jeder sagt, werde ich ein Stück Vernunft anbieten ... es ist wirklich ganz einfach:

Wird Ihr Projekt npm installvon einem anderen Projekt bearbeitet? aka Verfassen Sie ein npm-Modul? Wird es in anderen Projekten enden package.json?

Nein?

Dann steck alles rein dependencies.

Ja?

  • dependencies: Dinge, die nachgeschaltete Verbraucher und Projektentwickler Ihres Projekts installiert haben sollen:
  • peerDependencies: Dinge, die Ihre nachgeschalteten Benutzer benötigen, um sicherzustellen, dass sie installiert sind
  • bundleDependencies: Dinge, die Ihre nachgeschalteten Benutzer benötigen und nicht separat installieren müssen, da diese bei Ihnen npm publishmit Ihrem Paket "gebündelt" werden.
  • optionalDependencies: Dinge, die schön zu haben sind, aber das Fehlen von wird keinen schwerwiegenden Fehler verursachen
  • devDependencies: Dinge, die nur während der Arbeit an Ihrem Projekt verwendet werden.

Das kurze daran ist: Module werden nicht auf magische Weise anders installiert. Sie werden entweder installiert oder nicht.

airtonix
quelle
Ich denke, es ist "Abhängigkeiten" geschrieben
Cameron
6
Für eine reguläre App (keine npm lib) dependenciesbedeutet das Einfügen von allem, dass Ihre Entwicklungstools mit Ihrer App in der Produktion bereitgestellt werden. Schlechte Idee.
Jfroy
@jfroy, kannst du das bitte bestätigen? wie ein Link der Quelle. Ich erinnere mich, dass einer unserer js-Entwickler erwähnt hat, dass beim Erstellen und Bündeln von js-Code durch das Webpack geprüft wird, ob ein Paket importiert wurde oder nicht, und dann entschieden wird, ob es gepackt werden soll oder nicht. Es ist jedoch unwahrscheinlich, dass das Paket babel importiert und im Anwendungscode verwendet wird, oder? In diesem Fall wird sogar Babel zu Abhängigkeiten hinzugefügt, dann wird es nicht gepackt, oder? Vielen Dank
Jeff Chen
2
@ JeffChen, werfen Sie einen Blick auf die Definitionen aus npm docs: docs.npmjs.com/files/package.json#dependencies . Sie warnen ausdrücklich davor, Transpiler in Abhängigkeiten zu setzen. Durch das Schütteln von Bäumen, wie es von Webpack und anderen Packagern angewendet wird, wird zwar nicht verwendeter Code in Produktionsbuilds entfernt, wodurch falsch zugewiesene Entwicklungsabhängigkeiten entfernt werden. Nichts in dieser Antwort besagt jedoch eindeutig, dass dies das ist, worauf sie sich verlassen, um ein schlecht definiertes package.json zu rechtfertigen.
Jfroy
2
@jfroy Wir verwenden mehrstufige Docker-Builds. Keines Ihrer Anliegen ist also relevant. Tatsächlich ist das einzige, was in der Produktion landet, das Ausgabepaket js / css / png / etc. Ja wirklich. Die Anstrengungen, die Sie unternehmen, um diese Trennung der Frontend-Abhängigkeiten herauszufinden, sind nicht einmal annähernd die Belohnung wert.
Airtonix
-5

Dev-Abhängigkeit wird nur für den Entwicklungsserver verwendet. Dies sind devDepedency: Alle Pakete, die nicht im Quellcode verwendet oder importiert werden, sind 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"
Shubham Laad
quelle
6
Diese sind erforderlich, um die App zu erstellen. Es hängt alles davon ab, wo Sie die App erstellen.
Earl3s