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.

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.

PostCSS jako jednoduchá náhrada preprocesoru

16. 2. 2017 v příručce

Jak PostCSS využít jako jednoduchý a rychlý preprocesor, který vám na spoustu projektů výborně poslouží. A proč ne CSSnext?

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.

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č