Útmutató kezdőknek a Node.js és az NPM használatához

A Node.js és a Node Package Manager használatának megkezdése

Ma végigvezetem a Node.js és az NPM alapjain, beleértve a webfejlesztés általános magyarázatait is. Csak egy megjegyzés előre: ha ismeri az alapvető webfejlesztést és az NPM-et, akkor kihagyhatja ezt a cikket, és itt tudhat meg többet a nagyon hasznos NPX-ről.

Jólvan szuper! Kezdjük!

Node.js

Ha ezt olvassa, valószínűleg már letöltötte a Node.js + NPM-et, és azzal kezdte, hogy a Javascript vizébe bújt. Pedig az első lépések már ijesztőnek tűnhetnek: „Csak szeretnék írni egy kis programot Javascriptben, miért van szükségem a többire?”. Ez érthető, de valójában egyáltalán nem nagy baj.

Kezdjük az elején: Egyszerűen létrehozhat egy Javascript-fájlt a számítógépén bárhol, amelyet a „.js” utótag jelez. Ezt a fájlt tetszőleges módon megtöltheti kóddal, de akkor egy dolog hiányzik: valójában hogyan futtatja a programot? Itt jön képbe a Node.js.

A Node.js egy futásidejű környezet, kifejezetten a Javascript számára. Ahogy a leírás is sugallja, a Node futtathatja a Javascript-kódot egy adott környezetben, amelyet maga a Node biztosít. A folyamat mindig ugyanaz: először elindítja a Node.js-t, és amikor a Node felpörgetett (ami azt jelenti, hogy az indítás befejeződött), megadhatja neki a Javascript kódot.

A Javascript kétféleképpen adható meg a Node számára bemenetként:

  1. Közvetlenül a futó csomópont-folyamathoz, soronként, fájlok nélkül
  2. Soronkénti bevitel nélkül megadva a Node-nak, hogy melyik Javascript-fájlt kell betölteni
node

Vonalról vonalra

Miután sikeresen telepítette a Node.js fájlt (ami éppen a letöltés és a telepítő futtatása, a leírások a Node webhelyén találhatók), a Node.js fájlt bárhonnan elindíthatja, akár a terminálból (macOS/Linux), akár a PowerShellből (Windows) . A parancs így néz ki.

Igen, ez minden! Sikeresen elindította a Node-ot! Észrevetted, hogy ez milyen gyorsan történt? Az egyik ok, amiért a Node.js olyan népszerű, éppen a kirívóan gyors rendszerindítása miatt van (többek között).

Most, hogy a Node működik, soronként meghatározhatjuk a Javascript-alkalmazásunkat. Minden bemenet feldolgozásra kerül és a memóriában tárolódik. Itt egy kis példa.

(Hit enter after every line end) 
const greet = (name) => console.log("Hello, " + name);
greet("Tom"); let x = 10; x = x + 5; 

(enter the following line to terminate node)
.exit

Most már minden rendben van, de nagyobb alkalmazások írásához először fájlba kell készítenünk őket, mielőtt a Node-ba továbbítanák. Következő fejezet, kérem!

Bevitel fájlokon keresztül

Ehhez a példához szövegszerkesztőre van szükség. Alapvetően minden olyan programot használhat, amely képes szöveget kezelni (például a TextEdit-et macOS-en vagy a Szerkesztőt Windows-on). A Microsoft nyílt forráskódú VS Code-ját javaslom, de választhat, hogy az Ön ergonómiájának leginkább megfeleljen.

Ahhoz, hogy egy fájlt bemenetként adjunk meg, csak létre kell hoznunk egyet. Csak hozzon létre egy egyszerű szöveges fájlt a „js” utótaggal a nevében. A fájlunkat app.js-nek nevezzük el. Most nyissa meg a választott parancssort (az első példánkban használt). Ügyeljen arra, hogy abból a könyvtárból nyissa meg, ahová a fájlt menti, ez fontos.

Ha VS Code-ot használ, használhatja a beépített parancssort, csak kattintson a jobb gombbal az Intéző-nézetben, és hívja az „Open in Code” parancsot (Windows rendszeren), vagy húzza át a fájlt tartalmazó könyvtárat a VS Code-ikon a dokkban (macOS). Ezután megnyithatja a terminált az itt leírtak szerint.

Amikor a terminál készen áll, csak írja be a következő parancsot.

node app.js

Amint látja, néhány dolog történt:

  1. A csomópont közvetlenül indult, felhasználói bevitel nélkül
  2. A Node az egész fájlt fentről lefelé futtatta, amíg el nem érte a végét
  3. Maga a csomópont leállt, mivel a fájl vége a folyamat végét is jelentette

És a Node.js alapszintű bevezetéséhez ennyi! Miután letöltötte a Node-ot, és először megtapasztalta a parancssor használatát saját Javascript-alkalmazásának elindításához, akár soronként, akár fájlból, hivatalosan is Javascript-fejlesztő lesz! Üdv a klubban!

