Snelle tip wat te doen als u een prieelbestand tegenkomt

Heb je ooit een GitHub repo gekloond of gedownload, alleen om een ​​aantal vreemde en vreemde bestanden te vinden die je niet herkent?

Stel dat u bijvoorbeeld aan een website werkt en een bibliotheek, JavaScript of CSS nodig heeft om enkele functies toe te voegen aan uw project. Je vindt de perfecte bibliotheek in een GitHub-repository, dus je download hem meteen. Wanneer u het pakket uitpakt, ontdekt u verschillende vreemde bestanden, waarvan er één is bower.json.

Verder heb je misschien ook instructies in de repository gevonden die meestal iets zeggen in de trant van:

Installeer met Bower: prieel installeren bootstrap.

Je zult je misschien afvragen waarvoor dit bestand wordt gebruikt, laat staan ​​waarom je het zou moeten installeren met Bower. Onlangs kreeg ik deze vragen van een webdesigner van mij te horen en ik vermoed dat veel mensen zich op dezelfde manier in de war voelen. Als u een van deze mensen bent, zou deze snelle tip u moeten helpen!

Een bower-bestand

Bower is een pakketbeheerder voor het web. Het helpt u bij het beheren van afhankelijkheden; bestanden (misschien van derden, vaak publiekelijk beschikbaar via GitHub) die u nodig hebt voor uw project.

bower.json, het bestand waar we het hier over hebben, speelt een centrale rol in een Bower-omgeving. Voorheen heette het component.json, maar de naam veranderde toen in bower.json om conflicten te voorkomen die kunnen optreden met de andere hulpmiddelen die dezelfde bestandsnaam gebruiken.

bower.json helpt Bower het project te begrijpen; het registreert meta-gegevens zoals de naam van het project, de versie, de auteur, de licentie, de afhankelijkheden, enzovoort. De informatie is gestructureerd in JSON en ziet er doorgaans als volgt uit:

"name": "awesome", "version": "1.0.0", "authors": ["John Doe"], "description": "The Most Awesome thing in the Galaxy", "license": "MIT "," afhankelijkheden ": " cool-library ":" 1.1.2 "," good-library ":" 2.1.3 " 

Uit dit voor de mens leesbare JSON-bestand kunnen we afleiden dat dit project "geweldig" is, momenteel op versie "1.0.0" staat, is geschreven door "John Doe", nog een aantal andere details en een paar afhankelijkheden vereist om aanwezig zijn om te werken.

Als je bower.json in een bibliotheek aantreft, impliceert dit twee dingen:

  • Ten eerste definieerde de projectauteur de bibliotheek als een Bower-pakket. Het project is misschien gepubliceerd in het register van Bower, een centrale verzameling van pakketten, zodat het kan worden toegevoegd aan uw project via de opdrachtregel van Bower.
  • De projectauteur heeft Bower mogelijk gebruikt om de projectbibliotheken te organiseren, waardoor het voor andere ontwikkelaars gemakkelijker wordt om het project later te gebruiken of uit te breiden.

Bower gebruikt dit bestand op verschillende manieren. Het gebruikt de metadetails om de pakketinformatie weer te geven wanneer we in het register van Bower zoeken. 

U zult enkele bekende projecten vinden in het register van Bower

Bower zal ook het bestand parsen wanneer we verschillende commando's uitvoeren, zoals prieel versie en installatie van prieel.

Bower installeren

installatie van prieel is de opdracht om een ​​pakket te installeren dat is geregistreerd in het register van Bower. Met deze opdracht worden ook de pakketten in de bower.json onder "afhankelijkheden" geïnstalleerd. Standaard worden deze pakketten toegevoegd in een map met de naam bower_components.

Laten we bijvoorbeeld Animate.css en Bootstrap met Bower installeren. 

Om te beginnen moet u eigenlijk Bower installeren. Bekijk Meet Bower: A Package Manager For The Web voor meer informatie hierover. Daarna kunt u de volgende opdracht in de Terminal of de Opdrachtprompt typen (als u Windows gebruikt) die deze pakketten tegelijkertijd installeert:

prieel installeer animate.css bootstrap

Nu zou je ze moeten vinden in de bower_components. 

Animate.css en Bootstrap-map toegevoegd in bower_components

Zoals je hierboven kunt zien, hebben we een extra map, jQuery. Dit is omdat Bootstrap het als een afhankelijkheid heeft ingesteld; Voor de Bootstrap JavaScript-componenten moet jQuery werken. Als u het bestand bower.json in het pakket bekijkt, vindt u dit aan het einde van het bestand, als volgt.

jQuery is ingesteld als afhankelijkheid in Bootstrap's bower.json

Wat is het volgende?

Ervan uitgaande dat u zojuist een bibliotheek met een bijbehorend bestand bower.json hebt gedownload, is het eerste dat ik u zou aanraden is dat u het bestand inspecteert op afhankelijkheden.

Als voorbeeld heb ik een JavaScript-bibliotheek gedownload met de naam Revealer.js. Revealer.js heeft blijkbaar Reveal.js nodig om te functioneren. We kunnen het als een afhankelijkheid binnen het bower.json-bestand zien, zoals hieronder getoond:

// ... "afhankelijkheden": "reveal.js": "~ 2.5.0", // ... 

Gewoon om dit te bevestigen, als we de index.html openen vanuit de keer bekeken map, zullen we vinden reveal.js bestand is gekoppeld binnen een script tag, zoals zo.

 

Nu moeten we de map van de bibliotheek openen in Terminal of Opdrachtprompt en typen:

installatie van prieel 

Zoals eerder vermeld, downloadt dit commando alle geregistreerde pakketten in bower.json tegelijk. 

Notitie: In dit specifieke geval wordt het pakket toegevoegd in de public / components map, zoals gespecificeerd in de .bowerrc het dossier. Een .bowerrc-bestand wordt soms vergezeld van het bestand bower.json en wordt gebruikt om aangepaste installatiemappen op te geven.

Het pakket bijwerken

Het pakket dat we hebben geïnstalleerd, kan in de loop van de tijd worden bijgewerkt, hetzij om de fouten te verhelpen of om nieuwe functies toe te voegen. Met Bower is het updaten van deze bibliotheken een fluitje van een cent. Laten we eerst het volgende typen:

lijst met bogen 

Hierin worden de momenteel geïnstalleerde pakketten in ons project vermeld en wordt de nieuwste beschikbare versie getoond. In ons geval lijkt het erop dat Reveal.js een nieuwere versie heeft. Dus laten we het updaten.

De nieuwste versie van Reveal.js is beschikbaar

Typ deze opdracht om Reveal.js bij te werken.

prieel installeren - opslaan onthullen.js # 2.6.2 

Dit zal ook de versie veranderen die is opgenomen in de bower.json van ons project.

// ... "afhankelijkheden": "reveal.js": "2.6.2", // ...

Conclusie

Bower is een erg handige tool voor het beheren van projectbibliotheken. Het is een beetje alsof we onze eigen AppStore of Google Play hebben; we kunnen gemakkelijk bibliotheken installeren, updaten en verwijderen. Ik hoop dat deze tip heeft bijgedragen aan het voorkomen van verwarring bij het downloaden van externe bibliotheken en dat je de voordelen van het gebruik van Bower in je workflow hebt kunnen zien.

Verdere referentie

  • Bower officiële website
  • Bower JSON-specificatie
  • Maak kennis met Bower: een pakketbeheerder voor het web
  • A RequireJS, Backbone en Bower Startersjabloon
  • Het verschil tussen Grunt, NPM en Bower (package.json vs bower.json)