Martin Michálek Martin Michálek  – 5. 10. 2015

Node.js na frontendu potřebujeme hlavně kvůli usnadnění vývojářské práce a správě vývojářských závislostí.

Nástroje, které si nainstalujeme

  • Node.js – běh Javascriptu na příkazové řádce.
  • NPM (Node Package Manager) – správce javascriptových balíčků.
  • Grunt – sestavovač nebo buildovač; nástroj pro běh vývojářských úloh.

Někdo si může oblíbit i další nástroje tohoto ekosystému, třeba Bower, správce frontend balíčků. Nebo například automatizátor Yeoman, Gulp nebo Webpack. Mohou být velmi užitečné, ale pro zjednodušení se jim tady nebudeme věnovat.

Node.js

Budeme pracovat s příkazovou řádkou, takže se hodí znát její základy:

  • Návod pro Windows: „Starting to use the Command Prompt“. vrdl.in/6w1a0
  • Návod pro Linux & Mac: „How to Use Terminal: The Basics“. vrdl.in/uo3m2

Node.js a NPM

NPM (Node Package Manager) je balíčkovací systém Node.js. Ten musíte stáhnout a nainstalovat jako první.

Jednoduchý postup instalace pro všechny platformy je popsaný na webu Node.js: nodejs.org/en/download.

Podívejme se ale i na lepší postupy.

Postup pro Windows

  1. Nainstalujte Git do příkazové řádky. V kroku „Adjusting your PATH environment“ zkontrolujte zatržení „Run Git from the Windows Command Prompt“. git-scm.com/downloads
  2. Nainstalujeme Node.js. nodejs.org/en/download

Postup pro Mac OS a Linux: NVM, nebo hraní s uživatelskými právy

  • Ideální varianta – pomocí NVM (Node Version Manager). Nainstalovat jej není úplně přímočaré, ale má to dvě výhody. Na vývojářské mašině vám může souběžně běžet více verzí Node a NPM najednou. A pak – ušetříte si opruz s administrátorskými právy z méně optimálních variant. github.com/creationix/nvm
  • Druhá možnost je buď hrát si s uživatelskými oprávněními ve výchozím NPM adresáři nebo ho umístit jinam. vrdl.in/4hlaw
  • Třetí, úplně nejhorší varianta pak je spouštění instalace balíčků v administrátorském režimu (sudo npm install …) pokaždé, když vám NPM zahlásí problém s právy (npm ERR! Attempt to unlock …). Autor NPM o tomhle postupu údajně prohlásil, že je bezpečný jako nechat se stříhat motorovou pilou. Což sedí.

Máte nainstalováno? Jestli vše funguje, zjistíte příkazem pro zobrazení verze NPM:

npm -v

Všechny ostatní nástroje se pak instalují jako Node balíčky.

Grunt, Bower a další Node balíčky

Budete používat sestavovač Grunt? V příkazové řádce potřebujete globálně nainstalovat balíček grunt-cli:

npm install -g grunt-cli

A co frontend balíčkovač Bower? To už je jednoduché. Opět jej nainstalujeme globálně:

npm install -g bower

Úplně stejným způsobem si pak můžete nainstalovat Grunt pluginy, alternativní sestavovač Gulp nebo třeba Webpack.

Grunt pluginy

npm install <nazev-pluginu> --save-dev

Všimněte si, že už neinstalujeme globálně – bez přepínače -g. Ano, Grunt pluginy nebo třeba Bower balíčky instalujeme ke konkrétnímu projektu. Zároveň je chceme uložit do konfiguračních souborů balíčkovacího systému (packages.json).

Pro inspiraci: Moje tipy na Grunt pluginy. vrdl.cz/p/grunt-pluginy

Jste na Windows? Pak pozor, některé Grunt pluginy vyžadují poněkud speciální péči. Například tyto dva:

  • PhantomJS, na kterém závisí třeba plugin pro generování kritického CSS. vrdl.in/fa8jb
  • ImageMagick, který zase potřebují pluginy pro práci s obrázky jako grunt-contrib-imagemin. vrdl.in/ti9jp

Bower balíčky

bower install <nazev-pluginu> --save

--save-dev přepínač uloží plugin do vývojářských závislostí. U začátečníků se používá hlavně v souvislosti s Gruntem a jeho pluginy. Ty instalujeme pomocí NPM.

Pokud bychom instalovali jQuery, půjde o uživatelskou závislost. Použijeme --save přepínač. Pro takové závislosti se více hodí Bower.

Tahák pro práci s balíčkovacími systémy

Bower i NPM mají naštěstí podobné příkazy:


# Vyhledávání balíčku v centrálním repozitáři:
npm/bower search jquery-ui

# Zobrazit detaily o balíčku:
npm view jquery-ui
bower info jquery-ui

# Instalace všech balíčků projektu:
npm/bower install
# Instalace balíčku a přidání do uživatelských závislostí:
npm/bower install jquery-ui --save
# Instalace balíčku a přidání do vývojářských závislostí:
npm/bower install jquery-ui --save-dev
# Instalace specifické verze balíčku:
npm/bower install [email protected]

# Aktualizace všech balíčků:
npm/bower update

# Výpis stromu závislostí:
npm/bower list
# Výpis stromu závislostí a verze konkrétního balíčku:
npm/bower list jquery-ui

# Odstranění balíčku:
npm/bower uninstall jquery-ui

# Smazání cache. Hodí se v případě reinstalace sady balíčků:
npm cache clean

# Zobrazení balíčků, které je potřeba aktualizovat:
npm outdated
bower list

# Nápověda:
npm help

Vyzkoušejte si to

Nainstalováno? Pokud nemáte nic lepšího po ruce, vezměte příklad ze školení Dnešní webová kodéřina a postupujte podle návodu. git.io/vMqaj