Ich versuche, mein Wissen über die beliebtesten JavaScript-Paketmanager, -Bündler und -Aufgabenläufer zusammenzufassen. Bitte korrigiere mich wenn ich falsch liege

npm & bower sind Paketmanager. Sie laden nur die Abhängigkeiten herunter und wissen nicht, wie sie Projekte selbst erstellen sollen. Was sie wissen, ist @ zu nennwebpack/gulp/grunt nachdem alle Abhängigkeiten abgerufen wurden.bower ist wienpm, baut aber abgeflachte Abhängigkeitsbäume auf (im Gegensatz zunpm was es rekursiv machen). Bedeutungnpm ruft die Abhängigkeiten für jede Abhängigkeit ab (kann sie einige Male abrufen), währendbower erwartet, dass Sie Unterabhängigkeiten manuell einbeziehen. Manchmalbower undnpm werden zusammen für Front-End und Back-End verwendet (da jedes Megabyte im Front-End von Bedeutung sein kann).grunt undgulp sind Task-Läufer, die alles automatisieren, was automatisiert werden kann (d. h. CSS / Sass kompilieren, Bilder optimieren, ein Bündel bilden und es minimieren / transpilieren).grunt vs.gulp (ist wiemaven vs.gradle oder Konfiguration vs. Code). Grunt basiert auf der Konfiguration separater unabhängiger Aufgaben. Jede Aufgabe öffnet / handhabt / schließt eine Datei. Gulp benötigt weniger Code und basiert auf Node-Streams. Dadurch kann es Pipe-Ketten erstellen (ohne die gleiche Datei erneut zu öffnen) und beschleunigen.webpack (webpack-dev-server) - für mich ist es ein Task-Runner mit heißem Neuladen von Änderungen, mit dem Sie alle JS / CSS-Beobachter vergessen können.npm/bower + Plugins können Task-Läufer ersetzen. Ihre Fähigkeiten überschneiden sich häufig, sodass es unterschiedliche Auswirkungen gibt, wenn Sie @ verwenden müssegulp/grunt Übernpm + Plugins. Aber Task-Läufer sind definitiv besser für komplexe Aufgaben geeignet (z. B. "Bei jedem Build Bundle erstellen, von ES6 auf ES5 transpilieren, auf allen Browser-Emulatoren ausführen, Screenshots erstellen und auf Dropbox über FTP bereitstellen").browserify ermöglicht das Packen von Knotenmodulen für Browser.browserify vsnode 'srequire ist eigentlichAMD vs CommonJS.

Fragen

Was istwebpack & webpack-dev-server? Offizielle Dokumentation sagt, es ist ein Modulbündler, aber für mich ist es nur ein Task Runner.Was ist der UnterschiedWo würdest du @ verwendbrowserify? Können wir nicht dasselbe mit Node / ES6-Importen machen?Wann würdest du @ verwendgulp/grunt Übernpm + Plugins?Bitte geben Sie Beispiele an, wenn Sie eine Kombination verwenden müssen