Iniziare con Vite: lo strumento di costruzione definitivo

Man mano che le applicazioni Web diventano più ricche di funzionalità, la domanda di strumenti di compilazione rapidi ed efficienti continua a crescere.

Vite è uno strumento di compilazione moderno che fornisce un server di sviluppo velocissimo e un processo di compilazione ottimizzato, consentendo agli utenti di semplificare il proprio flusso di lavoro e migliorare l'esperienza dell'utente finale.

Esplorerai come iniziare con Vite, coprendo il suo processo di installazione, le funzionalità essenziali e i comandi dell'interfaccia a riga di comando (CLI).

Inizializza un progetto Vite

Prima di poterlo utilizzare Vite, devi installare Node.js e Node Package Manager sul tuo sistema. Dopo aver installato questi due pacchetti, puoi quindi procedere alla creazione di un progetto con Vite.

Ecco come inizializzare un progetto con Vite usando npm:

npm init vite

Quando esegui questo comando, crea un nuovo progetto Vite nella tua attuale directory di lavoro. Il comando ti chiede di fare scelte di configurazione fondamentali per impostare il tuo nuovo progetto Vite.

Ecco una ripartizione delle opzioni che il comando richiede di selezionare:

1. Nome del progetto. Quando esegui il comando, ti viene chiesto di fornire un nome per il tuo nuovo progetto. Il nome fornito apparirà anche nel file pacchetto.json file e fungere da nome della directory del progetto.
2. Scegli un quadro. Questo prompt ti chiederà di scegliere un framework per il tuo progetto. Vite attualmente supporta framework front-end popolari come React, Vue, Angular e un'opzione Vanilla per il semplice codice JavaScript.
3. Scegli una variante. Questo ti chiede di scegliere una variante per il tuo progetto, coprendo alternative come JavaScript e il suo linguaggio di sottoinsieme TypeScript.

Dopo aver fornito le informazioni richieste, Vite genererà una nuova struttura del progetto nella directory di lavoro corrente. La struttura rappresenterà una configurazione di progetto di base, tra cui a pacchetto.json fascicolo, A src directory con un indice.html E principale.js file e a pubblico directory.

Dopo aver creato la struttura del progetto, puoi passare alla directory del progetto eseguendo CD . Dopo averlo fatto, installa eventuali dipendenze aggiuntive che il tuo progetto potrebbe richiedere utilizzando il file installazione npm comando.

Per avviare un server di sviluppo e monitorare eventuali modifiche apportate al progetto, eseguirai il file npm esegue lo sviluppo comando all'interno del terminale del progetto.

Caratteristiche di Vite

Le funzionalità di Vite si concentrano sulla razionalizzazione del processo di creazione e sul miglioramento dell'esperienza di creazione del Web.

Server di sviluppo rapido

Il server di sviluppo di Vite utilizza moduli ES nativi e il caricamento pigro dei moduli, consentendo una velocità incredibile. Ciò consente cicli di feedback rapidi e tempi di avvio rapidissimi.

Processo di costruzione ottimizzato

Vite ha migliorato la sua procedura di compilazione per produrre codice pronto per la produzione, ottimizzato e minimizzato. Inoltre, crea un file manifest che può memorizzare nella cache risorse bus e versione.

Supporto per vari framework front-end

Vite supporta vari framework front-end, tra cui Vue e framework simili come React Js e Angular Js. Ciò consente agli sviluppatori di scegliere il proprio framework preferito e sfruttare le potenti capacità di Vite.

Sostituzione del modulo caldo (HMR)

La funzione Hot Module Replacement (HMR) di Vite consente aggiornamenti rapidi e senza interruzioni dell'applicazione senza richiedere un aggiornamento dell'intera pagina. Ciò rende il processo di sviluppo più rapido ed efficiente.

Preelaborazione CSS e integrazione PostCSS

Vite supporta la preelaborazione CSS, inclusi Sass, Less e Stylus. Si integra anche con PostCSS, consentendo ulteriori trasformazioni e ottimizzazioni al CSS.

Vite viene fornito con molte altre funzionalità, incluso il supporto per TypeScript, JSX e WebAssembly. Con il rilascio di Vite v4.0.4, la comunità di sviluppatori di Vite è cresciuta e ha mantenuto attivamente il software, aggiungendo regolarmente nuove funzionalità.

Interfaccia a riga di comando (CLI) di Vite

L'interfaccia a riga di comando (CLI) di Vite è uno strumento utile per personalizzare il comportamento di Vite. Fornisce una gamma di comandi essenziali che aiutano anche a semplificare il processo di sviluppo. Ecco alcuni dei comandi CLI cruciali:

vite build

Questo comando creerà l'applicazione per un ambiente di produzione, ottimizzando e minimizzando il codice in modo che sia pronto per la distribuzione. Utilizzando questo comando, puoi assicurarti che la tua applicazione sia il più rapida ed efficace possibile e pronta per la distribuzione ai tuoi utenti.

anteprima vite

Questo comando consente di visualizzare in anteprima il codice generato prima di distribuirlo alla produzione. Se vuoi assicurarti che tutto appaia e funzioni come previsto e non ci sono problemi o problemi apparenti che richiedono attenzione, questo è un comando utile da eseguire.

vite ottimizzare

vite ottimizzare è disponibile in Vite 2.6 e versioni successive che analizzano il codice del progetto e generano build di produzione ottimizzate eseguendo tree shake, operazioni di suddivisione del codice e incorporamento di piccole risorse direttamente nella build finale per ridurre le richieste necessarie per caricare il file app.

vite ottimizzare viene eseguito automaticamente durante il vite build comando, che genera build di produzione ottimizzate. Puoi anche eseguirlo separatamente per verificare le dimensioni e le prestazioni della build

File di configurazione di Vite

In Vite, il file di configurazione definisce varie opzioni per il processo di compilazione. Il file di configurazione di Vite utilizza JavaScript e la sintassi dei moduli ES6.

Per impostazione predefinita, dovresti nominare il tuo file di configurazione vite.config.js e posizionarlo nella directory principale del progetto.

Ecco alcune delle opzioni più comunemente utilizzate nel file di configurazione di Vite:

• radice. Specifica la directory radice del progetto.
• server. Configura il server di sviluppo. Include opzioni per la configurazione dell'host, della porta e delle richieste di inoltro a un back-end API.
• plugin. Consente di aggiungere plugin al processo di compilazione di Vite. Un plug-in è una funzione che modifica in qualche modo il processo di compilazione, ad esempio aggiungendo il supporto per un nuovo formato di file o trasformando il codice sorgente.
• risolvere. Questo configura il modo in cui Vite risolve le importazioni nel progetto. Include opzioni per specificare alias, estensioni e directory dei moduli.

Ecco un esempio di un file di configurazione di Vite:

importare {defineConfig} da'vite';
importare sentiero da'sentiero';
esportarepredefinito defineConfig({
 server: {
 porta: 3000,
 aprire: VERO,
 },
 risolvere: {
 alias: {
'@': percorso.resolve (__dirname, './sorgente'),
 },
 },
 plugin: [],
});

Questo file di configurazione imposta un progetto Vite di base con:

• un server di sviluppo locale in esecuzione sulla porta 3000
• un alias per il src directory
• nessun plugin

Vite ha una forte comunità

Diverse risorse online spiegano in dettaglio come utilizzare Vite con framework popolari come React, Vue e Angular.

Inoltre, c'è una grande quantità di informazioni sull'uso efficace di Vite nella sua documentazione ufficiale. Con queste risorse disponibili, è possibile integrare Vite nel tuo prossimo progetto.