Mi az npm? - "HTML, CSS, JS már megy. És most...?" - 1. rész
Közzétéve:“HTMM, CSS, JS már megy. És most…?” - Ebben a sorozatban azt fogjuk átvenni, hogy mik következnek akkor, ha már össze tudsz rakni egy egyszerű weboldalt HTML, CSS és Vanilla JS segítségével.
Az első cikk az NPM-ról, azaz Node Package Manager-ről fog szólni.
Az NPM egy nagy kód adatbázis, amely rengeteg nyílt forráskódú kódot tárol. A honlapon te is kereshetsz számodra hasznos package-eket, és saját magad is publikálhatsz.
Az npm-et a projektjeidben CLI segítségével használhatod. Ha telepítetted már a Node.js-t, akkor szinte biztos, hogy az npm is telepítve van már a gépeden. Ennek teszteléséhez a következő parancsot használhatod:
npm -v
Ha nem kapsz errort, akkor telepítve van a CLI.
Első sorban csomagok (package-ek) telepítésére fogod használni. Ezt a következő képpen kell tenni:
1. npm init
Ez a parancs létrehozza a package.json fájlt. Ez fontos fájl, ugyanis ebben lesz számontartva, hogy milyen dependency-ket (csomagokat) telepítettél. Ha nem szeretnéd, hogy végigkérdezzen mindent, akkor csak tedd hozzá az -y
flag-et, és mindent az alap beállításokkal fog létrehozni: npm init -y
2. npm install
Ezzel a paranccsal tudsz telepíteni bizonyos csomagokat. Tegyük fel, hogy szükséged van a lodash nevű csomagra. Ezt így tudod telepíteni:
npm install lodash
Az install helyett használhatod az npm i lodash
rövidítést, ez ugyanúgy működik, csak kicsit kényelmesebb.
Ezt követően így fog kinézni a package.json fájlod:
"dependencies": {
"lodash": "^4.17.21",
},
A csomag neve mellett a verziószáma található. A ^
jel a számok előtt azt jelzi, hogy a megadott verzióra, vagy frissebbre van szükség.
Ha egy meglévő package.json összes csomagját telepíteni szeretnénk, akkor használjuk egyszerűen a következő parancsot:
npm install
2.1 Developer dependencies (fejlesztéshez szükséges csomagok)
Néhány csomag csupán a fejlesztéshez szükséges, de nem akarjuk, hogy végül eljusson a klienshez (például a böngészőbe). Mondok egy példát:
Telepíteni szeretnéd a jest csomagot, mert ezzel szeretnéd futtatni a tesztjeidet. Ez számodra fontos, viszont az weblapodon nincs rá szükség, csak a fejlesztés közben. Ilyenkor dev dependeny-ként telepíted a --save-dev
flaggel. Ennek is van rövidítése: a sima -D
flag:
npm i -D jest
Ezt követően így fog kinézni a package.json fájlod:
"devDependencies": {
"jest": "^28.1.2"
}
2.2 Globális csomagok
Egy csomagot telepíthetsz az egész gépedre is, nem csak egy-egy projektre. Például a nodemon nevű csomag abban segít, hogy újraindítja a szerverünket, ha a fájlok tartalmát módosítjuk. Ez egy olyan tulajdonság, ami szinte mindig jól jön, ezért szeretnénk globálisan telepíteni. Ezt a -g
flaggel tehetjük meg:
npm i -g nodemon
Ez után bármelyik mappában használhatjuk a nodemon
parancsot.
Összefoglalás
npm init -y
- package.json inicializálása.npm install <valami>
- csomag telepítése a projektbennpm install -g <valami>
- csomag globális telepítésenpm install -D <valami>
- csomag telepítése devDependency-ként
Ez nagyjából minden, amit kezdőként tudnod kell az npm-ről. Sok sikert! Találkozunk a második részben, amiben az SCSS-ről fogunk beszélni 😉
Források: