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:
- Közvetlenül a futó csomópont-folyamathoz, soronként, fájlok nélkül
- 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:
- A csomópont közvetlenül indult, felhasználói bevitel nélkül
- A Node az egész fájlt fentről lefelé futtatta, amíg el nem érte a végét
- 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.
