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.
Sestavovače a spouštěče
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. - Devstack postavený na Gulpu [Actum, EN]
Jeden z devstacků (nastavení vývojářského workflow), který je dobře zdokumentovaný a je možné jej využít pro inspiraci. - 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 [Ackee.cz]
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č.
Další
- 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ě.