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

612

Ich bin neu in der Verwendung von npm und bower und baue meine erste App in emberjs :).
Ich habe ein wenig Erfahrung mit Schienen, daher bin ich mit der Idee von Dateien zum Auflisten von Abhängigkeiten vertraut (z. B. Bundler Gemfile).

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

Soweit ich weiß , wird durch
Ausführen bower installdas Paket abgerufen und in ein /vendorVerzeichnis gestellt. Durch
Ausführen wird npm installes abgerufen und in ein /node_modulesVerzeichnis gestellt.

Diese SO-Antwort besagt, dass Bower für das Front-End und npm für das Backend ist.
Das Ember-App-Kit scheint auf den ersten Blick an dieser Unterscheidung festzuhalten ... Aber Anweisungen in gruntfile zum Aktivieren einiger Funktionen geben zwei explizite Befehle, daher bin ich hier total verwirrt.

Intuitiv würde ich das erraten

npm install --save-dev Paketname entspricht dem Hinzufügen des Paketnamens zu meiner package.json
bower install --save package-name entspricht möglicherweise dem Hinzufügen des Pakets zu meiner bower.json und dem Ausführen von bower install ?

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)?

javascript gruntjs bower LehrlingDev
quelle

mögliches Duplikat des Unterschieds zwischen Bower und NPM?

Sindre Sorhus

@SindreSorhus Dies ist kein genaues Duplikat. In diesem Beitrag sind weitere Fragen enthalten. Übrigens: Stört es Sie, Downvote zu erklären?

Sachinjain024

Haben Sie die akzeptierte Antwort geändert? Es scheint, dass der hochbewertete aus dem Jahr 2014 etwas ganz anderes sagt als der akzeptierte aus dem Jahr 2016. Es erklärt auch, warum es einen anderen Ansatz vorschlägt, also bin ich cool damit. Nur ein bisschen überrascht, dass es akzeptiert (oder wieder akzeptiert) wird.

Ja, ich habe die akzeptierte Antwort geändert, weil ich der Meinung bin, dass die spätere viel relevanter ist. Ich nehme an, in diesem Front-End-Dschungel sind viele Menschen genauso verwirrt wie ich, daher hat diese Frage weit über meine Erwartungen hinaus an Popularität gewonnen ... und wird auch 2 Jahre später noch immer gesehen. Dank Pawel gibt es jetzt eine aktuellere Antwort, auf die sich die Leute beziehen können (fwiw, ich verwende Webpack bei meinem aktuellen Job).

LehrlingDev

Antworten:

154

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, ist, Bower, Grunt oder Gulp überhaupt nicht zu verwenden! Mit Hilfe von Webpack können Sie alles direkt in NPM erledigen!

Google-Ergebnis "npm als Build-Tool": https://medium.com/@dabit3/introduction-to-using-npm-as-a-build-tool-b41076f488b0#.c33e74tsa
Webpack: https://webpack.github.io/docs/installation.html

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

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 erkunde!

Deine Fragen:

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

Alles gehört jetzt in package.json
Die für die Erstellung erforderlichen Abhängigkeiten befinden sich in "devDependencies", dh npm install require-dir --save-dev(--save-dev aktualisiert Ihre package.json durch Hinzufügen eines Eintrags zu devDependencies)
Die für Ihre Anwendung zur Laufzeit erforderlichen Abhängigkeiten befinden sich in "Abhängigkeiten", dh 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-devoder --save) hinzufügen, wird die Datei, die deps verwaltet (package.json), automatisch aktualisiert. Verschwenden Sie keine Zeit, indem Sie Abhängigkeiten manuell bearbeiten. Verknüpfung für npm install --save-dev package-nameis npm i -D package-nameund Verknüpfung für npm install --save package-nameisnpm i -S package-name

Pawel
quelle

Ihre Antwort ist sehr eigensinnig:> With help of Webpack you can do everything directly in NPM! Das stimmt nicht, man braucht nicht einmal ein Webpack in seinem Workflow

Augustin Riedinger

Diese Antwort scheint viele Annahmen zu treffen. Die Frage stellt den Unterschied zwischen npm und bower, und diese Antwort erwähnt aus irgendeinem Grund das Webpack. Ja, Webpack ist eine Möglichkeit, dies zu tun, aber diese Antwort lässt es so erscheinen, als wäre es die einzige und richtige Möglichkeit, dies zu tun. Wenn beispielsweise jemand mit Polymer 1.x arbeitet, verwendet der Standardworkflow Bower, und das Webpack wird nicht viel unterstützt.

John Powers

