javascript - yarn vs npm




Was ist der Unterschied zwischen Bower und Npm? (6)

2017-Okt Aktualisierung

Bower ist endgültig deprecated . Ende der Geschichte.

Ältere Antwort

Von Mattias Petter Johansson, JavaScript-Entwickler bei Spotify :

In fast allen Fällen ist es besser, Browserify und npm over Bower zu verwenden. Es ist einfach eine bessere Verpackungslösung für Front-End-Apps als Bower. Bei Spotify verwenden wir npm, um ganze Webmodule (html, css, js) zu packen, und es funktioniert sehr gut.

Bower bezeichnet sich selbst als Paketmanager für das Web. Es wäre toll, wenn das stimmt - ein Paketmanager, der mein Leben als Front-End-Entwickler besser gemacht hat, wäre großartig. Das Problem ist, dass Bower keine speziellen Werkzeuge für diesen Zweck anbietet. Es bietet KEINE Werkzeuge, von denen ich weiß, dass npm nicht, und vor allem keine, die speziell für Front-End-Entwickler nützlich ist. Es gibt einfach keinen Vorteil für einen Front-End-Entwickler Bower über Npm zu verwenden.

Wir sollten aufhören, Laube zu benutzen und um npm zu konsolidieren. Zum Glück geschieht das :

Mit browserify oder webpack wird es sehr einfach, alle Ihre Module zu großen miniaturisierten Dateien zu verketten, was besonders für mobile Geräte großartig ist. Nicht so bei Bower, was deutlich mehr Arbeit erfordert, um den gleichen Effekt zu erzielen.

npm bietet Ihnen auch die Möglichkeit, mehrere Versionen von Modulen gleichzeitig zu verwenden. Wenn Sie nicht viel Entwicklung von Anwendungen gemacht haben, wird Ihnen dies zunächst als eine schlechte Sache auffallen, aber wenn Sie erst einmal ein paar Dependenzhölle durchgegangen sind, werden Sie feststellen, dass die Fähigkeit, mehrere Versionen eines Moduls zu haben, ziemlich verkommen ist großartige Eigenschaft. Beachten Sie, dass npm ein sehr praktisches Deduptool enthält, das automatisch sicherstellt, dass Sie nur zwei Versionen eines Moduls verwenden, wenn Sie tatsächlich müssen - wenn zwei Module beide die gleiche Version eines Moduls verwenden können. Aber wenn sie nicht können , haben Sie ein sehr handliches heraus.

(Beachten Sie, dass Webpack und rollup im August 2016 als besser eingestuft werden als Browserify.)

Was ist der grundlegende Unterschied zwischen bower und npm ? Will einfach etwas Einfaches und Einfaches. Ich habe gesehen, dass einige meiner Kollegen bower und npm austauschbar in ihren Projekten verwenden.


Bower und Npm sind Paketmanager für Javascript.

Laube

Bower wird ausschließlich für die Frontend-Entwicklung entwickelt. Es verwendet eine flache Abhängigkeitsstruktur, die nur eine Version für jedes Paket erfordert, wodurch die Seitenbelastung verringert wird. Es zielt hauptsächlich auf minimale Ressourcenbelastung ab. Es hat weniger Beiträge und daher ist der Entwicklungsprozess langsam.

Bower hat eine Konfigurationsdatei namens bower.json. In dieser Datei können wir die Konfiguration für Bower wie die Abhängigkeiten, die wir benötigen und Lizenzdetails, Beschreibung, Name usw. pflegen. Bower eignet sich für Front-End-Pakete wie Jquery, eckig, reagieren, Glut, Knockout, Backbone und so weiter.

Npm

Npm wird am häufigsten zum Verwalten von Node.js-Modulen verwendet, funktioniert aber auch für das Front-End. Es verwendet eine geschachtelte Abhängigkeitsstruktur sowie eine flache Abhängigkeitsstruktur. Es ist beliebt und hat viele Mitwirkende. Die neue Version bietet also immer wieder aufregende Funktionen.

