Vite 25.01.11
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):
"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:
<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.:
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.
Aliasok készítése
import { defineConfig } from 'vite'
import { fileURLToPath } from 'url'
export default defineConfig({
resolve: {
alias:{
'@': '/src',
}
}
})
\pagebreak