Leer aan de slag te gaan met Bower

Er zijn nu meer bibliotheken en frameworks beschikbaar voor front-end ontwikkeling dan ooit tevoren. Het is niet ongewoon om vijf of meer van deze bibliotheken betrokken te hebben bij een enkel project. Maar het bijhouden van al deze bibliotheken en ervoor zorgen dat ze up-to-date zijn kan lastig zijn. Enter Bower, een package manager die het eenvoudig maakt om alle front-end afhankelijkheden van je applicatie te beheren.

In deze blog post ga je leren hoe je aan de slag kunt met Bower. Je begint met het installeren van het Bower command-line hulpprogramma en leert vervolgens over de verschillende commando’s die beschikbaar zijn voor het beheren van pakketten.

Lets get started!

Installatie van Bower

Bower kan worden geïnstalleerd met behulp van npm, de Node package manager. Als je npm nog niet geïnstalleerd hebt, ga dan naar de Node.js website en download de relevante kopie van Node.js voor jouw systeem. Het npm programma wordt meegeleverd met de installatie van Node.js.

Als je npm hebt geïnstalleerd, open dan Terminal (of Command Prompt) en voer het volgende commando in:

npm install -g bower

Dit zal Bower globaal installeren op je systeem.

Nu u Bower hebt geïnstalleerd, kunnen we gaan kijken naar de commando’s die worden gebruikt om pakketten te beheren.

Vinden van pakketten

Er zijn twee verschillende manieren waarop u Bower pakketten kunt vinden. Ofwel via de online component directory, ofwel via de command line utility.

Om naar packages te zoeken op de command line gebruikt u het search commando. Dit moet gevolgd worden door uw zoekopdracht.

bower search <query>

Om bijvoorbeeld naar pakketten te zoeken die het woord ‘jquery’ bevatten, zou u het volgende kunnen doen:

bower search jquery

Dit commando zou een heleboel resultaten opleveren, waarvan sommige in de onderstaande snippet worden weergegeven.

Elk resultaat toont de naam van het pakket en een Git eindpunt. Je hebt de naam of het Git eindpunt nodig om een package te installeren.

Pakketten installeren

Om een nieuw Bower package aan je project toe te voegen gebruik je het install commando. Dit moet worden doorgegeven aan de naam van het pakket dat je wilt installeren.

bower install <package>

Naast het gebruik van de pakketnaam, kun je een pakket ook installeren door een van de volgende op te geven:

• Een Git eindpunt zoals git://github.com/components/jquery.git
• Een pad naar een lokale Git repository.
• Een steno eindpunt zoals components/jquery. Bower zal aannemen dat GitHub wordt gebruikt, in dat geval is het eindpunt het deel na github.com in de URL van de repository.
• Een URL naar een zip of tar bestand. De inhoud van het bestand wordt automatisch uitgepakt.