Npm hat eine Konfigurationsdatei namens package.json. In dieser Datei können wir die Konfiguration für Npm wie die Abhängigkeiten, die wir benötigen und Lizenzdetails, Beschreibung, Name und so weiter pflegen. Npm bietet Abhängigkeiten und DevDependencies. Abhängigkeiten laden und pflegen die Front-End-Dateien wie Jquery, Angular und so weiter. DevDependencies wird Entwicklungswerkzeuge wie Grunt, Gulp, JSHint usw. herunterladen und pflegen.

Das funktioniert natürlich nicht so gut am Frontend, denn wir brauchen jQuery in unseren Projekten. Wir brauchen nur eine Kopie von jQuery, aber wenn ein anderes Paket jQuery benötigt, wird es erneut eine Kopie von jQuery herunterladen. Dies ist einer der Hauptnachteile von Npm.

Key Note: Der Grund, warum viele Projekte beide verwenden, ist, dass sie Bower für Front-End-Pakete und Npm für Entwickler-Tools verwenden. Durch Multiplizieren des Paketmanagers in Ihrem Projekt wird Ihr Arbeitsablauf erschwert. Npm 3 in Verbindung mit Browserify oder webpack ist der webpack Weg.


Diese Antwort ist eine Ergänzung zur Antwort von Sindre Sorhus. Der Hauptunterschied zwischen npm und Bower ist die Art, wie sie rekursive Abhängigkeiten behandeln. Beachten Sie, dass sie zusammen in einem Projekt verwendet werden können.

Auf der npm FAQ :

Es ist viel schwieriger, Abhängigkeitskonflikte zu vermeiden, ohne Verschachtelungsabhängigkeiten. Dies ist grundlegend für die Funktionsweise von npm und hat sich als äußerst erfolgreicher Ansatz erwiesen.

Auf der Bower Homepage:

Bower ist für das Front-End optimiert. Bower verwendet einen flachen Abhängigkeitsbaum, der für jedes Paket nur eine Version benötigt, wodurch die Seitenbelastung auf ein Minimum reduziert wird.

Kurz gesagt, npm zielt auf Stabilität. Bower zielt auf minimale Ressourcenbelastung ab. Wenn Sie die Abhängigkeitsstruktur zeichnen, sehen Sie Folgendes:

npm:

project root
[node_modules] // default directory for dependencies
 -> dependency A
 -> dependency B
    [node_modules]
    -> dependency A

 -> dependency C
    [node_modules]
    -> dependency B
      [node_modules]
       -> dependency A 
    -> dependency D

Wie Sie sehen können, werden einige Abhängigkeiten rekursiv installiert. Abhängigkeit A hat drei installierte Instanzen!

Laube:

project root
[bower_components] // default directory for dependencies
 -> dependency A
 -> dependency B // needs A
 -> dependency C // needs B and D
 -> dependency D

Hier sehen Sie, dass alle eindeutigen Abhängigkeiten auf derselben Ebene sind.

Warum also mit npm arbeiten?

Vielleicht benötigt Abhängigkeit B eine andere Version von Abhängigkeit A als Abhängigkeit C. npm installiert beide Versionen dieser Abhängigkeit, so dass es trotzdem funktioniert, aber Bower wird Ihnen einen Konflikt bereiten, weil es Duplikation nicht mag (weil das Laden derselben Ressource auf einer Webseite ist) sehr ineffizient und kostspielig, auch kann es einige ernste Fehler geben). Sie müssen manuell auswählen, welche Version Sie installieren möchten. Dies kann dazu führen, dass eine der Abhängigkeiten bricht, aber das müssen Sie trotzdem beheben.

Die übliche Verwendung ist Bower für die Pakete, die Sie auf Ihren Webseiten veröffentlichen wollen (zB Laufzeit , wo Sie Doppelarbeit vermeiden), und npm für andere Dinge, wie Testen, Bauen, Optimieren, Prüfen usw. (zB Entwicklungszeit) , wenn die Duplizierung von geringerer Bedeutung ist).

