Kezdő lépések a Vite: Az Ultimate Build eszközzel

Ahogy a webalkalmazások funkciógazdagabbá válnak, a gyors és hatékony építőeszközök iránti igény folyamatosan nő.

A Vite egy modern összeállítási eszköz, amely villámgyors fejlesztőkiszolgálót és optimalizált összeállítási folyamatot biztosít, lehetővé téve a felhasználók számára a munkafolyamatok egyszerűsítését és a végfelhasználói élmény javítását.

Meg fogja vizsgálni, hogyan kezdje el a Vite-ot, lefedve a telepítési folyamatot, az alapvető funkciókat és a Command Line Interface (CLI) parancsokat.

Vite projekt inicializálása

Mielőtt használhatná Vite, telepítenie kell Node.js és Node Package Manager a rendszerén. A két csomag telepítése után folytathatja a projekt létrehozását a Vite segítségével.

Így inicializálhat egy projektet a Vite segítségével az npm használatával:

npm init vite

A parancs futtatásakor egy új Vite projektet hoz létre az aktuális munkakönyvtárban. A parancs alapvető konfigurációs döntések megtételére kéri az új Vite projekt beállításához.

Íme azoknak az opcióknak a lebontása, amelyek kiválasztását a parancs kéri:

1. A projekt neve. A parancs futtatásakor felkéri, hogy adjon nevet az új projektnek. Az Ön által megadott név szintén megjelenik a package.json fájlt, és a projektkönyvtár neveként szolgál.
2. Válasszon keretrendszert. Ez a prompt arra kéri, hogy válasszon keretet a projektjéhez. A Vite jelenleg támogatja az olyan népszerű front-end keretrendszereket, mint a React, a Vue, az Angular és a Vanilla opció az egyszerű JavaScript-kódhoz.
3. Válasszon egy Változatot. Ez arra kéri, hogy válasszon egy változatot a projekthez, amely olyan alternatívákat foglal magában, mint például a JavaScript és a részhalmaznyelve, a TypeScript.

Miután megadta a szükséges információkat, a Vite új projektstruktúrát generál az aktuális munkakönyvtárban. A struktúra egy alapvető projektbeállítást képvisel, beleértve a package.json fájl, a src könyvtárat egy index.html és main.js fájl, és a nyilvános Könyvtár.

A projektstruktúra létrehozása után futással navigálhat a projektkönyvtárba CD . Miután ezt megtette, telepítse a projektje által igényelt további függőségeket a npm telepítés parancs.

A fejlesztői kiszolgáló elindításához és a projektben végrehajtott változtatások figyeléséhez futtassa a npm futás dev parancsot a projektterminálon belül.

A Vite jellemzői

A Vite szolgáltatásai az építési folyamat egyszerűsítésére és a webkészítési élmény fokozására összpontosítanak.

Rapid Development Server

A Vite fejlesztői szervere natív ES modulokat és lusta modulbetöltést használ, ami hihetetlen sebességet tesz lehetővé. Ez gyors visszacsatolási hurkokat és villámgyors indítási időt tesz lehetővé.

Optimalizált építési folyamat

A Vite továbbfejlesztette összeállítási eljárását, hogy gyártásra kész, optimalizált és minimalizált kódot állítson elő. Ezenkívül létrehoz egy jegyzékfájlt, amely gyorsítótárazza a mellszobor- és verzióelemeket.

Különféle front-end keretrendszerek támogatása

A Vite különféle front-end keretrendszereket támogat, beleértve a Vue-t és hasonló keretrendszerek, mint a React Js és az Angular Js. Ez lehetővé teszi a fejlesztők számára, hogy kiválasszák a kívánt keretrendszert, és kihasználják a Vite erőteljes képességeit.

Forró modulcsere (HMR)

A Vite Hot Module Replacement (HMR) funkciója lehetővé teszi az alkalmazás gyors és zökkenőmentes frissítését anélkül, hogy teljes oldalfrissítésre lenne szükség. Ez gyorsabbá és hatékonyabbá teszi a fejlesztési folyamatot.

CSS előfeldolgozás és postCSS integráció

