Instalace ekosystému Node.js pro použití na frontendu

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ů (např. jQuery nebo framework Bootstrap). 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:

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“ vybrat „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: docs.npmjs.com/getting-started/fixing-npm-permissions.
  • 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.

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

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 jquery-ui@1.11.x

# 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: github.com/machal/polaroid-example#instalace-projektu.

Komentáře

comments powered by Disqus

Podobné články

zařazené v kategorii Nástroje.

Ebook „Vzhůru do CSS3“ verze 1.4: nové texty o Media Queries, prohlížečích a další

9. 1. 2017 na blogu

Kapitola o Media Queries je zgruntu nová atd. 12 stránek navíc.

Co ještě nastudovat na přelomu roku?

21. 12. 2016 na blogu

Když byste se náhodou nechystali odpočívat…

Ebook „Vzhůru do CSS3“

Ebook „Vzhůru do CSS3“

Pořiďte si můj ebook „Vzhůru do CSS3“.
o nových CSS vlastnostech a moderní kodéřině.

Koupit za 249 Kč