LearnGetting Started with Bower

Tänä päivänä front-end-kehitykseen on saatavilla enemmän kirjastoja ja kehyksiä kuin koskaan ennen. Ei ole harvinaista, että yhdessä projektissa on mukana viisi tai useampi näistä kirjastoista. Mutta kaikkien näiden kirjastojen seuraaminen ja niiden ajantasaisuuden varmistaminen voi olla hankalaa. Bower on paketinhallintaohjelma, jonka avulla on helppo hallita kaikkia sovelluksesi front-end-riippuvuuksia.

Tässä blogikirjoituksessa opit, miten pääset käyttämään Boweria. Aloitat asentamalla Bower-komentoriviohjelman ja jatkat sitten tutustumalla eri komentoihin, jotka ovat käytettävissä pakettien hallintaan.

Aloitetaan!

Bowerin asentaminen

Bower voidaan asentaa käyttämällä npm:ää, Noden paketinhallintaohjelmaa. Jos sinulla ei vielä ole npm:ää asennettuna, siirry Node.js-sivustolle ja lataa järjestelmääsi sopiva kopio Node.js:stä. Npm-ohjelma sisältyy Node.js:n asennukseen.

Kun olet asentanut npm:n, avaa Terminal (tai komentorivi) ja kirjoita seuraava komento:

npm install -g bower

Tämä asentaa Bowerin globaalisti järjestelmääsi.

Nyt kun Bower on asennettu, voimme alkaa tarkastella komentoja, joita käytetään pakettien hallintaan.

Pakettien löytäminen

Bower-paketteja voi löytää kahdella eri tavalla. Joko käyttämällä online-komponenttihakemistoa tai käyttämällä komentorivin apuohjelmaa.

Pakettien etsimiseen komentoriviltä käytetään komentoa search. Tätä tulee seurata hakukyselysi.

bower search <query>

Haet esimerkiksi paketteja, jotka sisältävät sanan ’jquery’, voisit tehdä seuraavasti:

bower search jquery

Tämä komento palauttaisi koko joukon tuloksia, joista osa näkyy alla olevassa pätkässä.

Jokaiseen tulokseen tulee näkyviin paketin nimi ja Git-päätepiste. Tarvitset joko nimen tai Git-päätepisteen asentaaksesi paketin.

Pakettien asentaminen

Lisätäksesi uuden Bower-paketin projektiisi käytät komentoa install. Tälle tulee välittää sen paketin nimi, jonka haluat asentaa.

bower install <package>

Paketin nimen lisäksi voit asentaa paketin myös määrittelemällä jonkin seuraavista:

• Git-päätepiste, kuten git://github.com/components/jquery.git
• Polku paikalliseen Git-tietovarastoon.
• Lyhennetty päätepiste, kuten components/jquery. Bower olettaa, että käytetään GitHubia, jolloin päätepiste on arkiston URL-osoitteessa github.com:n jälkeinen osa.
• URL-osoite tiedostoon zip tai tar. Tiedoston sisältö puretaan automaattisesti.

