Frontend jegyzetSearch...
Vite
Mire jó a Vite
A vite (ejtsd: /vit/) csomag olyan eszközöket csomagol össze számunkra, amellyel egyszerűen és gyorsan tudunk:
- Helyi fejlesztői szervert üzemeltetni
- Elkészíteni a végleges helyére kerülő appot
- Kezelni a statikus forrásainkat (Pl: képek, stílusok)
- Környezeti fájlból adatot olvasni
Hogyan használjuk
Telepítés után a legtöbbször a következő script-eket célszerű megadni (ha a csomag készítésekor már nem adottak):
json
"scripts": {
"dev": "vite --host",
"build": "vite build",
"preview": "vite preview"
}
| Script | Mit csinál |
|---|---|
dev | Fejlesztői szervert futtatja, folyamatosan frissül ha változást észlel. |
build | Tárhelyre való feltöltésre alkalmas csomagot pakolja össze. |
preview | Megnézhetjük vele, hogy az összepakolt csomagunk helyesen működik-e. |
Ezek után a fejlesztői szervert elindítva a vite meg fogja keresni a gyökérben az index.html fájlunkat. Innentől kezdve a HTML fájl felelőssége, hogy amegfelelő scriptet/scripteket futtassa. Legtöbbször ez a következőképpen fog kinézni:
HTML
<script src="./main.mjs" type="module" defer></script>
Amire szükségünk lesz, az egy public nevű könyvtár, ugyanis a statikus elemeket (pl: képek) ide fogjuk elhelyezni
Laravel
Nem csak frontend oldalon, de backend oldalon is sokat tud nekünk segíteni a csomag, ugyanis képes a Blade-del is együttműködni. Ez azért lesz számunkra előnyös, mert a különböző források importálását teszi nagyon egyszerűvé számunkra.
A gyökérben találhat vite.config.js segítségével megadhatjuk, hogy milyen állományokat szeretnénk felhasználni a Blade-ben.
Pl.:
JavaScript
laravel({
input: ['resources/css/app.scss', 'resources/js/app.js'],
refresh: true,
}),
Ebben az esetben van egy alap stílusunk és ES fájlunk amit be tudunk importálni egyszerűen, és a vite fogja felügyelni, hogy minidg helyes legyen a kapcsolat.
WARNING
A vite használatához, mindig futtatnunk kell NPM-el is, erre külön figyelmeztetni fog a Laravel is.
Blade importálás
Két lehetőségünk van az importálásra Blade-ben.
Az egyik az egy adott fájl importálása:
HTML
<head>
@vite("resources/js/app.js")
</head>
A másik lehetőségünk, hogy importálunk minden fájlt:
HTML
<head>
@vite
</head>
Ellenőrző kérdések
- Miket tud kezelni a vite?
- Mi a különbség a
devés apreviewközött? - Mire való a public könyvtár?
- Mire jó nekünk backenden a vite?
- Hogyan lehet Blade-ben felhasználni?
\pagebreak