Bower - A front-end csomagkezelő
Mi az a csomagkezelő?
Ha röviden akarjuk megfogalmazni, akkor a csomagkezelő egy olyan program, amelynek a segítségével más programokat telepíthetünk, frissíthetünk vagy akár törölhetünk. Továbbá a csomagkezelők feladata a különböző függőségek kezelése is. Ma már szerencsére számtalan könyvtár, kiegészítés áll rendelkezésünkre, ha front-end fejlesztésről van szó, gondoljunk csak bele, hogy JQuery-hez vagy AngularJS-hez milyen sok plugint készítettek már, rengeteg plugin további plugineket is felhasznál, ezek között akár komoly függőségek is állhatnak.
Miért a Bower?
Bower mögött a Twitter áll, emiatt biztosak lehetünk benne, hogy egy stabil fejlesztő gárda fejleszti, illetve bízhatunk abban, hogy későbbiekben is a legtöbb front-end projektet be fogják regisztrálni hozzájuk.
Külön kiemelném, hogy a Bower-t nem csak JavaScript, hanem több CSS framework-höz is használhatjuk, emiatt a front-end csomagkezelő elnevezés valóban illik rá.
A Bower-nek az egyszerűségében rejlik az ereje. Nem akar sok mindent megoldani, ám azt rendkívül egyszerűen teszi.
Használjuk bátran!
Gyakori jelenség, hogy kezdő programozók mindent maguk szeretnének lekódolni. Webfejlesztés esetén valamiért ez különösen igaz. Ám felesleges olyat leprogramozni, amit már előttünk többen megtettek. A Bower segít nekünk megtalálni a már beregisztrált fejlesztéseket, és minden függőségükkel együtt telepíthetjük azokat, illetve a későbbiekben könnyedén tarthatjuk a telepített csomagokat naprakész állapotban.
Telepítés
A Bower csomagkezelőt a NodeJS csomagkezelőjével kell feltelepíteni, azaz első lépésként telepítsük fel a NodeJS-t (a nodejs.org oldalon az Install gomb, majd néhány oké), ezután a Bower-t a következő utasítással telepíthetjük:
npm install -g bower
Telepítés után érdemes megnézni, hogy valóban sikeres volt-e a telepítés:
bower --version
Windows esetén a csomagok letöltéséhez szükség lesz a Git verziókezelőre is, amennyiben azzal nem rendelkeznénk, akkor a msysgit.github.io oldalról telepíthetjük a programot. A telepítésnél a "run git from windows command prompt" opciót válasszuk ki!
Csomagok keresése
Kétféleképpen kereshetünk a csomagok között, lehetőségünk van a honlapon található keresőt használni.
Illetve másik lehetőség a konzolos keresés, a bower search <name> utasítással. Például:
bower search ckeditor
Csomagok telepítése
Új csomagokat a bower install <package> utasítással telepíthetünk. Ha szükséges, akkor régebbi verziót is telepíthetünk a konkrét verziószám megadásával. bower install <package>#<version>
bower install jquery#1.10.2
Használat
A feltelepített csomagok a bower_components mappába kerülnek. Az előbbi példában telepített JQuery-t a következő HTML script tag-gel tudjuk betölteni.
<script type="text/javascript" src="bower_components/jquery/jquery.min.js"></script>
Hátrányként, meg kell említeni, hogy jelenleg nem állítható be, hogy csak a minimálisan szükséges fájlokat töltsük le, a legtöbb esetben például a teljes build-hez szükséges forrás letöltésre kerül.
Csomagok telepítése a bower.json fájllal
Az eddigiek is hasznosak lennének, de valójában a program hasznát akkor fogjuk megtapasztalni, ha készítünk hozzá egy konfigurációs fájlt. Ha egy projekt mappában látunk egy bower.json fájlt, akkor segítségével könnyedén láthatjuk, hogy milyen külső könyvtárakat használ fel a projekt.
A bower init utasítással generálhatunk bower.json fájlt, egyszer érdekességképpen elkészíthető így a fájl, ám későbbiekben biztos, hogy mindenki a szövegszerkesztőjében fogja írni ezeket az adatokat. Például így nézhet ki:
{
"name": "test-app",
"version": "0.0.1",
"dependencies": {
"font-awesome": "latest",
"angular": ">=1.0.0 <1.3.0",
"angular-mocks": ">=1.0.0 <1.3.0",
"angular-animate": "~1.2.10"
}
}Ekkor a bower install utasítással telepíthetjük a megadott csomagokat.
Ha frissíteni szeretnénk a csomagokat, akkor a bower update utasítást adjuk ki.
Ezzel a cikkel csupán betekintést szerettem volna adni a Bower használatába, a fentieken kívül még további utasítások is használhatóak, amelyeket a bower help utasítással listázhatunk ki!
Zárszó
Szerencsénkre ma már a JavaScript-hez köthető fejlesztő környezet is egyre professzionálisabb. Több programozási nyelvben ezek a szolgáltatások már évek óta alapértelmezettek voltak. Ám most már JavaScript fejlesztők is könnyedén menedzselhetik a függőségeket. Befejezésként csak megismételni tudom az elején elhangzottakat: Használjuk bátran!