Voit asentaa tietyn version paketista lisäämällä paketin nimen perään punnamerkin (#) ja sen jälkeen versionumeron.

bower install <package>#<version>

Asennetut paketit sijoitetaan bower_components-hakemistoon. Tämä luodaan kansioon, jossa bower-ohjelma on suoritettu. Voit muuttaa tätä määränpäätä .bowerrc-tiedoston konfiguraatioasetuksilla.

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

Asennettuasi paketin voit käyttää sitä lisäämällä HTML-merkkaukseesi yksinkertaisesti <script>– tai <link>-tagin. Vaikka Bower-paketit sisältävät yleisimmin JavaScript-tiedostoja, ne voivat sisältää myös CSS:ää tai jopa kuvia.

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

Pakettien asentaminen bower.json-tiedoston avulla

Jos käytät useita paketteja projektissasi, on usein hyvä idea listata nämä paketit bower.json-tiedostoon. Näin voit asentaa ja päivittää useita paketteja yhdellä komennolla.

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

Yllä olevassa yksinkertaisessa esimerkissä on bower.json-tiedosto, jossa määritellään joitakin tietoja projekteista sekä luettelo riippuvuuksista. bower.json-tiedostoa käytetään itse asiassa Bower-paketin määrittelyyn, joten käytännössä luot oman paketin, joka sisältää kaikki sovelluksesi riippuvuudet.

Tässä esimerkissä käytetyt ominaisuudet selitetään alla.

• name – Sovelluksen/paketin nimi.
• version – Sovelluksen/paketin versionumero.
• dependencies – Sovelluksessasi tarvittavat paketit. Sinun on määritettävä versionumero jokaiselle näistä paketeista yllä olevan esimerkin mukaisesti. Määrittämällä latest, Bower asentaa paketin viimeisimmän version.
• private – Tämän ominaisuuden asettaminen arvoon true tarkoittaa, että haluat paketin pysyvän yksityisenä etkä halua lisätä sitä rekisteriin tulevaisuudessa.

Kun olet luonut bower.json-tiedoston, voit yksinkertaisesti suorittaa komennon bower install asentaaksesi kaikki määrittelemäsi paketit.

Bower sisältää kätevän apuohjelman, jonka avulla voit luoda bower.json-tiedoston projektillesi. Suorittamalla komennon bower init projektisi juuressa käynnistyy interaktiivinen ohjelma, joka luo tiedoston puolestasi. Saatat kuitenkin joutua lisäämään joitain paketteja tiedostoon itse.

Huomautus: Täydellisen luettelon bower.json-tiedostoon lisättävistä ominaisuuksista löydät spesifikaatiosta.

Asennettujen pakettien luettelointi

Osaat helposti selville, mitkä paketit on asennettu komennolla list.

bower list

Alhaalla olevassa katkelmassa on esitetty tulosteen tuloste yksinkertaiselle projektille, jossa käytetään jQuerya, Modernizr:ää ja Sassia. Huomaa, että Bower tarkistaa myös, onko kustakin paketista saatavilla uudempi versio.

Pakettien päivittäminen

Paketin päivittäminen on melko suoraviivaista. Jos olet käyttänyt bower.json-tiedostoa, voit suorittaa yksinkertaisen update-komennon päivittääksesi kaikki paketit kerralla. Päivitystyökalu noudattaa kuitenkin bower.json-tiedostossa määrittämiäsi versiorajoituksia.

bower update

Yksittäisen paketin päivittämiseksi käytät jälleen update-komentoa, tällä kertaa määrittämällä sen paketin nimen, jonka haluat päivittää.

bower update <package>

Pakettien poistaminen

Pakettien poistamiseen voit käyttää komentoa uninstall ja sen jälkeen haluamasi paketin nimeä.

bower uninstall <package>

Pakettien nimiä listaamalla voit poistaa useita paketteja kerralla.

bower uninstall jquery modernizr sass-bootstrap

Loppuajatuksia

Pakettienhallintaohjelmat ovat vallankumouksellisesti mullistaneet koodin jakamisen. Ne ovat tehneet koodikirjastojen käyttämisestä helpompaa kuin koskaan ennen, ja ne ovat poistaneet suuren osan päivitysten hoitamiseen liittyvästä päänvaivasta.

Pitkän aikaa front-end-kehittäjät katselivat RubyGemsin kaltaisia projekteja kateellisena; he toivoivat, että jonain päivänä mekin saisimme suoraviivaisen tavan hallita projektin riippuvuuksia. Bower on tarjonnut meille tuon työkalun. Kun yhä useammat hienot kirjastot yleistyvät verkkosovelluksissamme, projektiemme monimutkaisuus kasvaa väistämättä. Bower tarjoaa meille tavan hallita tätä monimutkaisuutta.

Hyödyllisiä linkkejä

• Bower
• Bower GitHub Repository
• Bower Component Directory

• bower
• koodi
• javascripti
• web-sovellus