wake-up-neo.com

Unterschied zwischen Grunt, NPM und Bower (package.json vs bower.json)

Ich bin neu in der Verwendung von npm und bower und erstelle meine erste App in Emberjs :).
Ich habe ein wenig Erfahrung mit Rails, daher kenne ich die Idee von Dateien zum Auflisten von Abhängigkeiten (wie Bundler Gemfile).

Frage: Wenn ich ein Paket hinzufügen möchte (und die Abhängigkeit in git einchecken möchte), wo gehört es hin - in package.json oder in bower.json?

Nach dem, was ich sammle,
Wenn Sie bower install ausführen, wird das Paket abgerufen und in das Verzeichnis /vendor gestellt.
Wenn Sie npm install ausführen, wird es abgerufen und in das Verzeichnis /node_modules gestellt.

Diese SO Antwort sagt, Bower ist für Front-End und Npm ist für Back-End-Sachen.
Ember-app-kit scheint an diesem Unterschied vom ersten Blick festzuhalten ... Aber Anweisungen in gruntfile für die einige Funktionen ermöglichen geben zwei explizite Befehle an, deshalb bin ich hier total verwirrt.

Intuitiv würde ich das erraten

  1. npm install --save-dev Paketname entspricht dem Hinzufügen des Paketnamens zu meiner package.json

  2. bower install --save package-name entspricht möglicherweise dem Hinzufügen des Pakets zu meinem bower.json und laufende Laube installieren ?

Wenn dies der Fall ist, wann sollte ich Pakete jemals explizit so installieren, ohne sie der Datei hinzuzufügen, die Abhängigkeiten verwaltet (abgesehen von der globalen Installation von Befehlszeilentools)?

601
apprenticeDev

Update für Mitte 2016 :

Die Dinge ändern sich so schnell, dass diese Antwort möglicherweise nicht mehr aktuell ist, wenn es Ende 2017 ist!

Anfänger können sich schnell in der Auswahl der Build-Tools und Workflows verlieren, aber was 2016 am aktuellsten ist, dass sie Bower, Grunt oder Gulp überhaupt nicht verwenden! Mit Hilfe von Webpack können Sie alles direkt in NPM erledigen!

Verstehen Sie mich nicht falsch, die Leute verwenden andere Workflows und ich verwende GULP immer noch in meinem Legacy-Projekt (aber langsam aus dem Projekt heraus), aber so wird es in den besten Unternehmen und Entwicklern gemacht, die in diesem Workflow arbeiten, verdienen eine Menge Geld!

Schauen Sie sich diese Vorlage an, es ist ein sehr aktuelles Setup, das aus einer Mischung der besten und neuesten Technologien besteht: https://github.com/coryhouse/react-slingshot

  • Webpack
  • NPM als Build-Tool (kein Gulp, Grunt oder Bower)
  • Reagiere mit Redux
  • ESLint
  • die Liste ist lang. Geh und entdecke!

Deine Fragen:

Wenn ich ein Paket hinzufügen möchte (und die Abhängigkeit in git einchecken möchte), wo gehört es hin - in package.json oder in bower.json

  • Alles gehört jetzt in package.json

  • Für die Erstellung erforderliche Abhängigkeiten befinden sich in "devDependencies", d. H. npm install require-dir --save-dev (--save-dev aktualisiert Ihre package.json, indem devDependencies ein Eintrag hinzugefügt wird)

  • Abhängigkeiten, die zur Laufzeit für Ihre Anwendung erforderlich sind, befinden sich in "Abhängigkeiten", d. H. npm install lodash --save (--save aktualisiert Ihre package.json, indem Sie Abhängigkeiten einen Eintrag hinzufügen).

Wenn dies der Fall ist, wann sollte ich Pakete jemals explizit so installieren, ohne sie der Datei hinzuzufügen, die Abhängigkeiten verwaltet (abgesehen von der globalen Installation von Befehlszeilentools)?

Immer . Nur wegen des Komforts. Wenn Sie ein Flag (--save-dev oder --save) hinzufügen, wird die Datei, die deps (package.json) verwaltet, automatisch aktualisiert. Verschwenden Sie keine Zeit, indem Sie Abhängigkeiten manuell bearbeiten. Abkürzung für npm install --save-dev package-name ist npm i -D package-name und Abkürzung für npm install --save package-name ist npm i -S package-name

152
Pawel

Npm und Bower sind beide Tools für das Abhängigkeitsmanagement. Der Hauptunterschied zwischen beiden ist jedoch npm wird für die Installation von Node js-Modulen verwendet, bower js wird für die Verwaltung von Front-End-Komponenten wie HTML, CSS, JS usw. verwendet.

Eine verwirrende Tatsache ist, dass npm einige Pakete enthält, die auch für die Front-End-Entwicklung verwendet werden können, wie grunt und jshint.

Diese Zeilen erhöhen die Bedeutung