U kunt een specifieke versie van het pakket installeren door een pond-teken (#) achter de pakketnaam te zetten, gevolgd door het versienummer.

bower install <package>#<version>

Geïnstalleerde pakketten worden in een bower_components directory geplaatst. Deze wordt aangemaakt in de map waarin het bower programma werd uitgevoerd. U kunt deze bestemming wijzigen met de configuratie-opties in een .bowerrc bestand.

• bower_components
  • jquery
    • jquery.js
    • jquery.min.js
    • jquery.min.map
    • …
  • modernizr
    • modernizr.js
    • …

>

Eenmaal geïnstalleerd, kunt u een package gebruiken door simpelweg een <script> of <link> tag aan uw HTML markup toe te voegen. Hoewel Bower packages meestal JavaScript-bestanden bevatten, kunnen ze ook CSS of zelfs afbeeldingen bevatten.

<script src="https://blog.teamtreehouse.com/path/to/bower_components/jquery/jquery.min.js"></script>

Pakketten installeren met een bower.json-bestand

Als u meerdere pakketten binnen uw project gebruikt, is het vaak een goed idee om deze pakketten in een bower.json-bestand op te sommen. Dit stelt u in staat om meerdere pakketten met een enkel commando te installeren en bij te werken.

{ "name": "app-name", "version": "0.0.1", "dependencies": { "sass-bootstrap": "~3.0.0", "modernizr": "~2.6.2", "jquery": "~1.10.2" }, "private": true}

Het eenvoudige voorbeeld hierboven toont een bower.json bestand dat wat informatie over de projecten definieert, evenals een lijst van afhankelijkheden. Het bower.json-bestand wordt eigenlijk gebruikt om een Bower-pakket te definiëren, dus in feite maakt u uw eigen pakket dat alle afhankelijkheden voor uw toepassing bevat.

De eigenschappen die in dit voorbeeld worden gebruikt, worden hieronder uitgelegd.

• name – De naam van uw toepassing/pakket.
• version – Een versienummer voor uw toepassing/pakket.
• dependencies – De pakketten die vereist zijn voor uw toepassing. U dient voor elk van deze pakketten een versienummer op te geven zoals in het bovenstaande voorbeeld. Als u latest opgeeft, zal Bower de meest recente versie van een pakket installeren.
• private – Als u deze eigenschap op true zet, betekent dit dat u wilt dat het pakket privé blijft en dat u het in de toekomst niet aan het register wilt toevoegen.

Als je eenmaal je bower.json bestand hebt opgezet, kun je simpelweg het bower install commando uitvoeren om alle pakketten te installeren die je hebt opgegeven.

Bower bevat een handig hulpprogramma dat je zal helpen om een bower.json bestand voor je project te maken. Het uitvoeren van het bower init commando in de root van uw project zal een interactief programma starten dat het bestand voor u zal maken. Het kan echter nodig zijn dat u zelf nog een aantal pakketten aan het bestand toevoegt.

Note: Voor een volledige lijst van eigenschappen die aan uw bower.json bestand kunnen worden toegevoegd, bekijk de specificatie.

Listing Installed Packages

U kunt eenvoudig achterhalen welke pakketten zijn geïnstalleerd met behulp van het list commando.

bower list

De onderstaande snippet toont de uitvoer voor een eenvoudig project dat jQuery, Modernizr en Sass gebruikt. Merk op dat Bower ook controleert of er een nieuwere versie van elk van de pakketten beschikbaar is.

Updating Packages

Het bijwerken van een pakket is vrij eenvoudig. Als u een bower.json bestand hebt gebruikt, kunt u een eenvoudig update commando uitvoeren om alle pakketten in een keer bij te werken. De update tool zal zich echter houden aan de versie restricties die u heeft gespecificeerd in het bower.json bestand.

bower update

Om een individueel pakket bij te werken gebruikt u wederom het update commando, deze keer met specificatie van de naam van het pakket dat u wenst bij te werken.

bower update <package>

Pakketten verwijderen

Om een pakket te verwijderen gebruikt u het uninstall commando, gevolgd door de naam van het pakket dat u wilt verwijderen.

bower uninstall <package>

Het is mogelijk om meerdere pakketten tegelijk te verwijderen door de pakketnamen op te sommen.

bower uninstall jquery modernizr sass-bootstrap

Eindgedachten

Pakketbeheerders hebben een revolutie teweeggebracht in de manier waarop we code delen. Ze hebben het gebruik van code bibliotheken makkelijker gemaakt dan ooit tevoren, en hebben veel van de hoofdpijn van het omgaan met updates weggenomen.

Voor een lange tijd keken front-end ontwikkelaars met afgunst naar projecten als RubyGems; wensend dat ook wij op een dag een eenvoudige manier zouden hebben om project afhankelijkheden te beheren. Bower heeft ons dat gereedschap gegeven. Naarmate meer geweldige bibliotheken gemeengoed worden in onze webapplicaties, zal de complexiteit van onze projecten onvermijdelijk toenemen. Bower biedt ons een manier om deze complexiteit te beheren.

Useful Links

• Bower
• Bower GitHub Repository
• Bower Component Directory

• bower
• code
• javascript
• web app