Die Antwort ist tatsächlich relevant, aber das Argument nicht wirklich: "Aber so wird es gemacht" - nun, nichts sollte getan werden, nur weil es scheinbar getan werden soll (dh von anderen getan wird). Geld hat nichts mit der Begründung des Workflows zu tun.

Forsberg

Sehen Sie sich diese Antwort im Jahr 2017 an. Zur Dokumentation: "Webpack v1 ist veraltet. Wir empfehlen allen Entwicklern, ein Upgrade auf Webpack 2 durchzuführen. Weitere Informationen finden Sie in unserem Migrationshandbuch oder in der Dokumentation zu Webpack 2." Haha klassische Webentwicklung.

user643011

@ user643011 Wenn Sie sich das Migrationshandbuch ansehen, werden Sie feststellen, dass der größte Teil der Konfiguration gleich bleibt und der Rest nur kosmetische Änderungen in der Konfigurationsstruktur sind. Ich habe die Migration an einem Nachmittag durchgeführt, einschließlich eines PR

Pawel

576

Npm und Bower sind beide Tools für das Abhängigkeitsmanagement. Aber der Hauptunterschied zwischen den beiden ist npm für die Installation von Knoten js Module verwendet wird , aber Bower js ist für die Verwaltung von Front - End - Komponenten wie HTML verwendet, css, js etc .

Eine Tatsache, die dies verwirrender macht, ist, dass npm einige Pakete bereitstellt, die auch in der Front-End-Entwicklung verwendet werden können, wie gruntund jshint.

Diese Zeilen fügen mehr Bedeutung hinzu

Im Gegensatz zu npm kann Bower mehrere Dateien (z. B. .js, .css, .html, .png, .ttf) haben, die als Hauptdatei (en) betrachtet werden. Bower betrachtet diese Hauptdateien semantisch als eine Komponente.

Edit : Grunt ist ganz anders als Npm und Bower. Grunt ist ein Javascript Task Runner Tool. Mit Grunzen können Sie viele Dinge tun, die Sie sonst manuell erledigen mussten. Hervorheben einiger Verwendungszwecke von Grunt:

Komprimieren einiger Dateien (z. B. Zipup-Plugin)
Linsen auf js-Dateien (jshint)
Weniger Dateien kompilieren (grunt-Contrib-less)

Es gibt Grunz-Plugins zum Zusammenstellen von Sass, zum Hässlichen von Javascript, zum Kopieren von Dateien / Ordnern, zum Minimieren von Javascript usw.

Bitte beachten Sie, 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 einchecke), 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 grunzen, anfordern), wird es in package.json verschoben, andernfalls in bower json.

Frage 2

Wann sollte ich Pakete 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 beispielsweise ein anderes Projekt request. Dann haben Sie zwei Möglichkeiten:

Bearbeiten Sie die Datei package.json und fügen Sie eine Abhängigkeit von 'request' hinzu.
npm installieren

ODER

Verwenden Sie die Befehlszeile: npm install --save request

--saveoptions fügt die Abhängigkeit auch der Datei package.json hinzu. Wenn Sie keine --saveOption angeben , wird nur das Paket heruntergeladen, die JSON-Datei bleibt jedoch unberührt.

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

sachinjain024
quelle

Vielen Dank für die Klarstellung und für den Artikel! Aufschlussreich und verdeutlicht den Unterschied (der bei der Entscheidung helfen sollte, wo Abhängigkeiten platziert werden sollen). Ich werde warten, ob sich vielleicht jemand auf die letzte Frage einlässt (bezüglich: Wann würde ich jemals Pakete einzeln installieren wollen) und Ihre Antwort später akzeptieren :)

LehrlingDev

In Bezug auf npm ist es möglicherweise ein Paketmanager für NodeJS-Module, aber wir verlieren den Blick dafür, dass dies nicht nur für NodeJS gilt. npm ist genauso effektiv, um clientseitige Abhängigkeiten zu verwalten. Beispiel: dontkry.com/posts/code/using-npm-on-the-client-side.html

Matt Smith

Was kann Bower tun, was npm nicht kann?

Adam Soffer

Beachten Sie, dass das jQuery-Plugin-Repository ( plugins.jquery.com ) durch npm ersetzt wurde.

Donnerstag,

Im npmGegensatz zum v1-Tutorial, in dem sowohl npm als auch bower verwendet wurden, werden nur das neueste Quickstart-Tutorial für Winkel 2 (RC) und Git Seed verwendet . Ich mag die Fakten wirklich, dass (a) package.jsondas einzige ist, was zu pflegen ist, (b) dass es Abhängigkeiten rekursiv in einem Einzeiler berechnet npm installund (c) wenn es ein Problem gibt, müssen Sie nur den node_modulesOrdner löschen und npm install ausführen nochmal.

Sebas