NPM a Node.js: Rozcestník odkazů

Martin Michálek – 21. 11. 2018

Node.js, serverový javascript, přinesl díky nástrojům pro příkazovou řádku možnost efektivně pracovat i nám frontendistům a frontendistkám.

Tenhle rozcestník se tedy soustředí na nástroje pro automatizaci. Tam, kde to jde, dávám přednost češtině. Samozřejmě, že vždycky to nejde.

Proč to vlastně všechno potřebujete?

Protože si velmi usnadníte práci. Výstupem je totiž automatizace procesů vývojáře, např. minifikace JS souborů nebo převod z preprocesoru do čistého CSS.
Protože vše sdílíte v týmu: Konfiguraci závislostí projektu, nastavení sestavovačů nebo spouštěčů…

Node.js a balíčkovače

Základní stavební kameny: Node.js a nástroje pro správu frontendových balíčků (NPM, Yarn).

Úvod do příkazové řádky [Zdroj: Nauč se Python]
Terminál je věc, kterou je potřeba umět alespoň trochu ovládat.
Úvod do Node.js [ITNetwork.cz]
Co to vlastně Node je? Javascript běžící na příkazové řadce.
Instalace Node.js a NPM
Jak to provést na Windows, Macu a Linuxu. Hraní s uživatelskými právy a NVM. Tahák pro práci s balíčkovacím systémem.
NPM: Základy a příkazy
Instalace, aktualizace, struktura adresářů a základní příkazy pro NPM.
Soubor package.json
Manifest závislostí projektu. Co je obsahem souboru a jak definovat závislosti?
Soubor package-lock.json
„Lockfile“. Soubor, který uchovává přesné informace o instalovaných balíčcích. Neupravuje se, ale je dobré jej znát.
SemVer: Co je sémantické verzování
Potřebujete znát také principy sémantického verzování. Jaké informace jsou uložené v číslech verze 1.2.3?
Yarn [Flavio Copes, EN]
Co je Yarn, konkurence NPM? A základy – jak Yarn nainstalovat, spravovat balíčky a tak dále.
Yarn vs. NPM [Rising Stack, EN]
Yarn ve své době představil řadu inovací, ale jsou pro přechod silné důvody i v roce 2018? Podle autora už moc ne.
Bower
Už mrtvý nástroj, který sloužil pro správu frontendových (nikoliv jen javascriptových) balíčků. Je dnes prakticky plně nahrazený nástroji NPM nebo Yarn.

Spouštěče úloh na příkazové řádce jako Grunt a Gulp nebo sestavovače jako je Webpack.

Grunt
První spouštěč úloh („task runner“) na příkazové řádce, který je do dnes pro jednodušší použití naprosto v pohodě k užití.
Užitečné pluginy pro Grunt
Co všechno je možné pomocí Gruntu dělat: Spojovat CSS, JS souboury, zmenšovat obrázky, prostě usnadnit vývoj.
Gulp.js [Sitepoint.com, EN]
Gulp je spouštěč úloh na příkazové řádce podobný Gruntu, který se hodí na komplexnější projekty. V článku je pěkný úvod krok za krokem včetně popisu konfigurace.
Devstacky Inspirační katalog frontendových základen.
NPM skripty [CSSTricks.com, EN]
Také přímo v NPM si můžete napsat skripty, které usnadňují práci s nástroji příkazové řádky.
Webpack
Webpack je sestavovač, „bundler“: Nástroj pro práci s JS, CSS nebo obrázkovými zdroji a vytváření balíčků pro prohlížeč.
Parcel
Jednodušší balíčkovač, bez nutnosti konfigurace. Rychlejší než Webpack.

Podcast: S Riki Fridrichem o NPM, Yarnu a dalších nástrojích JS světa
Rozhovor o nových nástrojích ekosystému kolem Node.js a javascriptu.
Video: NPM pre lenivých kóderov [Riki Fridrich]
Jak efektivně pracovat s NPM.
Stavění dev stacku pro React [Vojtěch Mikšů]
Starší texty, které ale mohou leckoho nakopnout správným směrem. Používá se zde NPM, Babel nebo Webpack.
Seriál o Node.js [Zdroják]
Opět je to starší a zabývá se to backendovým Node, ale první díly budou užitečné i pro frontendisty.

Zapomněl jsem na něco? Neváhejte mi napsat do komentářů nebo na sociální sítě.