Lär dig att komma igång med Bower

Det finns nu fler bibliotek och ramverk tillgängliga för front-end-utveckling än någonsin tidigare. Det är inte ovanligt att fem eller fler av dessa bibliotek är involverade i ett enda projekt. Men att hålla reda på alla dessa bibliotek och se till att de är uppdaterade kan vara knepigt. Kom in i Bower, en pakethanterare som gör det enkelt att hantera alla front-end-beroenden i din applikation.

I det här blogginlägget kommer du att lära dig hur du kommer igång med Bower. Du börjar med att installera kommandoradsverktyget Bower och fortsätter sedan med att lära dig om de olika kommandon som finns tillgängliga för att hantera paket.

Vi kommer igång!

Installation av Bower

Bower kan installeras med hjälp av npm, Node-pakethanteraren. Om du inte redan har npm installerat går du till Node.js webbplats och laddar ner den relevanta kopian av Node.js för ditt system. Programmet npm ingår i installationen av Node.js.

När du har installerat npm öppnar du Terminal (eller kommandotolken) och skriver följande kommando:

npm install -g bower

Detta kommer att installera Bower globalt på ditt system.

När du nu har Bower installerat kan vi börja titta på de kommandon som används för att hantera paket.

Söka paket

Det finns två olika sätt att hitta Bower-paket. Antingen genom att använda komponentkatalogen online eller genom kommandoradsverktyget.

För att söka efter paket på kommandoraden använder du kommandot search. Detta ska följas av din sökfråga.

bower search <query>

För att söka efter paket som innehåller ordet ”jquery” kan du till exempel göra följande:

bower search jquery

Detta kommando skulle ge en hel del resultat, varav några visas i utklippet nedan.

Varje resultat visar paketets namn och en Git-slutpunkt. Du behöver antingen namnet eller Git-ändpunkten för att installera ett paket.

Installation av paket

För att lägga till ett nytt Bower-paket i ditt projekt använder du kommandot install. Till detta ska du skicka namnet på det paket du vill installera.

bower install <package>

Som du använder paketnamnet kan du också installera ett paket genom att ange något av följande:

• En Git-slutpunkt som git://github.com/components/jquery.git
• En sökväg till ett lokalt Git-arkiv.
• En förkortad slutpunkt som components/jquery. Bower antar att GitHub används, och i så fall är ändpunkten delen efter github.com i URL:en till förvaret.
• En URL till en zip eller tar fil. Filens innehåll extraheras automatiskt.

Du kan installera en specifik version av paketet genom att lägga till ett pundtecken (#) efter paketnamnet, följt av versionsnumret.

bower install <package>#<version>

Installerade paket placeras i en bower_components-katalog. Denna skapas i den mapp där bower-programmet exekverades. Du kan ändra denna destination med hjälp av konfigurationsalternativen i en .bowerrc fil.

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

När paketet väl är installerat kan du använda det genom att helt enkelt lägga till en <script>– eller <link>-tagg i din HTML-markup. Även om Bower-paket oftast innehåller JavaScript-filer kan de också innehålla CSS eller till och med bilder.

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

Installation av paket med hjälp av en bower.json-fil

Om du använder flera paket i ditt projekt är det ofta en bra idé att lista dessa paket i en bower.json-fil. På så sätt kan du installera och uppdatera flera paket med ett enda 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 enkla exemplet ovan visar en bower.json-fil som definierar viss information om projekten samt en lista över beroenden. bower.json-filen används faktiskt för att definiera ett Bower-paket, så i själva verket skapar du ett eget paket som innehåller alla beroenden för ditt program.

De egenskaper som används i det här exemplet förklaras nedan.

• name – Namnet på ditt program/paket.
• version – Ett versionsnummer för ditt program/paket.
• dependencies – De paket som krävs av ditt program. Du bör ange ett versionsnummer för vart och ett av dessa paket enligt exemplet ovan. Om du anger latest, kommer Bower att installera den senaste versionen av ett paket.
• private – Om du anger den här egenskapen till true betyder det att du vill att paketet ska förbli privat och att du inte vill lägga till det i registret i framtiden.

När du väl har satt upp din bower.json-fil kan du helt enkelt utföra kommandot bower install för att installera alla paket som du har angett.

Bower innehåller ett praktiskt verktyg som hjälper dig att skapa en bower.json-fil för ditt projekt. Om du utför kommandot bower init vid roten av ditt projekt startar du ett interaktivt program som skapar filen åt dig. Du kan dock fortfarande behöva lägga till vissa paket i filen själv.

Notera: För en fullständig lista över egenskaper som kan läggas till i din bower.json-fil, se specifikationen.

Lista över installerade paket

Du kan enkelt ta reda på vilka paket som är installerade med hjälp av kommandot list.

bower list

Snippet nedan visar utmatningen för ett enkelt projekt som använder jQuery, Modernizr och Sass. Lägg märke till att Bower också kontrollerar om det finns en nyare version av varje paket.

Uppdatering av paket

Att uppdatera ett paket är ganska okomplicerat. Om du har använt en bower.json-fil kan du utföra ett enkelt update-kommando för att uppdatera alla paket på en gång. Uppdateringsverktyget kommer dock att följa de versionsbegränsningar som du har angett i bower.json-filen.

bower update

För att uppdatera ett enskilt paket använder du återigen update-kommandot, men den här gången anger du namnet på det paket du vill uppdatera.

bower update <package>

Avinstallation av paket

För att ta bort ett paket använder du kommandot uninstall följt av namnet på det paket du vill ta bort.

bower uninstall <package>

Det är möjligt att ta bort flera paket på en gång genom att lista paketnamnen.

bower uninstall jquery modernizr sass-bootstrap

Sluttankar

Pakethanterare har revolutionerat hur vi delar kod. De har gjort det enklare än någonsin att använda kodbibliotek och har tagit bort en stor del av huvudvärken med att hantera uppdateringar.

För länge sedan tittade front-end-utvecklare avundsjukt på projekt som RubyGems; de önskade att vi en dag också skulle ha ett enkelt sätt att hantera projektberoenden. Bower har gett oss det verktyget. I takt med att fler fantastiska bibliotek blir vanliga i våra webbapplikationer kommer komplexiteten i våra projekt oundvikligen att öka. Bower ger oss ett sätt att hantera denna komplexitet.

Användbara länkar

• Bower
• Bower GitHub Repository
• Bower Component Directory

• bower
• kod
• javascript
• webbapplikation