Update für npm 3:

npm 3 macht die Dinge immer noch anders als Bower. Es installiert die Abhängigkeiten global, aber nur für die erste Version, auf die es trifft. Die anderen Versionen werden in der Baumstruktur installiert (das übergeordnete Modul, dann node_modules).

  • [Knotenmodule]
    • dep A v1.0
    • dep B v1.0
      • dep A v1.0 (benutzt Root-Version)
    • dep C v1.0
      • dep A v2.0 (diese Version unterscheidet sich von der Root-Version, daher wird es eine geschachtelte Installation sein)

Für weitere Informationen empfehle ich, die Dokumente von npm 3 zu lesen


Für viele Leute, die mit node.js arbeiten, besteht ein großer Vorteil von bower darin, Abhängigkeiten zu verwalten, die überhaupt kein JavaScript sind. Wenn sie mit Sprachen arbeiten, die zu Javascript kompilieren, kann npm verwendet werden, um einige ihrer Abhängigkeiten zu verwalten. Nicht alle ihre Abhängigkeiten werden jedoch node.js-Module sein. Einige von denen, die zu Javascript kompilieren, können seltsame quellensprachspezifische Mangling haben, die das Weiterreichen von Javascript zu einer uneleganten Option macht, wenn Benutzer Quellcode erwarten.

Nicht alles in einem npm-Paket muss Javascript sein, das auf den Benutzer ausgerichtet ist, aber für npm-Bibliothekspakete sollte zumindest ein Teil davon sein.


Mein Team zog von Bower weg und wanderte nach npm aus, weil:

  • Der programmatische Gebrauch war schmerzhaft
  • Bower's Interface änderte sich ständig
  • Einige Funktionen, wie die URL-Kurzschrift, sind vollständig unterbrochen
  • Die Verwendung von Bower und npm im selben Projekt ist schmerzhaft
  • Es ist schmerzhaft, das Feld "bower.json version" synchron mit Git-Tags zu halten
  • Versionskontrolle! = Paketverwaltung
  • Die Unterstützung von CommonJS ist nicht einfach

Weitere Informationen finden Sie unter "Warum mein Team npm anstelle von bower verwendet" .


npm wird am häufigsten für die Verwaltung von Node.js-Modulen verwendet, funktioniert aber auch für das Front-End, wenn es mit Browserify und / oder $ npm dedupe .

Bower ist ausschließlich für das Front-End konzipiert und darauf optimiert. Der größte Unterschied besteht darin, dass npm eine geschachtelte Abhängigkeitsstruktur (Größe schwer) verwendet, während Bower eine flache Abhängigkeitsbaumstruktur benötigt (die Last der Abhängigkeitsauflösung wird dem Benutzer auferlegt) .

Ein verschachtelter Abhängigkeitsbaum bedeutet, dass Ihre Abhängigkeiten ihre eigenen Abhängigkeiten haben können, die ihre eigenen haben können, und so weiter. Das ist wirklich großartig auf dem Server, wo Sie sich nicht viel um Platz und Latenz kümmern müssen. Sie müssen sich nicht um Abhängigkeitskonflikte kümmern, da alle Ihre Abhängigkeiten zB ihre eigene Version von Underscore verwenden. Das funktioniert natürlich nicht so gut am Frontend. Stellen Sie sich eine Site vor, die drei Kopien von jQuery herunterladen muss.

Der Grund, warum viele Projekte beide verwenden, ist, dass sie Bower für Front-End-Pakete und npm für Entwickler-Tools wie Yeoman, Grunt, Gulp, JSHint, CoffeeScript usw. verwenden.

Alle Paketmanager haben viele Nachteile. Sie müssen nur auswählen, mit wem Sie leben können.

Ressourcen





bower