Most végigvezetem az NPM alapkoncepcióján. A következő fejezet után gyorsan áttekintjük a Node.js, az NPM és a webfejlesztés közötti kapcsolatot. Ha többet szeretne megtudni a Node.js-ről, itt tekintheti meg a Javascriptről, az eszközláncokról és minden, a kódolással kapcsolatos történeteinket. A cikk végén linkeltem néhány hasznos forrást is, hogy még több tanulnivalót találhasson.

Rendben, lépjünk egyet!

NPM, a csomóponti csomagkezelő

Mint láthatta, nem olyan nehéz a saját kódját kezelni. Az alkalmazás fájlban tárolható, az alkalmazott változtatások csak maradnak. De mi van akkor, ha valaki más kódját szeretné használni, mondjuk egy kriptográfiai vagy képmanipulációs könyvtárat? Valahogy ezt a kódot a sajátod mellé kell tenni, használhatóvá kell tenni az alkalmazásodhoz, és mindent kezelhetővé kell tenni.

Naiv megközelítés lenne, ha csak közvetlenül a forrásból töltené le a külső kódot, pl. Github, és másolja a könyvtárat fájlról fájlra a saját projektjébe. Ez azonban néhány problémához vezet:

  • Hogyan lehet a legjobban frissíteni ezt a külső kódot? A kézi másolás nem a legjobb megoldás.
  • Hogyan követheti nyomon az összes külső kódot?
  • Mi van, ha ez a külső kód maga olyan könyvtárakra támaszkodik, amelyek nincsenek telepítve a projektben?

Mindezeket a kihívásokat az NPM, a Node.js csomagkezelője kezeli. A csomagkezelő feladata alapvetően az, hogy robusztus megoldást adjon a külső kódok, más néven függőségek hozzáadására, nyomon követésére és eltávolítására. Íme néhány példa az NPM működésére.

npm install serve-static npm remove serve-static

Természetesen ennek a kezelőnek magának is szüksége van néhány speciális fájlra, hogy nyomon tudja követni a projekt összes függőségét. Ezért van az NPM-et használó alkalmazásokban legalább két fájl: a package.json és a package-lock.json. A következő parancs meghívásával gyorsan létrehozhat egy új NPM-csomagot.

npm init -y

Megjegyzés: amint azt a cikk első részében láthattuk, az NPM-re nincs szükség a Node.js vagy a Javascript használatához. Fókusza a függőségek kezelése – se több, se kevesebb. Az NPM-en keresztül letöltheti az npmjs.com webhelyen közzétett kódot. Mindezek a külső modulok a projektben egy speciális node_modules nevű könyvtárban vannak tárolva. Gyakorlatilag soha nem kell módosítania ezt a könyvtárat, mivel teljes mértékben az NPM kezeli.

A package.json betekintést nyújt a projektben jelenleg használt függőségekbe. A package-lock.json egy speciális fájl, amely metaadatokat tárol a package.json-fájl vagy a node_modules-könyvtár mutációiról, és egyelőre figyelmen kívül hagyható.

Azt hiszem, leírom az NPM alapkoncepcióját, hogy mit csinál, és milyen fájlokat/könyvtárakat generál automatikusan. További információk a cikk végén találhatók.

Arc to web dev

Jó, most már ismeri a Node.js és az NPM alapjait. De miért is kell mindezt megtanulni, ha csak saját, modern weboldalt akarsz létrehozni?

Ahogy az imént láttuk, az NPM lehetővé teszi számunkra, hogy kódot töltsünk le a könyvtárak hatalmas gyűjteményéből (pontosabban a létező legnagyobb). A webfejlesztéshez szüksége lesz egy szerverre, amely képes tárolni (vagyis biztosítani) a webalkalmazást. Rengeteg olyan szolgáltatás áll rendelkezésre, ahol feltöltheti webhely-projektjét, és egy meglévő infrastruktúrát (beleértve a szervereket is) felhasználva elérhetővé teheti a webhelyet az interneten.

A helyi fejlesztéshez pedig szükség van egy szerverre is, amely betölti a helyi fájlokat, és csak az Ön számára elérhetővé teszi őket az eszközén a fejlesztés során. A Node.js-nek köszönhetően ezt megteheti: helyileg elérhetővé teszi webhelyét egy úgynevezett localhost segítségével. A Node.js rendelkezik a helyi szerver indításához szükséges beépített eszközökkel, de az NPM-en keresztül az alkalmazás harcban tesztelt összetevőkkel gazdagítható, amelyek segítségével nagyon nagy szolgáltatásokat hozhat létre rövid időn belül.

Természetesen ez csak a kezdet: az NPM rengeteg kódot tartalmaz modern webalkalmazások (PWA, „progresszív webalkalmazások”), valamint összetett szerverek létrehozásához. De első bevezetőnek úgy gondolom, hogy ennek a magyarázatnak megfelelőnek kell lennie.

Remélem, tudtam segíteni a Node.js és az NPM kezelésében. Mindig az első lépések a legnehezebbek, de a fejlesztés és a (sok) tanulás első napjainak átvészelése jutalma lesz a modern webalkalmazások fejlesztésébe terjesztett képességeinek, lehetővé téve, hogy bármit megépíthessen, amit csak akar.