Bouw uw complexe web-apps in minder tijd, met een snellere feedbacklus, met behulp van Vite.
Naarmate webapplicaties steeds rijker aan functies worden, blijft de vraag naar snelle en efficiënte bouwtools toenemen.
Vite is een moderne build-tool die een razendsnelle ontwikkelserver en een geoptimaliseerd build-proces biedt, waardoor gebruikers hun workflow kunnen stroomlijnen en de eindgebruikerservaring kunnen verbeteren.
Je zult ontdekken hoe je met Vite kunt beginnen, waarbij je het installatieproces, de essentiële functies en Command Line Interface (CLI) -opdrachten behandelt.
Initialiseer een Vite-project
Voordat u kunt gebruiken Vit, moet u installeren Node.js en Node Package Manager op uw systeem. Nadat je deze twee pakketten hebt geïnstalleerd, kun je doorgaan met het maken van een project met Vite.
Hier leest u hoe u een project met Vite kunt initialiseren met behulp van npm:
npm start vite
Wanneer u deze opdracht uitvoert, wordt er een nieuw Vite-project gemaakt in uw huidige werkdirectory. De opdracht vraagt u om fundamentele configuratiekeuzes te maken om uw nieuwe Vite-project in te stellen.
Hier volgt een overzicht van de opties die de opdracht u vraagt te selecteren:
- Naam van het project. Wanneer u de opdracht uitvoert, wordt u gevraagd een naam op te geven voor uw nieuwe project. De naam die u opgeeft, verschijnt ook in het pakket.json bestand en dienen als de naam van uw projectdirectory.
- Kies een raamwerk. In deze prompt wordt u gevraagd een raamwerk voor uw project te kiezen. Vite ondersteunt momenteel populaire front-end frameworks zoals React, Vue, Angular en een Vanilla-optie voor gewone JavaScript-code.
- Kies een variant. Dit vraagt u om een variant voor uw project te kiezen, met alternatieven zoals JavaScript en de subsettaal TypeScript.
Nadat u de vereiste informatie hebt opgegeven, genereert Vite een nieuwe projectstructuur in uw huidige werkdirectory. De structuur vertegenwoordigt een basisprojectopstelling, inclusief een pakket.json dien een... in src map met een index.html En main.js bestand, en een openbaar map.
Nadat u de projectstructuur hebt gemaakt, kunt u door te rennen naar de projectdirectory navigeren CD . Zodra u dit hebt gedaan, installeert u eventuele aanvullende afhankelijkheden die uw project nodig heeft met behulp van de npm installeren commando.
Om een ontwikkelingsserver te starten en eventuele wijzigingen in uw project te volgen, voert u het npm run dev opdracht binnen uw projectterminal.
Kenmerken van Vite
De functies van Vite zijn gericht op het stroomlijnen van het bouwproces en het verbeteren van de webbouwervaring.
Rapid Development-server
De ontwikkelingsserver van Vite maakt gebruik van native ES-modules en het laden van luie modules, wat een ongelooflijke snelheid mogelijk maakt. Dit zorgt voor snelle feedbackloops en razendsnelle opstarttijden.
Geoptimaliseerd bouwproces
Vite heeft zijn buildprocedure verbeterd om productieklare, geoptimaliseerde en geminimaliseerde code te produceren. Bovendien maakt het een manifestbestand dat bust- en versie-items in de cache kan opslaan.
Ondersteuning voor verschillende front-end frameworks
Vite ondersteunt verschillende front-end frameworks, waaronder Vue, en vergelijkbare frameworks zoals React Js en Angular Js. Hierdoor kunnen ontwikkelaars hun favoriete framework kiezen en de krachtige mogelijkheden van Vite benutten.
Vervanging van hete module (HMR)
Vite's Hot Module Replacement (HMR) -functie zorgt voor snelle en naadloze updates van de applicatie zonder dat een volledige pagina moet worden vernieuwd. Dit maakt het ontwikkelproces sneller en efficiënter.
CSS-voorverwerking en PostCSS-integratie
Vite ondersteunt CSS-voorverwerking, inclusief Sass, Less en Stylus. Het integreert ook met PostCSS, waardoor aanvullende transformaties en optimalisaties aan de CSS mogelijk zijn.
Vite wordt geleverd met vele andere functies, waaronder ondersteuning voor TypeScript, JSX en WebAssembly. Met de release van Vite v4.0.4, Vite's ontwikkelaarscommunity is gegroeid en heeft de software actief onderhouden en regelmatig nieuwe functies toegevoegd.
Vite's opdrachtregelinterface (CLI)
Vite's Command Line Interface (CLI) is een handig hulpmiddel om het gedrag van Vite aan te passen. Het biedt een reeks essentiële opdrachten die ook helpen het ontwikkelingsproces te stroomlijnen. Hier zijn enkele van de cruciale CLI-opdrachten:
viet bouwen
Met deze opdracht wordt de toepassing voor een productieomgeving gebouwd, waarbij de code wordt geoptimaliseerd en geminimaliseerd, zodat deze klaar is voor implementatie. Met deze opdracht kunt u ervoor zorgen dat uw applicatie zo snel en effectief mogelijk is en gereed is voor distributie naar uw gebruikers.
vite voorbeeld
Met deze opdracht kunt u een voorbeeld van de gegenereerde code bekijken voordat u deze implementeert in productie. Als u ervoor wilt zorgen dat alles eruitziet en werkt zoals verwacht en er geen duidelijke problemen of problemen zijn die aandacht vereisen, is dit een handige opdracht om uit te voeren.
vite optimaliseren
vite optimaliseren is beschikbaar in Vite 2.6 en latere versies die projectcode analyseren en geoptimaliseerde productiebuilds genereren door tree uit te voeren shaken, bewerkingen voor het splitsen van codes en het rechtstreeks insluiten van kleine activa in de uiteindelijke build om het aantal benodigde verzoeken om het te laden te verminderen app.
vite optimaliseren automatisch uitgevoerd tijdens de viet bouwen commando, dat geoptimaliseerde productie-builds genereert. U kunt het ook afzonderlijk uitvoeren om de grootte en prestaties van de build te controleren
Vite's configuratiebestand
In Vite definieert het configuratiebestand verschillende opties voor het bouwproces. Het Vite-configuratiebestand gebruikt JavaScript en de syntaxis van de ES6-modules.
Standaard moet u uw configuratiebestand een naam geven vite.config.js en plaats het in de hoofdmap van het project.
Hier zijn enkele van de meest gebruikte opties in het Vite-configuratiebestand:
- wortel. Specificeert de hoofdmap van het project.
- server. Configureert de ontwikkelingsserver. Het bevat opties voor het configureren van de host-, poort- en proxyverzoeken voor een API-backend.
- plug-ins. Maakt het mogelijk om plug-ins toe te voegen aan het Vite-bouwproces. Een plug-in is een functie die het bouwproces op de een of andere manier wijzigt, zoals het toevoegen van ondersteuning voor een nieuw bestandsformaat of het transformeren van de broncode.
- oplossen. Dit configureert hoe Vite import in het project oplost. Het bevat opties voor het specificeren van aliassen, extensies en modulemappen.
Hier is een voorbeeld van een Vite-configuratiebestand:
importeren { definieerConfig } van'vite';
importeren pad van'pad';
exporterenstandaard definieerConfig({
server: {
haven: 3000,
open: WAAR,
},
oplossen: {
alias: {
'@': path.resolve (__dirname, './src'),
},
},
plug-ins: [],
});
Dit configuratiebestand zet een basis Vite-project op met:
- een lokale ontwikkelingsserver die op poort draait 3000
- een alias voor de src map
- geen plug-ins
Vite heeft een sterke gemeenschap
Verschillende online bronnen leggen tot in detail uit hoe Vite te gebruiken met populaire frameworks zoals React, Vue en Angular.
Bovendien is er een schat aan informatie over het effectief gebruik van Vite in de officiële documentatie. Met deze beschikbare middelen is het mogelijk om Vite in uw volgende project te integreren.
