LearnGetting Started with Bower

Már több könyvtár és keretrendszer áll rendelkezésre a front-end fejlesztéshez, mint valaha. Nem ritka, hogy egy projektben öt vagy több ilyen könyvtár is részt vesz. De mindezen könyvtárak nyomon követése és naprakészségük biztosítása trükkös lehet. Lépjen be a Bower, egy csomagkezelő, amely megkönnyíti az alkalmazás összes front-end függőségének kezelését.

Ebben a blogbejegyzésben megtanulja, hogyan kezdheti el használni a Bower-t. A Bower parancssori segédprogram telepítésével kezded, majd megismerkedsz a csomagok kezeléséhez rendelkezésre álló különböző parancsokkal.

Lássunk hozzá!

A Bower telepítése

A Bower telepíthető az npm, a Node csomagkezelő segítségével. Ha még nincs telepítve az npm, látogasson el a Node.js weboldalára, és töltse le a Node.js megfelelő példányát a rendszeréhez. Az npm programot a Node.js telepítése tartalmazza.

Amikor az npm telepítve van, nyissa meg a Terminált (vagy a parancssort), és írja be a következő parancsot:

npm install -g bower

Ezzel a Bower globálisan települ a rendszerére.

Most, hogy a Bower telepítve van, elkezdhetjük megnézni a csomagok kezeléséhez használt parancsokat.

Pakettek keresése

Két különböző módon találhatjuk meg a Bower csomagokat. Vagy az online komponenskönyvtár segítségével, vagy a parancssori segédprogrammal.

A csomagok parancssori kereséséhez a search parancsot használjuk. Ezt követnie kell a keresési lekérdezésednek.

bower search <query>

Ezzel a paranccsal például a ‘jquery’ szót tartalmazó csomagokat keresheted:

bower search jquery

Ez a parancs egy egész csomó találatot ad vissza, amelyek közül néhány az alábbi részletben látható.

Minden találat megjeleníti a csomag nevét és egy Git végpontot. A csomag telepítéséhez vagy a névre, vagy a Git végpontra lesz szükséged.

Pakettek telepítése

Új Bower csomagot adhatsz hozzá a projektedhez a install paranccsal. Ennek át kell adni a telepíteni kívánt csomag nevét.

bower install <package>

A csomag neve mellett a csomagot a következők egyikének megadásával is telepítheti:

• Egy Git végpont, például git://github.com/components/jquery.git
• Egy helyi Git-tár elérési útja.
• Egy rövidített végpont, például components/jquery. A Bower feltételezi, hogy a GitHubot használja, ebben az esetben a végpont a github.com utáni rész a repository URL-ben.
• Egy zip vagy tar fájl URL-je. A fájlok tartalma automatikusan kivonásra kerül.

A csomag egy adott verzióját telepítheti, ha a csomag neve után egy fontjelet (#), majd a verziószámot adja meg.

bower install <package>#<version>

A telepített csomagok egy bower_components könyvtárba kerülnek. Ez abban a mappában jön létre, amelyben a bower programot futtattuk. Ezt a rendeltetési helyet a .bowerrc fájlban található konfigurációs beállítások segítségével megváltoztathatja.

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

A telepítés után a csomagot egyszerűen egy <script> vagy <link> tag hozzáadásával használhatja a HTML jelöléshez. Bár a Bower csomagok leggyakrabban JavaScript fájlokat tartalmaznak, tartalmazhatnak CSS-t vagy akár képeket is.

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

A csomagok telepítése a bower.json fájl használatával

Ha több csomagot használsz a projekteden belül, gyakran jó ötlet ezeket a csomagokat egy bower.json fájlban felsorolni. Ez lehetővé teszi, hogy több csomagot egyetlen paranccsal telepítsen és frissítsen.

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

A fenti egyszerű példa egy bower.json fájlt mutat, amely meghatároz néhány információt a projektekről, valamint a függőségek listáját. A bower.json fájl valójában egy Bower csomag definiálására szolgál, így tulajdonképpen egy saját csomagot hoz létre, amely tartalmazza az alkalmazás összes függőségét.

A példában használt tulajdonságokat az alábbiakban ismertetjük.

• name – Az alkalmazás/csomag neve.
• version – Az alkalmazás/csomag verziószáma.
• dependencies – Az alkalmazáshoz szükséges csomagok. Mindegyik csomaghoz meg kell adnia egy verziószámot, ahogy a fenti példában látható. A latest megadása azt eredményezi, hogy a Bower a csomag legfrissebb verzióját telepíti.
• private – Ennek a tulajdonságnak a true-re történő beállítása azt jelenti, hogy a csomagot privátnak szeretné tartani, és a jövőben nem kívánja hozzáadni a nyilvántartáshoz.

Amint elkészítetted a bower.json fájlt, egyszerűen futtathatod a bower install parancsot az összes megadott csomag telepítéséhez.

Aower tartalmaz egy praktikus segédprogramot, amely segít létrehozni a bower.json fájlt a projektedhez. A bower init parancs végrehajtása a projekted gyökerében elindít egy interaktív programot, amely létrehozza neked a fájlt. Azonban előfordulhat, hogy néhány csomagot még magának kell hozzáadnia a fájlhoz.

Megjegyzés: A bower.json fájlhoz hozzáadható tulajdonságok teljes listáját a specifikációban találja.

Telepített csomagok listája

A list parancs segítségével könnyen megtudhatja, mely csomagok vannak telepítve.

bower list

Az alábbi részlet egy egyszerű projekt kimenetét mutatja, amely jQuery-t, Modernizr-t és Sass-t használ. Vegyük észre, hogy a Bower azt is ellenőrzi, hogy az egyes csomagokból elérhető-e újabb verzió.

Pakettek frissítése

A csomagok frissítése elég egyszerű. Ha egy bower.json fájlt használtál, akkor egy egyszerű update paranccsal egyszerre frissítheted az összes csomagot. A frissítő eszköz azonban betartja a bower.json fájlban megadott verziókorlátozásokat.

bower update

Az egyes csomagok frissítéséhez ismét a update parancsot használja, ezúttal a frissíteni kívánt csomag nevének megadásával.

bower update <package>

Pakettek eltávolítása

A csomag eltávolításához használhatjuk a uninstall parancsot, amelyet az eltávolítani kívánt csomag neve követ.

bower uninstall <package>

A csomagok nevének felsorolásával egyszerre több csomagot is eltávolíthatunk.

bower uninstall jquery modernizr sass-bootstrap

Végső gondolatok

A csomagkezelők forradalmasították a kód megosztását. Minden eddiginél egyszerűbbé tették a kódkönyvtárak használatát, és a frissítések kezelésével járó fejfájás nagy részét elvették.

Hosszú ideig a front-end fejlesztők irigykedve néztek az olyan projektekre, mint a RubyGems; azt kívánták, hogy egy nap nekünk is legyen egy egyszerű módja a projektfüggőségek kezelésének. A Bower biztosította számunkra ezt az eszközt. Ahogy egyre több nagyszerű könyvtár válik általánossá a webes alkalmazásaink között, a projektjeink összetettsége elkerülhetetlenül növekedni fog. A Bower lehetőséget biztosít számunkra ennek a komplexitásnak a kezelésére.

Hasznos linkek

• Bower
• Bower GitHub Repository
• Bower Component Directory

• bower
• code
• javascript
• web app