Webfejlesztés NPM-mel és Parcel.js-sel
Webfejlesztés NPM-mel és Parcel.js-sel
Az NPM a Node.js csomagkezelője amit Node csomagok mellett weblapunk JavaScript függőségeinek kezelésére is használhatunk, így nem kell többé script tag-eket karbantartani (és még egy rakás más előnnyel is jár, amikről később fogok írni). Ehhez viszont szükség van egy bundlerre, ami az NPM által behúzott csomagokat egyetlen optimalizált JS fájlba pakolja össze. A Parcel.js egy ilyen bundler és egyben egy olyan eszköz ami sok szempontból nagyon meg tudja könnyíteni weboldalak fejlesztését.
A Parcel.js nagyon röviden úgy definiálja magát, hogy “Blazing fast, zero configuration web application bundler”, ami nagyjából magában is foglalja az eszköz legnagyobb előnyét, hogy nagyon könnyű használni, hiszen nem kell semmit konfigurálnunk. Nézzünk is gyorsan egy példát!
Hozzunk létre egy üres könyvtárat, majd a könyvtárban futtassuk le az
npm init -y
parancsot, ami létrehoz egy üres packages.json fájlt. Ha ezzel megvagyunk, telepítsük a parcel bundlert az
npm install parcel-bundler --save-dev
paranccsal, majd adjuk hozzá a packages.json scripts részéhez a következő két sort:
"build": "parcel build index.html",
"start": "parcel index.html"
Utolsó lépésként hozzunk létre egy minimális weboldalt index.html néven:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Parcel sample</title>
</head>
<body>
<script src="index.js"></script>
</body>
</html>
és egy index.js állományt:
console.log("Hello parcel!");A parcel bundlert az
npm start
paranccsal indíthatjuk. Ilyenkor a rendszer a belépési pontként megadott index.html-t elemezve elkezdi feltérképezni a környezetet, megtalálja az index.js-t amit becsomagol, majd elindít egy szervert a http://localhost:1234 címen. Ha mindent jól csináltunk, a fenti URL-t megnyitva a böngészőben a konzolon láthatjuk a “Hello parcel!” szöveget.
Persze ez eddig nem túl nagy teljesítmény. Adjuk hozzá a következő 3 sort az index.js állomány elejéhez:
import ‘bootstrap’
import ‘bootstrap/dist/css/bootstrap.css’
import ‘@fortawesome/fontawesome-free/css/all.css’
A fájl mentését követően a parcel észreveszi a változásokat és elkezd dolgozni. Az import direktívák hatására leszedegeti a szükséges csomagokat, amiről meg is győződhetünk ha belenézünk a pacakges.json fájlba. A másik amit észrevehetünk, hogy ha a böngészőben megnézzük az index.html forrását, bekerült egy stylesheet hivatkozás a headerbe. A parcel észrevette, hogy két css-t importáltunk és ebből összegyúrt egyetlen css-t, ami magában foglalja a bootstrap.css-t, a fontawsome.css-t. Ezzel a 3 egyszerű sorral tehát behúztuk a bootstrap és a fontawsome legújabb változatát úgy, hogy nem kellett bajlódnunk sem a letöltéssel, sem a script és link tag-ek karbantartásával. Mind a html mind a js kódunk szép tiszta maradt. Itt már jól látszik a “zero configuration” előnye amit a bevezetőben említettem. Ha berakunk egy egyszerű navbar-t a body rész elejére, akkor láthatjuk is, hogy a rendszer tényleg behúzta a bootstrap-et:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
A parcel “zero configuration” rendszere tehát úgy működik, hogy a belépési pontként megadott index.html-ből kiindulva feltérképezi a projektet, majd futás közben figyeli azt. Ha bármi változik, a böngészőben rögtön látjuk a változást és amit lehet próbál automatikusan kezelni a rendszer. Ha új importok kerülnek a JS fájlba, akkor behúzza a szükséges csomagokat, valamint a kiterjesztés alapján elvégzi a szükséges teendőket. A css fájlokat például egyetlen nagy css fájlba csomagolja, de ezen kívül még ismer egy csomó kiterjesztést (pl.: jsx, ts, scss, stb. — a teljes lista itt található), amiket automatikusan tud fordítani (pl. TypeScript-ből JS-t) és csomagolni. A következőkben erre mutatnék egy példát.
A sok ismert fájlformátum közt szerepel a Vue is, ami Vue.js modult jelöl (a Vue.js-ről itt írtam bővebben). Lássuk hogy tudunk hozzáadni egy Vue.js komponenst a már meglévő egyszerű weboldalunkhoz. Ehhez hozzunk létre egy App.vue állományt a következő tartalommal:
Adjunk hozzá egy üres div-et az index.html állományunkhoz:
<div id="app"></div>
Valamint pár sort az index.js-hez, ami a fenti komponenst a div-re köti:
import Vue from 'vue';
import App from './App.vue';
new Vue({ render: createElement => createElement(App) }).$mount('#app');Ha minden jól ment, akkor pár másodperc várakozás után megjelenik a TODO komponens a weboldalunkon. Mi csupán egyetlen fájlt és pár sort adtunk a meglévő projekthez, de a háttérben egy csomó minden történt. A parcel behúzta a szükséges javascript könyvtárakat (amit a packages.json-ben láthatunk is), lefordította a Vue fájlt amiben a script betét ráadásul TypeScript, így a TypeScript fordítót is meghívta, majd elkészítette a csomagolt js és css fájlokat és frissítette az oldalt.
Ha végeztünk a fejlesztéssel, az
npm run build
paranccsal legenerálhatjuk az oldalunkat a dist könyvtárba, amit aztán bármilyen webszerver alá kipakolhatunk.
Röviden ennyit szerettem volna írni az npm-mel és parcel.js-sel történő fejlesztésről. Remélem sikerült megmutatni, hogy mennyire megkönnyítheti a dolgunkat ez a két egyszerű eszköz és talán kis kedvet csinálni a használatukhoz. A parcel.js weboldalán részletes dokumentációt találhat az, akit jobban érdekel ez a kis eszköz, ami amellett hogy önmagában is rengeteg mindent tud, könnyen bővíthető is saját pluginekkel és csomagolókkal.