Mi olyan nagyszerű a Bowerben?

Az alábbiakban Dan Sundy, a Helios Design Labs munkatársának vendégposztja következik. Dan egyrészt elmagyarázza, hogyan használjuk a Bower-t, másrészt érveket hoz fel mellette, egy olyan ember szemszögéből, aki eleinte ellenállt az ötletnek.

Amikor először kezdtem el dolgozni a Bowerrel, nem igazán értettem a vonzerejét. “Komolyan?” Gondoltam. “Most már túl sok munka letölteni és kicsomagolni egy fájlt?” Az sem volt túl izgatott, hogy egy csomó új parancsot zsúfoljak bele egy olyan agyba, ami már így is tele volt a Git, Grunt, Gulp, Jekyll, Node, stb. miatt.

Két dolgot mondanék a fél évvel ezelőtti önmagamnak. Először is, a Bower egy kicsit többre képes, mint egy-két fájl letöltése. Másodszor, megéri egy órát tölteni egy olyan eszköz megtanulásával, amely kiküszöböl egy ismétlődő feladatot.

First Things First:

A beavatatlanok számára a Bower egy csomagkezelő. Jó abban, hogy, nos, csomagokat kezeljen – bármit, amiben egy külső szerzőtől függ. Jó példák erre a CSS keretrendszerek, mint a Bootstrap, könyvtárak, mint a jQuery, jQuery pluginok, vagy JavaScript keretrendszerek, mint az Angular. A Bower hivatalos honlapja, a Bower.io talán a legjobban megfogalmazza:

A weboldalak sok mindenből állnak – keretrendszerekből, könyvtárakból, eszközökből, segédprogramokból és szivárványokból. A Bower mindezeket a dolgokat kezeli helyetted.

A Bower úgy működik, hogy mindenhonnan lekérdezi és telepíti a csomagokat, gondoskodik a keresett dolgok vadászatáról, megtalálásáról, letöltéséről és mentéséről.

Előfeltételek

Van néhány dolog, amire szükséged lesz, mielőtt elkezdhetsz dolgozni a Bowerrel:

• A parancssor. Igen, ez egy parancssori eszköz (gyerünk, nem olyan ijesztő).
• Node és NPM. A Bower egy Node modul, így a használatához NPM-re van szükséged.
• Git. A Bower csomagok Git reposok. A Bower a Git-et használja arra, hogy megértse, hol van a csomag, milyen verzióban van – ilyesmi.
• Globális telepítés. Technikailag minden projektbe telepítheted, de valószínűleg mindenhova szeretnéd, hogy ott legyen.

A Bower globális telepítéséhez:

$ npm install -g bower

Megjegyzés: A beállításoktól függően előfordulhat, hogy a `sudo npm install -g bower`-t kell használnod a globális telepítéshez.

Az alapok

Kezdésként képzeld el egy új oldal könyvtárszerkezetét. Az enyém általában valahogy így néz ki:

|-.git/|-dist/|-node_modules/|-src/| |-assets/| |-css/| |-fonts/| |-js/| | |-lib/| | |-main.js| || |-sass/| | |-style.sass| || |-index.html||-.gitignore|-gulpfile.js|-package.json|-README.md

Van egy `src` mappa, ahol a fejlesztési munka nagy része történik. Egy Gulp build task végül mindent előkészít és lefordítja az optimalizált kódunkat egy gyártásra kész `dist` mappába.

Tegyük fel, hogy a jQuery-t is be akarjuk építeni ebbe a projektbe. Általában a jquery.com-ra megyünk, megkeressük és rákattintunk a megfelelő letöltési linkre, majd kicsomagoljuk és a megfelelő könyvtárba helyezzük a fájlokat.

A Bowerrel csak futtassuk a következő parancsot:

$ bower install jquery

Máris megjelent egy `bower_components` könyvtár a `jquery` mappával.

|-.git/|-bower_components/| |-jquery/||-dist/|-node_modules/|-src/| |-assets/| |-css/| |-fonts/| |-js/| | |-lib/| | |-main.js| || |-sass/| | |-style.sass| || |-index.html||-.gitignore|-gulpfile.js|-package.json|-README.md

A jQuery megkönnyítette a kódjuk elérését azzal, hogy létrehozta és regisztrálta a Bower csomagját. A legtöbb népszerű könyvtár és keretrendszer ugyanezt tette. Ha ellenőrizni akarod, hogy a kívánt eszköz egy Bower csomag-e, akkor keresést végezhetsz:

$ bower search <package-name>

Ha nincs regisztrálva, akkor is lehetséges a git végpontokkal rendelkező repos-okat megragadni, így:

$ bower install git://github.com/example-user/example-package.git

Advanced: Ha flancolni akarsz, akkor akár privát reposokat is telepíthetsz, amelyekhez hozzáférhetsz. Nézd meg ezt a videós bemutatót Rob Dodson-tól.

Itt van még néhány alapvető parancs, amit a telepített eszközök megtekintésére és kezelésére használhatsz.

Listázza az összes csomagját:

$ bower list

Kérjen információt bármely telepített csomagról:

$ bower info <package-name>

Kereszen frissítéseket:

$ bower check-new

Majd, ha vannak frissítések, frissítsen egy csomagot:

$ bower update <package-name>

De lehet, hogy a legújabb verzióra való frissítés valamit elrontott.

Telepíthetsz bármelyik adott verziót – régit vagy újat – ezzel:

$ bower install <package-name>#<version>

Ez a lista biztosan nem teljes. Ha szeretnél belevágni, azt javaslom, hogy készíts egy tesztprojektet, és dolgozz végig egyet a sok online megtalálható oktatóanyag közül. Ez a Treehouse által készített nagyszerű: Getting Started with Bower. Ezután beleáshatod magad az összes parancsba, ha megnézed a Bower API-ját.

Hé, de várj, van még más is!

A kis fejlesztőcsapat, amellyel együtt dolgozom, már vagy egy éve használja a Bower-t. Bár a parancssoron keresztüli csomagkezelés nagyszerű volt, nem voltam elájulva, amíg el nem kezdtük használni a `.bower.json` és a `.bowerrc` fájlokat.

.bowerrc

A `.bowerrc` fájl számos dologra képes, de leginkább a `bower_components` könyvtár nevének és helyének megváltoztatására láttam használni. (Ez boldoggá tett, mert utáltam, hogy az a véletlenszerű `bower_components` mappa a projekt gyökerében lebeg).

Íme, így nézhet ki egy `.bowerrc` fájl:

{ "directory": "src/components"}

A directory opció a csomagokat a legértelmesebb helyre küldi – ebben az esetben a `src/` könyvtárba. Nézzük meg az új projektstruktúrát:

|-.git/|-dist/|-node_modules/|-src/| |-assets/| |-components/| | |-jquery/| || |-css/| |-fonts/| |-js/| | |-lib/| | |-main.js| || |-sass/| | |-style.sass| || |-index.html||-.gitignore|-.bowerrc|-gulpfile.js|-package.json|-README.md

Figyeljük meg, hogy a `bower_components/` mappa eltűnt, és van egy `components/` mappa a `src/` könyvtárban.

Advanced:

Hogyan segíthet nekünk a `bower.json` fájl?

bower.json

A `bower.json` fájl nagyon hasonlít a Node `package.json` fájljára. Ez egy manifeszt fájl, amely lehetővé teszi az opciók megadását. Nézzünk meg egy példát (amely a bower init futtatásával generálható):

{ "name": "bower-example", "version": "0.0.0", "authors": >" ], "description": "An example project using bower.", "main": "index.html", "license": "MIT", "private": true, "ignore": , "devDependencies": { "jquery": "~2.1.1" }}

Ezek az opciók nagy része arra az esetre van, ha ezt a repót Bower csomagként regisztráljuk. De látod a devDependencies objektumot a legvégén? Ez az objektum automatikusan frissül, ha egy Bower parancshoz --save-dev-t csatolsz, így:

$ bower install jquery --save-dev

Ha most egy kódolótárs lefuttatja a `bower install`-t, a számítógép mindent telepíteni fog a devDependencies listából a `.bowerrc`-ben megadott mappába. Hasonlóképpen, ha egy fejlesztő hozzáad egy csomagot vagy frissít egy csomagverziót a --save-dev segítségével, az egész csapat szinkronizálhatja az eszközeit a bower install segítségével (miután lehúzta a `bower.json` fájl legújabb verzióját).

Miután a `bower.json` fájl segítségével megszűnt az összes vadászás és gyűjtögetés, nincs szükség többé arra, hogy bármelyik eszközt verziózzuk. A `components/` mappát hozzáadhatjuk a `.gitignore` fájlhoz, hogy a repositóriumunk karcsú maradjon.

*.DS_Store.sass-cachenode_modules/dist/src/components/

Búcsúzás

A kedvenc webfejlesztő podcastom egyik epizódját hallgattam (kacsintás, kacsintás), és a házigazdák arról beszélgettek, hogy a Bower valóban hasznos-e, vagy csak egy múló hóbort. Azon gondolkodtak, hogy vajon az a lényege, hogy megkönnyítse a letöltést, vagy a könyvtárak verzióinak frissítésére használják, mint a ruby gems. Arról beszéltek, hogy ez egy “front-endy NPM” (parafrazálom).

A szépség az, hogy mindezeket a dolgokat csinálja. Használhatod a kód letöltésére és naprakészen tartására, de tovább is viheted. A Bower segíthet szinkronban tartani a projektkönyvtárakat és keretrendszereket, vagy integrálhatod más eszközökkel, például a Yeomannel, hogy még több időt nyírj le a fejlesztői beállításaidból. Ráadásul saját Bower csomagokat is létrehozhatsz és regisztrálhatsz, így gyorsan (és biztonságosan) telepítheted és frissítheted őket az összes projektedben.

Ó, és ami a kérdést illeti, ami miatt a vita elindult: Nem használnád a Bower-t a WordPress telepítésére, és a WordPress-nek nem kellene a `bower_components` mappában lennie. De használhatod a Bower-t a WordPress témádon belül a külső eszközök kezelésére (csak ne tölts be olyan könyvtárakat, mint a jQuery, amelyek már benne vannak a WordPress magjában).