Bower kann im Gegensatz zu npm mehrere Dateien (z. B. .js, .css, .html, .png, .ttf) enthalten, die als Hauptdatei (en) gelten. Bower betrachtet diese Hauptdateien semantisch als eine Komponente, wenn sie zusammen gepackt werden.

Edit: Grunt unterscheidet sich sehr von Npm und Bower. Grunt ist ein Javascript-Task-Runner-Tool. Mit dem Grunzen können Sie viele Dinge erledigen, die Sie sonst manuell erledigen mussten. Einige der Verwendungszwecke von Grunt hervorheben:

  1. Einige Dateien komprimieren (z. B. Zip-Plugin)
  2. Fusseln auf js files (jshint)
  3. Kompilieren weniger Dateien (grunt-contrib-less)

Es gibt Grunz-Plugins für die Kompilierung von sass, die Verbesserung Ihres Javascript, das Kopieren von Dateien/Ordnern, das Reduzieren von Javascript usw.

Bitte beachte, dass das grunt-Plugin auch ein npm-Paket ist.

Frage-1

Wenn ich ein Paket hinzufügen möchte (und die Abhängigkeit in git einchecken möchte), wo gehört es hin - in package.json oder in bower.json

Es kommt wirklich darauf an, wo dieses Paket hingehört. Wenn es sich um ein Knotenmodul handelt (wie grunt, request), wird es in package.json abgelegt, andernfalls in bower json.

Frage-2

Wann sollte ich Pakete jemals explizit so installieren, ohne sie der Datei hinzuzufügen, die Abhängigkeiten verwaltet?

Es spielt keine Rolle, ob Sie Pakete explizit installieren oder die Abhängigkeit in der .json-Datei erwähnen. Angenommen, Sie arbeiten gerade an einem Knotenprojekt und benötigen ein anderes Projekt, sagen Sie request. Dann haben Sie zwei Möglichkeiten:

  • Bearbeiten Sie die Datei package.json und fügen Sie eine Abhängigkeit von "request" hinzu.
  • npm install

OR

  • Verwenden Sie die Befehlszeile: npm install --save request

Mit den Optionen --save wird auch die Abhängigkeit zur Datei package.json hinzugefügt. Wenn Sie die Option --save nicht angeben, wird nur das Paket heruntergeladen, die json-Datei bleibt jedoch davon unberührt.

Sie können dies so oder so tun, es wird keinen wesentlichen Unterschied geben.

574
sachinjain024

Laube

Bower wurde ausschließlich für die Front-End-Entwicklung erstellt und unter Berücksichtigung dessen optimiert. Es wird ein flacher Abhängigkeitsbaum verwendet, für den nur eine Version für jedes Paket erforderlich ist, wodurch die Seitenlast verringert wird. Es zielt hauptsächlich auf minimale Ressourcenbelastung ab.

Bower hat eine Konfigurationsdatei namens bower.json. In dieser Datei können wir die Konfiguration für Bower wie die benötigten Abhängigkeiten und Lizenzdetails, Beschreibung, Name usw. verwalten.

Bower eignet sich für Front-End-Pakete wie JQuery, Angular, React, Glut, Knockout, Backbone und so weiter.

Npm (Node Package Manager)

Npm wird am häufigsten für die Verwaltung von Node.js-Modulen verwendet, funktioniert aber auch für das Front-End. Es wird ein verschachtelter Abhängigkeitsbaum verwendet. Dies bedeutet, dass Ihre Abhängigkeiten eigene Abhängigkeiten haben können, die eigene Abhängigkeiten haben können, und so weiter. 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. Dies ist wirklich großartig auf dem Server, auf dem Speicherplatz und Latenz keine große Rolle spielen.

Dies funktioniert im Frontend offensichtlich nicht so gut, da wir in unseren Projekten jQuery benötigen. Wir brauchen nur eine Kopie von jQuery, aber wenn ein anderes Paket jQuery benötigt, lädt es erneut eine weitere Kopie von jQuery herunter. Dies ist einer der wichtigsten Nachteile von Npm.

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

Der Grund, warum viele Projekte beide verwenden, ist, dass sie Bower für Front-End-Pakete und Npm für Entwicklertools wie Grunt, Gulp, JSHint usw. Verwenden.

Grunzen

Grunt ist ein Befehlszeilentool für Front-End-Entwickler um vordefinierte sich wiederholende Aufgaben auszuführen. Aufgaben werden deklarativ mit Konfigurationsobjekten definiert, die von Plugins verarbeitet werden, um das Kernpaket auf einer ausreichenden Größe zu halten. Es dient zur Automatisierung von JavaScript-Workflows wie Verketten und Minimieren von JS-Dateien, Durchführen von Tests, Aktualisieren des Browsers zum Hochladen von Skriptänderungen usw.. Einer seiner Vorteile ist, dass es gleichzeitig verschiedene Aufgaben (über 6010 Elemente in der Grunt-Plugin-Registrierung) für ein riesiges Ökosystem von Plugins ausführt. Sein Nachteil ist, dass es mit zunehmender Konfiguration kompliziert werden kann und zu einer Überalterung neigt.

2