NPM Csomagok #

Innentől kezdve a hagyományos weblapoktól eltérően fogjuk kezeleni az alkalmazásainkat, ugyanis innentől kezdve egységes szerkezetben fogjuk őket fejleszteni.

Ez az egységes szerkezet lesz számunkra egy csomag. Ami azért lesz jó nekünk, mert könnyebben karbantarthatő és bővíthető lesz mint a hagyományos megoldás.

Hogyan néz ki egy ilyen csomag #

Tualjdonképpen két megkötése vagy ezeknek a csomagoknak, ami nélkül nem tudnak működni. Ezeken kívül minden mást szabadon határozhatunk meg, ha a használt keretrendszer azt nem szabja meg külön.

package.json és package-lock.json #

Ez a két fájl írja le nekünk, hogy milyen adatai és függőségei vannak a csomagunknak, valamint milyen lehetőségeink vannak a futtatásra.

{
  "name": "d-frontend",
  "description": "Jegyzet a tananyaghoz",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "test": "vitest"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/NJIT-frontend-2021/d-frontend.git"
  },
  "dependencies": {
    "vite": "^4.0.0."
  }
  "keywords": [],
  "author": "Ignácz Dominik Bence",
  "bugs": {
    "url": "https://github.com/NJIT-frontend-2021/d-frontend/issues"
  },
  "homepage": "https://frontend-idb.web.app"
}

node_modules könyvtár #

Ez a könyvtár minden alkalommal létrejön, amikor a csomagunk függőségeit telepítjük, ugyanis ebbe a könyvtárba kerülnek letöltésre. Így verziókezelésnél, vagy egyéb mozgatásnál gondoskodjunk róla, hogy ezt a könyvtárat töröljük vagy ignoráljuk.

Csomagok kezelése #

A csomagok kezeléséhez a Node.js-el érkező NPM (azaz Node Package Manager) programoz fogjuk használni.

Létrehozás #

Terminál (Bash, PowerShell, stb.) navigáljunk el abba a könyvtárba ahova létre szeretnénk hozni a csomagunkat és adjuk ki a következő parancsot.

npm init

Ekkor az NPM meg fogja kérdezni tőlünk a csomagunk alap adatait és létrehozza a könyvtárat a megfelelő fájlokkal.

Függőségek telepítése #

Abban az esetben, ha egy konkrét csomagot szeretnénk telepíteni azt úgy tudjuk megtenni, hogy a csomag könyvtárába navigálva a következő parancsot adjuk ki:

npm install bootstrap

A fenti példa a Bootstrap nevű csomagot adja hozzá a package.json fájlunkhoz és letölti a szükséges fájlokat.

A parancs rövidíthető is a következő módon:

npm i bootstrap

Ha már fel vannak véve a megadott csomagjaink de csak a mode_modules könyvtár hiányzik, akkor elegendő a következő parancs futtatása:

npm i

Előfordulhat, hogy olyan csomagokat kell telepítsünk, amire csak addig van szükség, amíg fejlesztjük azt, tehát a felhasználónak nincs szüksége rá, ahhoz hogy működjön normálisan a webalkalmazás. Ilyen csomagok lehetnek például a teszteléshez szükséges csomagok.

npm i -D vitest

A -D kapcsoló jelzi az NPM számára, hogy csak fejlesztői csomagról van szó.

Scriptek #

A package.json-be tesztőleges scripteket tudunk felvenni amiket tudunk az NPM segítségével futtatni

"scripts": {
    "dev": "vite",
    "test": "vitest"
  },

A scriptek tetszőleges nevűek lehetnek és tetszőleges érvényes utasítást végrehajthatnak vagy programot futtathatnak a következőképp:

npm run dev

Így az NPM a "dev" nevű scriptet fogja futtatni.

Jelen példában szeretné a vite progaramot futtatni a gépen az NPM, azonban nagy valószínűséggel ilyen telepített programunk nem lesz. Megpróbálhatjuk a Terminálban futtatni, de csak egy hiba üzenetet fogunk kapni, hogy nem található.

Amit tudunk a csoagunkról, hogy van egy vite nevű függősége, amit telepítettünk is. A feladatunk pedig, hogy ezt futtassuk. Miután a gépen nincs ilyen futtatható program, itt az ideje, hogy megvizsgáljuk kicsit jobban a node_modules könyvtárat, ugyanis a megoldás ott lesz. A könyvtáron belül található egy .bin könyvtár és ez fogja tarlamazni a szükséges futtatható állományokat. Terminál segítségével pedig az NPM-en keresztül tuduk elrni őket a következőképp:

npx vite

Modulok #

A Node alapvetően egy új módszert vezet be a fájlok kezelésére, annak érdekében, hogy a különböző külső csomagokat fel tudjuk használni. Ez azt fogja számunkra jelenteni, hogy a minden fájlunk szolgáltatni fog változókat, függvényeket, osztályunkat és igénybe vehet más fájl által szolgáltatott erőforrásokat is.

Ehhez a művelethez az alábbi két módszer áll a rendelkezésünkre.

ES6 Modules (rövidítve ESM) #

Mint a neve is mutatja, ez a módszer a modern ECMAScript-el együtt érkezett meg a Node-ba. Ahhoz, hogy jelezük, hogy ESM-ről van szó a fájlt érdemes .mjs kiterjesztéssel elmentenünk. Ha pedig HTML-ben adjuk meg a <script> tag segítségével, akkor a type="module" attribútumot kell hozzáírjuk.

Importálás #

Amennyiben olyan fájlból szeretnénk importálni bármit amely nem küön nem jelzi, hogy bármit is szolgáltatna azt a következő módon tudjuk megtenni:

import "bootstrap";

Ilyen módon azonban nem csak ES kódot importálhatunk, de például képeket vagy stíluslapokat is. Pl:

import "bootstrap/dist/css/bootstrap.min.css"

Ha nincs elnevezett változó, függvény, osztály azaz anonim módon szolgáltat a fájl, akkor a mi felelősségünk elnevezni a importálni kívánt dolgot:

import MyObject from "./my-object.mjs";

Amennyiben több névvel rendelkező dolgot is kapunk az adott fájltól, akkor azt így tudjuk megtenni:

import { szolgaltatottFuggveny } from "./my-functions.mjs"

Exportálás #

Két lehetőségünk van arra, hogy exportáljunk a fájlunkból.

Anonim módon történő exportálás:

export default {
    key: "value"
}

Konkrét elnevezett dolgok:

function szolgaltatottFuggveny(){
    //code
}

export { szolgaltatottFuggveny }

CommonJS (RÉGI) #

Ez a módszert már egyáltalán nem használjuk új alkalmazások fejlesztéséhez. Ez még az ES6 előtt volt a Node saját megoldása.

Importálás #

Az ESM-től eltérően, ő csak anonim dolgokat tud importálni a következőképp:

const object = require("my-object.js")

Exportálás #

Miután csak anonim importlálás lehetséges így az exportálásnál se lesz ez másképp számunkra:

module.exports = {
    key: "value"
}

\pagebreak