A Vite támogatja a CSS előfeldolgozást, beleértve a Sass-t, a Lesst és a Stylus-t. A PostCSS-szel is integrálható, lehetővé téve a CSS további átalakításait és optimalizálását.

A Vite számos más funkcióval is rendelkezik, beleértve a TypeScript, a JSX és a WebAssembly támogatását. A Vite v4.0.4 kiadásával, A Vite fejlesztői közössége nőtt, és aktívan karbantartja a szoftvert, rendszeres új funkciókkal bővítve.

A Vite parancssori felülete (CLI)

A Vite Command Line Interface (CLI) egy praktikus eszköz a Vite viselkedésének testreszabásához. Számos alapvető parancsot biztosít, amelyek szintén segítik a fejlesztési folyamat egyszerűsítését. Íme néhány kulcsfontosságú CLI-parancs:

vite épít

Ez a parancs létrehozza az alkalmazást éles környezethez, optimalizálja és minimalizálja a kódot, hogy készen álljon a telepítésre. Ezzel a paranccsal biztosíthatja, hogy az alkalmazás a lehető leggyorsabb és leghatékonyabb legyen, és készen álljon a felhasználók számára történő terjesztésre.

vite előnézet

Ezzel a paranccsal megtekintheti a generált kód előnézetét, mielőtt üzembe helyezné azt. Ha azt szeretné, hogy minden az elvárásoknak megfelelően nézzen ki és működjön, és nincsenek látható problémák vagy problémák, amelyek figyelmet igényelnének, ez egy hasznos parancs a futtatáshoz.

vite optimalizálni

vite optimalizálni elérhető a Vite 2.6-os és újabb verzióiban, amelyek elemzik a projekt kódját, és optimalizált termelési buildeket generálnak fa végrehajtásával rázás, kódfelosztás műveletek és kis eszközök beágyazása közvetlenül a végső buildbe, hogy csökkentse a betöltéséhez szükséges kéréseket. kb.

vite optimalizálni alatt automatikusan végrehajtódik vite épít parancsot, amely optimalizált éles buildeket állít elő. A felépítés méretének és teljesítményének ellenőrzéséhez külön is futtathatja

Vite konfigurációs fájlja

A Vite programban a konfigurációs fájl különféle beállításokat határoz meg az építési folyamathoz. A Vite konfigurációs fájl JavaScriptet és az ES6 modulok szintaxisát használja.

Alapértelmezés szerint el kell neveznie a konfigurációs fájlt vite.config.js és helyezze el a projekt gyökérkönyvtárába.

Íme néhány a Vite konfigurációs fájl leggyakrabban használt beállításai:

• gyökér. Megadja a projekt gyökérkönyvtárát.
• szerver. Beállítja a fejlesztői szervert. Lehetőségeket tartalmaz a gazdagép, a port és a proxykérések konfigurálására egy API-háttérrendszerhez.
• bővítmények. Lehetővé teszi bővítmények hozzáadását a Vite build folyamatához. A beépülő modul egy olyan funkció, amely valamilyen módon módosítja az építési folyamatot, például új fájlformátum támogatását vagy forráskód átalakítását.
• elhatározás. Ez beállítja, hogy a Vite hogyan oldja meg az importálást a projektben. Lehetőségeket tartalmaz álnevek, bővítmények és modulkönyvtárak megadására.

Íme egy példa a Vite konfigurációs fájljára:

import { defineConfig } tól től"vite";
import pálya tól től'pálya';
exportalapértelmezett defineConfig({
 szerver: {
 kikötő: 3000,
 nyisd ki: igaz,
 },
 megoldani: {
 alias: {
'@': path.resolve (__dirname, './src'),
 },
 },
 bővítmények: [],
});

Ez a konfigurációs fájl egy alap Vite projektet állít be a következőkkel:

• porton futó helyi fejlesztési szerver 3000
• egy álnevet a src Könyvtár
• nincs plugin

Vite erős közösséggel rendelkezik

Számos online forrás részletesen ismerteti a Vite használatát olyan népszerű keretrendszerekkel, mint a React, Vue és Angular.

Ezenkívül a hivatalos dokumentációban rengeteg információ található a Vite hatékony használatáról. Ezekkel a rendelkezésre álló erőforrásokkal lehetséges a Vite integrálása a következő projektjébe.