Το Vite v4.0.4 κυκλοφόρησε στις 3 Ιανουαρίου 2023 και ενισχύει τις λειτουργίες του περιβάλλοντος ανάπτυξης Vite και έρχεται μόλις πέντε μήνες μετά το Vite 3. Η νέα έκδοση συνοδεύεται από νέες δυνατότητες και ενημερώσεις που θα κάνουν την εμπειρία ανάπτυξης JavaScript ταχύτερη και ισχυρότερη από πριν.
Εδώ, θα συζητήσουμε τι είναι το Vite, τις σημαντικές δυνατότητες και ενημερώσεις που βρέθηκαν στο Vite 4.
Τι θα Vite;
Η ίδια η λέξη "vite" σημαίνει "γρήγορο". Είναι ένα εργαλείο δημιουργίας front-end και διακομιστή ανάπτυξης που έχει σχεδιαστεί για να παρέχει μια ταχύτερη, ελαφριά και απλή εμπειρία ανάπτυξης. Εξυπηρετεί τον κώδικά σας κατά την ανάπτυξη, ομαδοποιεί τα αρχεία σας για παραγωγή και επιτρέπει την εύκολη ενσωμάτωση με διάφορα Πλαίσια JavaScript και βιβλιοθήκες, όπως το Vue, το React, το Preact και το Svelte.
Vite έχει υποστεί πολλές βελτιώσεις τα τελευταία δύο χρόνια και το Vite 4 φέρνει αρκετές νέες και βελτιωμένες δυνατότητες.
1. Συνάθροιση 3
Συνάθροιση είναι ένα πακέτο λειτουργιών JavaScript που επιτρέπει στους προγραμματιστές να ομαδοποιούν διαφορετικά Ενότητες JavaScript σε ένα μόνο αρχείο. Αυτό με τη σειρά του βελτιώνει την απόδοση της εφαρμογής μειώνοντας τον αριθμό των αιτημάτων που χρειάζεται να κάνει το πρόγραμμα περιήγησης για τη φόρτωση του κώδικα.
Το Vite χρησιμοποιεί τώρα τη Συνάθροιση 3 κατά τη διάρκεια του χρόνου κατασκευής. Η έκδοση 3 του Vite χρησιμοποιούσε τη Συνάθροιση 2, αλλά μετά την κυκλοφορία της Συνάθροισης 3 τον Οκτώβριο του 2022, η νέα έκδοση του Vite ήρθε με μια σημαντική αναβάθμιση στη Συνάθροιση 3.
Θα πρέπει να ανατρέξετε στον οδηγό μετεγκατάστασης Συνάθροισης πριν από την αναβάθμιση στη Συνάθροιση 3, καθώς ενδέχεται να προκύψουν προβλήματα, παρόλο που η Συνάθροιση 3 είναι ως επί το πλείστον συμβατή με τη Συνάθροιση 2.
2. Νέα προσθήκη React με χρήση του Speedy Web Compiler (SWC)
SWC είναι ένας εξαιρετικά γρήγορος μεταγλωττιστής JavaScript γραμμένος σε Rust. SWC και Βαβυλωνία είναι και οι δύο μεταγλωττιστές JavaScript που μετατρέπουν τον κώδικά σας σε αυτό που υποστηρίζεται από προγράμματα περιήγησης, αλλά το SWC ισχυρίστηκε ότι είναι ταχύτερο από το Babel.
Δεδομένου ότι το Vite v3 χρησιμοποιούσε το Babel, το v4 συνοδεύεται από την εισαγωγή του SWC ως αντικατάσταση ή εναλλακτική λύση, ειδικά για έργα React.
Ενώ το Vite συνεχίζει να υποστηρίζει το Babel, το Vite 4 εισάγει δύο πρόσθετα (vitejs/plugin-react και vitejs/plugin-react-swc) με διαφορετικές ανταλλαγές για τα έργα React.
Το πρόσθετο vitejs/plugin-react
Αυτό το πρόσθετο παρέχει γρήγορη αντικατάσταση Hot Module ενώ χρησιμοποιεί ελάχιστο μέγεθος πακέτου, χρησιμοποιώντας το esbuild και το Babel. Προσφέρει επίσης την πρόσθετη ευελιξία της δυνατότητας χρήσης του αγωγού μετασχηματισμού Babel.
Η αντικατάσταση θερμής μονάδας επιτρέπει την ανανέωση του λίπους. Επιτρέπει στους προγραμματιστές να ενημερώνουν τις ενότητες σε μια εφαρμογή που εκτελείται χωρίς να χρειάζεται να ανανεώσουν ολόκληρη τη σελίδα. Ακολουθήστε την παρακάτω επίδειξη για να εγκαταστήσετε την προσθήκη στο έργο σας.
npm εγκατάσταση @vitejs/plugin-react
Ακολουθήστε τον παρακάτω κώδικα για να εισαγάγετε την προσθήκη στο έργο σας.
εισαγωγή { defineConfig } από"Vite"
εισαγωγή αντιδρώ από'@vitejs/plugin-react'
εξαγωγήΠροκαθορισμένο defineConfig({
πρόσθετα: [αντιδρώ()],
})
Το πρόσθετο vitejs/plugin-react-swc
Αυτό είναι ένα νέο πρόσθετο που χρησιμοποιεί το esbuild κατά την κατασκευή και το Speed Web Compiler κατά την ανάπτυξη.
Αντικαθιστώντας το Babel με SWC, η προσθήκη στοχεύει να επιταχύνει σημαντικά τη διαδικασία ανάπτυξης, ιδιαίτερα για έργα που δεν απαιτούν μη τυπικές επεκτάσεις React.
Δείτε πώς να εγκαταστήσετε το πρόσθετο.
npm i @vitejs/plugin-react-swc
Εισαγάγετε το στο έργο σας ως εξής.
εισαγωγή { defineConfig } από"βίτε";
εισαγωγή αντιδρώ από"@vitejs/plugin-react-swc";
εξαγωγήΠροκαθορισμένο defineConfig({
πρόσθετα: [αντιδρώ()],
});
3. Εισαγωγή CSS ως συμβολοσειρά
Αυτή η δυνατότητα δίνει μια λύση στη συμπεριφορά διπλής φόρτωσης του Vite 3 CSS που προκύπτει με την εισαγωγή της προεπιλεγμένης εξαγωγής ενός αρχείου CSS, π.χ.
εισαγωγή cssString από'./global.cssΓια να αποτρέψει αυτήν τη συμπεριφορά, το Vite 4 εισάγει τη χρήση του τροποποιητή επιθήματος ερωτήματος ?inline. Εδώ είναι μια επίδειξη της σύνταξης.
εισαγωγή cssString από'./global.css? στη γραμμή'Συνεπώς, η προεπιλεγμένη εξαγωγή v3 CSS έχει καταργηθεί.
4. Μεταβλητές Περιβάλλοντος
Το Vite ενημέρωσε τις εξαρτήσεις του από το dotenv και το dotenv-expand. Οι νέες εκδόσεις που χρησιμοποιούνται είναι το dotenv 16 και το dotenv-expand 9, αντίστοιχα. Αυτή η ενημέρωση θα σας ζητήσει να αναδιπλώσετε τιμές που περιλαμβάνουν τους χαρακτήρες "#" ή "`" σε εισαγωγικά για να διασφαλίσετε τη σωστή λειτουργία. Εδώ είναι ένα παράδειγμα?
SECRET_HASH="κάτι-με-ένα-#-χασίσι"Για να διευκολύνει τη διαδικασία ενημέρωσης των αρχείων ENV, η Vite συνέστησε τη χρήση της διεπαφής γραμμής εντολών dotenv. Αυτή είναι μια προαιρετική προσθήκη που μπορεί να σας βοηθήσει να διασφαλίσετε ότι τα αρχεία ENV είναι συνεπή σε διαφορετικά μηχανήματα, περιβάλλοντα ή μέλη ομάδας. Μπορεί να σας βοηθήσει να κάνετε τη διαδικασία ενημέρωσης αρχείων ENV λιγότερο κουραστική.
Άλλες αναβαθμίσεις, διορθώσεις και μετεγκατάσταση στο Vite v4.0.4
Το Vite έχει προσθέσει περισσότερες συντομεύσεις διεπαφής γραμμής εντολών. Για να δείτε μια λίστα με όλες τις συντομεύσεις, πατήστε η κατά την ανάπτυξη.
Η σύγχρονη έκδοση του προγράμματος περιήγησης στοχεύει επίσης το safari14 από προεπιλογή για ευρύτερη συμβατότητα ES2020. Υπάρχει υποστήριξη για patch-package κατά την προ-ομαδοποίηση εξαρτήσεων, υπάρχουν βελτιωμένα μηνύματα σφάλματος κατά τη διάρκεια του SSR και πολλά άλλα.
