Lær at komme godt i gang med Bower

Der findes nu flere biblioteker og frameworks til front-end-udvikling end nogensinde før. Det er ikke ualmindeligt at have fem eller flere af disse biblioteker involveret i et enkelt projekt. Men det kan være svært at holde styr på alle disse biblioteker og sørge for, at de er opdaterede. Kom ind i Bower, en pakkehåndtering, der gør det nemt at administrere alle din applikations frontend-afhængigheder.

I dette blogindlæg lærer du at lære, hvordan du kommer i gang med Bower. Du starter med at installere kommandolinjeværktøjet Bower og fortsætter derefter med at lære om de forskellige kommandoer, der er tilgængelige til håndtering af pakker.

Lad os komme i gang!

Installation af Bower

Bower kan installeres ved hjælp af npm, Node-pakkehåndteringen. Hvis du ikke allerede har npm installeret, skal du gå over til Node.js-webstedet og downloade den relevante kopi af Node.js til dit system. Programmet npm er inkluderet i installationen af Node.js.

Når du har installeret npm, skal du åbne Terminal (eller kommandoprompt) og indtaste følgende kommando:

npm install -g bower

Dette vil installere Bower globalt på dit system.

Nu, hvor du har Bower installeret, kan vi begynde at se på de kommandoer, der bruges til at administrere pakker.

Søge pakker

Der er to forskellige måder, hvorpå du kan finde Bower-pakker. Enten ved hjælp af onlinekomponentkataloget eller ved hjælp af kommandolinjeværktøjet.

For at søge efter pakker på kommandolinjen bruger du kommandoen search. Denne skal efterfølges af din søgeforespørgsel.

bower search <query>

For eksempel kan du for at søge efter pakker, der indeholder ordet “jquery”, gøre følgende:

bower search jquery

Denne kommando vil returnere en hel masse resultater, hvoraf nogle vises i udklippet nedenfor.

Hvert resultat viser pakkens navn og et Git endpoint. Du skal bruge enten navnet eller Git-endpunktet for at installere en pakke.

Installation af pakker

For at tilføje en ny Bower-pakke til dit projekt bruger du kommandoen install. Denne skal have overgivet navnet på den pakke, du ønsker at installere.

bower install <package>

Selvom du kan bruge pakkenavnet, kan du også installere en pakke ved at angive en af følgende:

• Et Git endpoint som git://github.com/components/jquery.git
• En sti til et lokalt Git-repositorium.
• Et forkortet endpoint som components/jquery. Bower antager, at der bruges GitHub, og i så fald er slutpunktet den del efter github.com i URL’en til repositoriet.
• En URL til en zip eller tar fil. Filernes indhold vil blive udtrukket automatisk.

Du kan installere en bestemt version af pakken ved at tilføje et pundtegn (#) efter pakkenavnet, efterfulgt af versionsnummeret.

bower install <package>#<version>

Installerede pakker vil blive placeret i en bower_components-mappe. Denne oprettes i den mappe, som bower-programmet blev udført i. Du kan ændre denne destination ved hjælp af konfigurationsindstillingerne i en .bowerrc fil.

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

Når den er installeret, kan du bruge en pakke ved blot at tilføje et <script> eller <link>-tag til din HTML-markup. Selv om Bower-pakker oftest indeholder JavaScript-filer, kan de også indeholde CSS eller endda billeder.

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

Installation af pakker ved hjælp af en bower.json-fil

Hvis du bruger flere pakker i dit projekt, er det ofte en god idé at liste disse pakker i en bower.json-fil. Dette giver dig mulighed for at installere og opdatere flere pakker med en enkelt kommando.

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

Det enkle eksempel ovenfor viser en bower.json-fil, som definerer nogle oplysninger om projekterne samt en liste over afhængigheder. bower.json-filen bruges faktisk til at definere en Bower-pakke, så i realiteten opretter du din egen pakke, der indeholder alle afhængigheder for din applikation.

De egenskaber, der bruges i dette eksempel, forklares nedenfor.

• name – Navnet på din applikation/pakke.
• version – Et versionsnummer for din applikation/pakke.
• dependencies – De pakker, der er påkrævet for din applikation. Du skal angive et versionsnummer for hver af disse pakker som vist i eksemplet ovenfor. Hvis du angiver latest, får du Bower til at installere den seneste udgave af en pakke.
• private – Hvis du angiver denne egenskab til true, betyder det, at du ønsker, at pakken forbliver privat, og at du ikke ønsker at tilføje den til registret i fremtiden.

Når du har fået oprettet din bower.json-fil, kan du blot udføre kommandoen bower install for at installere alle de pakker, du har angivet.

Bower indeholder et praktisk hjælpeprogram, der hjælper dig med at oprette en bower.json-fil til dit projekt. Hvis du udfører kommandoen bower init ved roden af dit projekt, starter du et interaktivt program, der opretter filen for dig. Det kan dog stadig være nødvendigt, at du selv skal tilføje nogle pakker til filen.

Bemærk: Du kan finde en komplet liste over egenskaber, der kan tilføjes til din bower.json-fil, i specifikationen.

Liste over installerede pakker

Du kan nemt finde ud af, hvilke pakker der er installeret, ved hjælp af kommandoen list.

bower list

Snippet nedenfor viser output for et simpelt projekt, der bruger jQuery, Modernizr og Sass. Bemærk, at Bower også foretager en kontrol for at se, om der er en nyere version af hver af pakkerne tilgængelig.

Ajourføring af pakker

Ajourføring af en pakke er ret ligetil. Hvis du har brugt en bower.json-fil, kan du udføre en simpel update-kommando for at opdatere alle pakkerne på én gang. Opdateringsværktøjet vil dog overholde de versionsbegrænsninger, du har angivet i bower.json-filen.

bower update

For at opdatere en individuel pakke bruger du igen update-kommandoen, denne gang ved at angive navnet på den pakke, du ønsker at opdatere.

bower update <package>

Afinstallation af pakker

For at fjerne en pakke kan du bruge kommandoen uninstall efterfulgt af navnet på den pakke, du ønsker at fjerne.

bower uninstall <package>

Det er muligt at fjerne flere pakker på én gang ved at opregne pakkenavnene.

bower uninstall jquery modernizr sass-bootstrap

Sluttanker

Pakkeadministratorer har revolutioneret den måde, hvorpå vi deler kode. De har gjort det nemmere end nogensinde før at bruge kodebiblioteker og har fjernet en stor del af hovedpinen ved at håndtere opdateringer.

I lang tid kiggede frontend-udviklere på projekter som RubyGems med misundelse; de ønskede, at vi også en dag ville have en ligetil måde at administrere projektafhængigheder på. Bower har givet os det værktøj. Efterhånden som flere store biblioteker bliver almindelige i vores webapplikationer, vil kompleksiteten af vores projekter uundgåeligt stige. Bower giver os en måde at håndtere denne kompleksitet på.

Nyttige links

• Bower
• Bower GitHub Repository
• Bower Component Directory

• bower
• kode
• javascript
• webapp