Blog image

NPM / Composer / ostatní manažery

publikoval Krowi

18.11.2018

Modernizace vývoje - balíčkovací manažery (obsah připravený pro potřeby vývojového týmu, ve kterém v současné době působím) 

NPM je manažerem závislostí projektu pro JS. Definuje projekt. Umožňuje vytvářet knihovny. Veřejné nebo Soukromé (zpoplatněná - pod organizací, začíná @). NPM je distribuován s Node.js - což znamená, že při stažení Node.js se automaticky instaluje npm. Vyžaduje nainstalovaný Node.js. NPM knihovny nelze mazat, pouze deaktivovat (či skrýt).

Kontrola, zda je nainstalován Node.js

node -v

Kontrola, zda je nainstalován NPM

npm -v

Inicializace (vytvoření) package.json

npm init

Nainstaluje závislosti, které budou součástí produkčního buildu 

Příkaz npm install nainstaluje také devDependencies (výchozí chování).

npm install

Instalace závislosti

Při instalaci balíčku pomocí  jej instalujete jako závislost. Balík je automaticky uveden v souboru package.json, v seznamu závislostí (dependencies ). Balíčky lze instalovat globálně přidáním přepínače "-g" - užitečné pro CLI aplikace.

npm install < balíček >

Odebrání závislosti

Při instalaci balíčku pomocí  jej instalujete jako závislost. Balík je automaticky odebrán ze souboru package.json. Balíčky lze odebírat globálně přidáním přepínače "-g".

npm uninstall < balíček >

Nainstaluje DEV závislosti, které jsou potřeba při vývoji projektu

Přidáním přepínače -D nebo --save-dev, nainstalujete závislost jako vývojovou, která jej přidává do seznamu devDependencies.

npm install -D

Nainstalovat pouze závislosti a ne devdeependencies bez ohledu na hodnotu proměnné NODE_ENV

npm install --only=prod

Publikuje obsah projektu do NPM repozitáře.

Dostupné na NPM (pouze pro public knihovny). Nevyžaduje GIT. Vyžaduje správně nastavený package.json

npm publish

SEMVER - sémantické verzování (používá Composer). Definice verzovacího standardu. Jde o normu, kterou je vhodné znát a dodržovat.

  • První číslo reprezentuje hlavní verzi (Breaking Change)
  • Druhé číslo reprezentuje nějakou novinku (features)
  • Třetí číslo bývá rychlá oprava (quick fix)

Při instalaci závislostí není od věci dávat pozor na ^. Odebrat tento znak, pokud není žádaná aktualizace závislostí při dalším volání příkazu npm install.

Clean-css balíček & NPM scripty (argumenty a proměnné)

Clean-css je rychlý a účinný optimalizátor CSS pro platformu Node.js a všechny moderní prohlížeče. Rozhraní rozhraní API a rozhraní CLI jsou odděleny. API zůstává, ale CLI je v samostatném balíčku Clean-css-cli. Clean-css-cli je rozhraní příkazového řádku pro clean-css. Instalace globálně.


Bower je další balíčkovací manažer, který se zaměřuje na webové projekty (front-end). Bower vyžaduje node, npm and git. Bower je zastaralý a již by se neměl používat pro nové projekty.

npm install -g bower

Composer je nástroj pro správu závislostí (knihoven) v PHP. Umožňuje deklarovat knihovny, na kterých váš projekt závisí a který bude využívat (připravuje se)

Příbuzné komentáře

reply avatar

Krowi Warlord

Vytvořeno 20. 11 2018 10:31:22 (Europe/Paris) v EDUCATION AND SELF-AWARENESS

Potřebuji radu/názor.

Otázka 1: Instalovat balíčky globálně? Myslím, že pokud to není vyloženě nutné (a jako že není), tak se tomu je nejlepší vyhnout, že? Případ, kdy je nutné nainstalovat balíček globálně je, když zahrnuje CLI? Pokud nainstaluji lokálně do projektu, tak to nebudu moci volat (zatím mám takovou zkušenost)?

Otázka 2: Když máš projekt a kompiluješ soubory (SCSS -> CSS && Minify CSS && Minify JS && Minify HTML), jakou znáš nebo zastáváš adresářovou hierarchii, aby to bylo efektivní?

reply avatar

Mrkev Lieutenant

Vytvořeno 22. 11 2018 22:41:36 (Europe/Paris) v EDUCATION AND SELF-AWARENESS

Otázka 1:

Balíčky instaluj lokálně. Jakmile bys aktualizoval globální závislost s 'breaking changes', budeš muset udělat úpravu u všech projektů tuto závislost využívající. To není žádoucí. Navíc, globální závislosti nejsou součástí package.json, takže jakmile bys chtěl projekt spustit někde mimo (třeba na serveru), musel bys tam tu závislost instalovat ručně přes CLI (opět s flagem -g). Instalovat globální závislosti má smysl v případě, že jde o nějakou knihovnu, která poskytuje (či pracuje výhradně s) CLI API a ty potřebuješ toto API studovat/zkoušet/používat nahodile dle potřeby. Jak píšeš, závislosti v globálním scope jsou dostupné i z CLI, na rozdíl od lokálních, které ovládáš jedině přes script v 'scripts' atributu package.json. Jakmile si vše přes CLI vyzkoušíš, má smysl nainstalovat závislost lokálně a scripty, které jsi spouštěl, přesunout do package.json. Je možné mít instalaci stejné závislosti ve stejné verzi jako v globálním tak lokálním scopu.


Otázka 2:

Záleží na tom, jestli děláš v JS nebo PHP, jestli client nebo server (či obojí, tzv. isomorfní) aplikaci. Pod složkou "src" vidím zdrojové soubory. Poté by se měl spustit kompilační proces, který zpracuje složku "src" a vytvoří tzv. build, například do jiného adresáře "build". Co se CSS souborů týče, preferuji styly pro každou komponentu zvlášť:


src/components/MyComponent/
  • - MyComponent.js (.jsx, .ts, .tsx, .php...)
  • - MyComponent.scss (.sass, .css, .styles.js...)
  • - MyComponent.md (examples, máš-li na to nástroj)
  • - utils (pomocné funkce, někdy též jako helpers; soubor či adresář)
  • - typings (typové definice typescriptu; soubor či adresář)
  • - index.js (.ts, .php...)



reply avatar

Mrkev Lieutenant

Vytvořeno 22. 11 2018 22:46:26 (Europe/Paris) v EDUCATION AND SELF-AWARENESS

Obrázky, JS soubory, CSSka, ikona, dokumenty... to vše jsou assety. Podle mě to patří pod /assets. Ovšem v případě, kdy by existovaly soubory dostupné po přihlášení, tak to je jiné a samozřejmě to nemůže být pod assets. To bych dal pod jiný adresář.