Share
Haben Sie schon einmal ein GitHub-Repo geklont oder heruntergeladen, nur um eine Reihe von fremden und fremden Dateien zu finden, die Sie nicht erkennen?
Angenommen, Sie arbeiten an einer Website und benötigen eine Bibliothek (JavaScript oder CSS), um Ihrem Projekt einige Funktionen hinzuzufügen. Sie finden die perfekte Bibliothek in einem GitHub-Repository, sodass Sie sie sofort herunterladen können. Wenn Sie das Paket extrahieren, entdecken Sie mehrere seltsame Dateien, darunter eine bower.json.
Darüber hinaus haben Sie möglicherweise auch Anweisungen im Repository gefunden, die in der Regel Folgendes enthalten:
Mit Bower installieren:
Bower installieren Bootstrap.
Sie fragen sich vielleicht, wofür diese Datei verwendet wird, geschweige denn, warum Sie sie mit Bower installieren sollten. Diese Fragen wurden mir kürzlich von einem befreundeten Webdesigner gestellt und ich habe den Verdacht, dass sich viele Menschen ähnlich verwirrt fühlen. Wenn Sie einer dieser Personen sind, sollte Ihnen dieser schnelle Tipp helfen!
Bower ist ein Paketmanager für das Web. Es hilft Ihnen, Abhängigkeiten zu verwalten. Dateien (möglicherweise von Drittanbietern, die häufig über GitHub öffentlich verfügbar sind), die Sie für Ihr Projekt benötigen.
bower.json, Die Datei, über die wir hier sprechen, spielt eine zentrale Rolle in einer Bower-Umgebung. Früher hieß es component.json, der Name wurde jedoch in bower.json geändert, um Konflikte zu vermeiden, die mit den anderen Tools auftreten könnten, die denselben Dateinamen verwenden.
bower.json hilft Bower, das Projekt zu verstehen; Es zeichnet Metadaten wie den Namen des Projekts, die Version, den Autor, die Lizenz, die Abhängigkeiten usw. auf. Die Informationen sind in JSON strukturiert, was normalerweise wie folgt aussieht:
"name": "awesome", "version": "1.0.0", "Autors": ["John Doe"], "description": "Die tollste Sache der Galaxie", "Lizenz": "MIT "," Abhängigkeiten ": " cool-library ":" 1.1.2 "," good-library ":" 2.1.3 "
Aus dieser für Menschen lesbaren JSON-Datei können wir ableiten, dass dieses Projekt "awesome" genannt wird, derzeit unter Version "1.0.0" ist, von "John Doe" erstellt wurde, ein paar andere Details und einige Abhängigkeiten erfordert anwesend sein, um zu arbeiten.
Wenn Sie bower.json in einer Bibliothek finden, impliziert dies zwei Dinge:
Bower verwendet diese Datei auf verschiedene Weise. Es verwendet die Metadetails, um die Paketinformationen anzuzeigen, wenn wir die Bower-Registrierung durchsuchen.
Einige bekannte Projekte finden Sie in der Bower-RegistryBower analysiert die Datei auch, wenn wir mehrere Befehle ausführen, wie z Laubenversion und Bower installieren.
Bower installieren ist der Befehl zum Installieren eines Pakets, das in der Bower-Registrierung registriert ist. Dieser Befehl installiert auch die Pakete, die in "bower.json" unter "Abhängigkeiten" aufgeführt sind. Standardmäßig werden diese Pakete in einem Ordner namens hinzugefügt bower_components.
Als Beispiel installieren wir Animate.css und Bootstrap mit Bower.
Zunächst müssen Sie Bower installieren. Weitere Informationen hierzu finden Sie unter Meet Bower: Ein Paketmanager für das Web. Wenn dies erledigt ist, können Sie den folgenden Befehl in das Terminal oder in die Eingabeaufforderung eingeben (wenn Sie Windows verwenden), die diese Pakete gleichzeitig installiert:
bower install animate.css bootstrap
Jetzt sollten Sie sie in den bower_components hinzugefügt finden.
Animate.css und Bootstrap-Ordner in bower_components hinzugefügtWie Sie oben sehen können, haben wir einen zusätzlichen Ordner, Jquery. Dies liegt daran, dass Bootstrap dies als Abhängigkeit festlegt. Für die Bootstrap-JavaScript-Komponenten ist jQuery erforderlich. Wenn Sie einen Blick auf die im Paket enthaltene Datei "bower.json" werfen, finden Sie sie am Ende der Datei wie folgt.
jQuery wird in Bootstraps bower.json als Abhängigkeit festgelegtAngenommen, Sie haben gerade eine Bibliothek mit einer begleitenden Datei bower.json heruntergeladen. Als erstes würde ich vorschlagen, dass Sie die Datei auf Abhängigkeiten untersuchen.
Als Beispiel habe ich eine JavaScript-Bibliothek namens Revealer.js heruntergeladen. Revealer.js benötigt anscheinend Reveal.js, um zu funktionieren. Wir finden es als Abhängigkeit in der Datei bower.json aufgelistet, wie unten gezeigt:
//… "Abhängigkeiten": "decken.js": "~ 2.5.0", //…
Nur um das zu bestätigen, wenn wir die index.html aus dem öffnen Ansichten Ordner finden wir offenbaren.js Die Datei ist innerhalb einer Skript Tag wie so.
Nun müssen wir den Ordner der Bibliothek in der Terminal- oder Eingabeaufforderung öffnen und dann Folgendes eingeben:
Bower installieren
Wie bereits erwähnt, werden mit diesem Befehl alle registrierten Pakete in bower.json gleichzeitig heruntergeladen.
Hinweis: In diesem speziellen Fall wird das Paket in der hinzugefügt öffentlich / Komponenten Ordner, wie im angegeben .bowerrc Datei. Eine .bowerrc-Datei wird manchmal der Datei bower.json beigefügt und wird zum Angeben benutzerdefinierter Installationsverzeichnisse verwendet.
Das von uns installierte Paket kann im Laufe der Zeit aktualisiert werden, entweder um die Fehler zu beheben oder neue Funktionen hinzuzufügen. Mit Bower ist das Aktualisieren dieser Bibliotheken ein Kinderspiel. Als Erstes geben wir ein:
Laugenliste
Dadurch werden die aktuell installierten Pakete in unserem Projekt aufgelistet und die aktuellste verfügbare Version angezeigt. In unserem Fall scheint Reveal.js eine neuere Version zu haben. Also, lass es uns aktualisieren.
Die neueste Version von Reveal.js ist verfügbarGeben Sie diesen Befehl ein, um Reveal.js zu aktualisieren.
Bower installieren --save enth.js # 2.6.2
Dies ändert auch die Version, die in unserem Projekt bower.json aufgezeichnet ist.
//… "Abhängigkeiten": "decken.js": "2.6.2", //…
Bower ist ein wirklich praktisches Werkzeug zum Verwalten von Projektbibliotheken. Es ist ein bisschen wie mit unserem eigenen AppStore oder Google Play; Wir können Bibliotheken einfach installieren, aktualisieren und entfernen. Ich hoffe, dass dieser Tipp dazu beigetragen hat, Verwirrungen beim Herunterladen von Bibliotheken von Drittanbietern zu vermeiden und Ihnen die Vorteile der Verwendung von Bower in Ihrem Workflow zu zeigen.
Accentsconagua