Mi az npm? - "HTML, CSS, JS már megy. És most...?" - 1. rész

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 projektben
    • npm install -g <valami> - csomag globális telepítése
    • npm 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:


Komment szekció