NávodZačínáme s Bowerem

V současné době je k dispozici více knihoven a frameworků pro vývoj front-endu než kdykoli předtím. Není neobvyklé, že se na jednom projektu podílí pět nebo více těchto knihoven. Udržet si přehled o všech těchto knihovnách a zajistit jejich aktuálnost však může být složité. Vstupte do Bower, správce balíčků, který usnadňuje správu všech závislostí vaší aplikace pro front-end.

V tomto příspěvku na blogu se dozvíte, jak začít používat Bower. Začnete instalací nástroje příkazového řádku Bower a poté se seznámíte s různými příkazy, které jsou k dispozici pro správu balíčků.

Začněme!

Instalace nástroje Bower

Bower lze nainstalovat pomocí npm, správce balíčků Node. Pokud ještě nemáte npm nainstalovaný, přejděte na webové stránky Node.js a stáhněte si příslušnou kopii Node.js pro svůj systém. Program npm je součástí instalace Node.js.

Jakmile máte npm nainstalovaný, otevřete Terminál (nebo Příkazový řádek) a zadejte následující příkaz:

npm install -g bower

Tím se Bower globálně nainstaluje do vašeho systému.

Teď, když máte nainstalovaný Bower, se můžeme začít zabývat příkazy, které se používají ke správě balíčků.

Nalezení balíčků

Existují dva různé způsoby, jak můžete najít balíčky Bower. Buď pomocí adresáře komponent online, nebo pomocí nástroje příkazového řádku.

Pro vyhledávání balíčků na příkazovém řádku použijete příkaz search. Za ním by měl následovat váš vyhledávací dotaz.

bower search <query>

Příklad pro vyhledání balíčků, které obsahují slovo „jquery“, můžete provést následující:

bower search jquery

Tento příkaz vrátí celou řadu výsledků, z nichž některé jsou zobrazeny v úryvku níže.

Každý výsledek zobrazí název balíčku a koncový bod Git. K instalaci balíčku budete potřebovat buď název, nebo koncový bod Git.

Instalace balíčků

Pro přidání nového balíčku Bower do projektu použijete příkaz install. Tomu je třeba předat název balíčku, který chcete nainstalovat.

bower install <package>

Kromě názvu balíčku můžete balíček nainstalovat také zadáním jedné z následujících možností:

• Koncový bod Git, například git://github.com/components/jquery.git
• Cesta k místnímu úložišti Git.
• Zkrácený koncový bod, například components/jquery. Bower bude předpokládat, že se používá GitHub, v takovém případě je koncovým bodem část za github.com v adrese URL úložiště.
• Adresa URL na soubor zip nebo tar. Obsah souborů bude automaticky extrahován.

Konkrétní verzi balíčku můžete nainstalovat přidáním znaku libry (#) za název balíčku, za kterým následuje číslo verze.

bower install <package>#<version>

Instalované balíčky budou umístěny do adresáře bower_components. Ten se vytvoří ve složce, ve které byl spuštěn program bower. Toto určení můžete změnit pomocí konfiguračních možností v souboru .bowerrc.

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

Po instalaci můžete balíček použít jednoduchým přidáním značky <script> nebo <link> do značky HTML. Ačkoli balíčky Bower nejčastěji obsahují soubory JavaScriptu, mohou obsahovat také CSS nebo dokonce obrázky.

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

Instalace balíčků pomocí souboru bower.json

Používáte-li v rámci projektu více balíčků, je často dobré tyto balíčky uvést v souboru bower.json. To vám umožní instalovat a aktualizovat více balíčků jediným příkazem.

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

Výše uvedený jednoduchý příklad ukazuje soubor bower.json, který definuje některé informace o projektech a také seznam závislostí. Soubor bower.json se ve skutečnosti používá k definování balíčku Bower, takže ve skutečnosti vytváříte vlastní balíček, který obsahuje všechny závislosti pro vaši aplikaci.

Vlastnosti použité v tomto příkladu jsou vysvětleny níže.

• name – Název vaší aplikace/balíčku.
• version – Číslo verze vaší aplikace/balíčku.
• dependencies – Balíčky, které vaše aplikace vyžaduje. Pro každý z těchto balíčků byste měli zadat číslo verze, jak je uvedeno v příkladu výše. Zadání latest způsobí, že Bower nainstaluje nejnovější verzi balíčku.
• private – Nastavení této vlastnosti na true znamená, že chcete, aby balíček zůstal soukromý, a nechcete jej v budoucnu přidávat do registru.

Jakmile máte soubor bower.json nastaven, můžete jednoduše spustit příkaz bower install a nainstalovat všechny zadané balíčky.

Bower obsahuje praktický nástroj, který vám pomůže vytvořit soubor bower.json pro váš projekt. Spuštěním příkazu bower init v kořenovém adresáři projektu spustíte interaktivní program, který soubor vytvoří za vás. Některé balíčky však budete muset do souboru přidat sami.

Poznámka: Úplný seznam vlastností, které lze do souboru bower.json přidat, najdete ve specifikaci.

Zápis nainstalovaných balíčků

Příkazem list snadno zjistíte, které balíčky jsou nainstalovány.

bower list

Následující úryvek ukazuje výstup pro jednoduchý projekt, který používá jQuery, Modernizr a Sass. Všimněte si, že Bower také provádí kontrolu, zda je k dispozici novější verze každého z balíčků.

Aktualizace balíčků

Aktualizace balíčku je poměrně jednoduchá. Pokud jste použili soubor bower.json, můžete provést jednoduchý příkaz update a aktualizovat všechny balíčky najednou. Aktualizační nástroj se však bude řídit omezeními verzí, která jste zadali v souboru bower.json.

bower update

Pro aktualizaci jednotlivého balíčku opět použijete příkaz update, tentokrát s uvedením názvu balíčku, který chcete aktualizovat.

bower update <package>

Odstranění balíčků

Pro odstranění balíčku můžete použít příkaz uninstall, za kterým následuje název balíčku, který chcete odstranit.

bower uninstall <package>

Je možné odstranit více balíčků najednou vypsáním jejich názvů.

bower uninstall jquery modernizr sass-bootstrap

Závěrečné myšlenky

Správci balíčků způsobili revoluci ve sdílení kódu. Usnadnily používání knihoven kódu jako nikdy předtím a zbavily nás mnoha bolestí hlavy při řešení aktualizací.

Dlouhou dobu se front-end vývojáři dívali na projekty jako RubyGems se závistí; přáli si, abychom i my jednoho dne měli k dispozici jednoduchý způsob správy závislostí projektů. Bower nám tento nástroj poskytl. Jak se stále více skvělých knihoven stává běžnou součástí našich webových aplikací, složitost našich projektů se nevyhnutelně zvyšuje. Bower nám poskytuje způsob, jak tuto složitost zvládnout.

Užitečné odkazy

• Bower
• Úložiště Bower GitHub
• Katalog komponent Bower

• bower
• kód
• javascript
• webové aplikace

.