Ξεκινώντας με το Vite: The Ultimate Build Tool

Καθώς οι εφαρμογές Ιστού γίνονται πιο πλούσιες σε χαρακτηριστικά, η ανάγκη για γρήγορα και αποτελεσματικά εργαλεία κατασκευής συνεχίζει να αυξάνεται σε ζήτηση.

Το Vite είναι ένα σύγχρονο εργαλείο κατασκευής που παρέχει έναν διακομιστή ανάπτυξης αστραπιαία και μια βελτιστοποιημένη διαδικασία κατασκευής, επιτρέποντας στους χρήστες να βελτιστοποιήσουν τη ροή εργασίας τους και να βελτιώσουν την εμπειρία του τελικού χρήστη.

Θα εξερευνήσετε πώς να ξεκινήσετε με το Vite, καλύπτοντας τη διαδικασία εγκατάστασης, τις βασικές δυνατότητες και τις εντολές Command Line Interface (CLI).

Αρχικοποιήστε ένα έργο Vite

Προτού μπορέσετε να χρησιμοποιήσετε Vite, πρέπει να εγκαταστήσετε Node.js και Node Package Manager στο σύστημά σας. Αφού εγκαταστήσετε αυτά τα δύο πακέτα, μπορείτε να προχωρήσετε στη δημιουργία ενός έργου με το Vite.

Ακολουθεί ο τρόπος προετοιμασίας ενός έργου με το Vite χρησιμοποιώντας npm:

npm init vite

Όταν εκτελείτε αυτήν την εντολή, δημιουργεί ένα νέο έργο Vite στον τρέχοντα κατάλογο εργασίας σας. Η εντολή σας ζητά να κάνετε βασικές επιλογές διαμόρφωσης για να ρυθμίσετε το νέο σας έργο Vite.

Ακολουθεί μια ανάλυση των επιλογών που σας ζητά να επιλέξετε η εντολή:

1. Όνομα του Έργου. Όταν εκτελείτε την εντολή, σας ζητά να δώσετε ένα όνομα για το νέο σας έργο. Το όνομα που παρέχετε θα εμφανίζεται επίσης στο πακέτο.json αρχείο και χρησιμεύει ως το όνομα του καταλόγου του έργου σας.
2. Επιλέξτε ένα πλαίσιο. Αυτή η προτροπή θα σας ζητήσει να επιλέξετε ένα πλαίσιο για το έργο σας. Το Vite υποστηρίζει προς το παρόν δημοφιλή πλαίσια διεπαφής όπως React, Vue, Angular και μια επιλογή Vanilla για απλό κώδικα JavaScript.
3. Επιλέξτε μια παραλλαγή. Αυτό σας προτρέπει να επιλέξετε μια παραλλαγή για το έργο σας, που καλύπτει εναλλακτικές όπως JavaScript και γλώσσα του υποσυνόλου TypeScript.

Αφού παρέχετε τις απαιτούμενες πληροφορίες, το Vite θα δημιουργήσει μια νέα δομή έργου στον τρέχοντα κατάλογο εργασίας σας. Η δομή θα αντιπροσωπεύει μια βασική ρύθμιση έργου, συμπεριλαμβανομένου α πακέτο.json αρχείο, α src κατάλογο με ένα index.html και main.js αρχείο και α δημόσιο Ευρετήριο.

Αφού δημιουργήσετε τη δομή του έργου, μπορείτε να πλοηγηθείτε στον κατάλογο του έργου εκτελώντας CD . Μόλις το κάνετε, εγκαταστήστε τυχόν πρόσθετες εξαρτήσεις που μπορεί να απαιτεί το έργο σας χρησιμοποιώντας το npm εγκατάσταση εντολή.

Για να ξεκινήσετε έναν διακομιστή ανάπτυξης και να παρακολουθήσετε τυχόν αλλαγές που έγιναν στο έργο σας, θα εκτελέσετε το npm εκτέλεση dev εντολή στο τερματικό του έργου σας.

Χαρακτηριστικά του Vite

Οι δυνατότητες του Vite επικεντρώνονται στον εξορθολογισμό της διαδικασίας κατασκευής και στη βελτίωση της εμπειρίας κατασκευής ιστού.

Διακομιστής ταχείας ανάπτυξης

Ο διακομιστής ανάπτυξης του Vite χρησιμοποιεί εγγενείς μονάδες ES και τεμπέλικο φόρτωμα λειτουργικών μονάδων, επιτρέποντας απίστευτη ταχύτητα. Αυτό επιτρέπει γρήγορους βρόχους ανάδρασης και χρόνους εκκίνησης με αστραπιαία ταχύτητα.

Βελτιστοποιημένη διαδικασία κατασκευής

Το Vite βελτίωσε τη διαδικασία κατασκευής του για να παράγει κώδικα έτοιμο για παραγωγή, βελτιστοποιημένο και ελαχιστοποιημένο. Επιπλέον, δημιουργεί ένα αρχείο δήλωσης που μπορεί να αποθηκεύσει προσωρινά στοιχεία αποτυχίας και έκδοσης.

Υποστήριξη για διάφορα Front-End Frameworks

Το Vite υποστηρίζει διάφορα πλαίσια front-end, συμπεριλαμβανομένων των Vue και παρόμοια πλαίσια όπως το React Js και το Angular Js. Αυτό επιτρέπει στους προγραμματιστές να επιλέξουν το πλαίσιο που προτιμούν και να αξιοποιήσουν τις ισχυρές δυνατότητες του Vite.

Αντικατάσταση θερμής μονάδας (HMR)

Η λειτουργία Hot Module Replacement (HMR) του Vite επιτρέπει γρήγορες και απρόσκοπτες ενημερώσεις της εφαρμογής χωρίς να απαιτείται πλήρης ανανέωση σελίδας. Αυτό κάνει τη διαδικασία ανάπτυξης ταχύτερη και πιο αποτελεσματική.

Προεπεξεργασία CSS και ενσωμάτωση PostCSS

Το Vite υποστηρίζει προεπεξεργασία CSS, συμπεριλαμβανομένων των Sass, Less και Stylus. Ενσωματώνεται επίσης με το PostCSS, επιτρέποντας επιπλέον μετασχηματισμούς και βελτιστοποιήσεις στο CSS.

Το Vite συνοδεύεται από πολλές άλλες δυνατότητες, όπως υποστήριξη για TypeScript, JSX και WebAssembly. Με την κυκλοφορία του Vite v4.0.4, η κοινότητα προγραμματιστών του Vite έχει αναπτυχθεί και συντηρεί ενεργά το λογισμικό, προσθέτοντας τακτικά νέες δυνατότητες.

Διεπαφή γραμμής εντολών Vite (CLI)

Η διεπαφή γραμμής εντολών (CLI) του Vite είναι ένα εύχρηστο εργαλείο για την προσαρμογή της συμπεριφοράς του Vite. Παρέχει μια σειρά από βασικές εντολές που βοηθούν επίσης στον εξορθολογισμό της διαδικασίας ανάπτυξης. Ακολουθούν μερικές από τις κρίσιμες εντολές CLI:

vite build

Αυτή η εντολή θα δημιουργήσει την εφαρμογή για ένα περιβάλλον παραγωγής, βελτιστοποιώντας και ελαχιστοποιώντας τον κώδικα ώστε να είναι έτοιμη για ανάπτυξη. Χρησιμοποιώντας αυτήν την εντολή, μπορείτε να διασφαλίσετε ότι η εφαρμογή σας είναι όσο το δυνατόν πιο γρήγορη και αποτελεσματική και έτοιμη για διανομή στους χρήστες σας.

vite προεπισκόπηση

Αυτή η εντολή σάς επιτρέπει να κάνετε προεπισκόπηση του κώδικα που δημιουργείται πριν τον αναπτύξετε στην παραγωγή. Εάν θέλετε να διασφαλίσετε ότι όλα φαίνονται και λειτουργούν όπως αναμένεται και ότι δεν υπάρχουν εμφανή ζητήματα ή προβλήματα που απαιτούν προσοχή, αυτή είναι μια χρήσιμη εντολή για εκτέλεση.

vite βελτιστοποίηση

vite βελτιστοποίηση είναι διαθέσιμο σε Vite 2.6 και νεότερες εκδόσεις που αναλύουν τον κώδικα του έργου και δημιουργούν βελτιστοποιημένες εκδόσεις παραγωγής εκτελώντας δέντρο ανακίνηση, λειτουργίες διαχωρισμού κώδικα και ενσωμάτωση μικρών στοιχείων απευθείας στην τελική έκδοση για μείωση των αιτημάτων που απαιτούνται για τη φόρτωση του εφαρμογή.

vite βελτιστοποίηση εκτελείται αυτόματα κατά τη διάρκεια του vite build εντολή, η οποία δημιουργεί βελτιστοποιημένες εκδόσεις παραγωγής. Μπορείτε επίσης να το εκτελέσετε ξεχωριστά για να ελέγξετε το μέγεθος και την απόδοση της κατασκευής

Το αρχείο διαμόρφωσης του Vite

Στο Vite, το αρχείο ρυθμίσεων ορίζει διάφορες επιλογές για τη διαδικασία δημιουργίας. Το αρχείο διαμόρφωσης Vite χρησιμοποιεί JavaScript και τη σύνταξη λειτουργικών μονάδων ES6.

Από προεπιλογή, θα πρέπει να ονομάσετε το αρχείο διαμόρφωσής σας vite.config.js και τοποθετήστε το στον ριζικό κατάλογο του έργου.

Ακολουθούν μερικές από τις πιο συχνά χρησιμοποιούμενες επιλογές στο αρχείο διαμόρφωσης Vite:

• ρίζα. Καθορίζει τον ριζικό κατάλογο του έργου.
• υπηρέτης. Ρυθμίζει τον διακομιστή ανάπτυξης. Περιλαμβάνει επιλογές για τη διαμόρφωση των αιτημάτων κεντρικού υπολογιστή, θύρας και διακομιστή μεσολάβησης σε ένα σύστημα υποστήριξης API.
• πρόσθετα. Επιτρέπει την προσθήκη προσθηκών στη διαδικασία δημιουργίας Vite. Ένα πρόσθετο είναι μια λειτουργία που τροποποιεί τη διαδικασία κατασκευής με κάποιο τρόπο, όπως η προσθήκη υποστήριξης για μια νέα μορφή αρχείου ή η μετατροπή του πηγαίου κώδικα.
• αποφασίζω. Αυτό ρυθμίζει τον τρόπο με τον οποίο το Vite επιλύει τις εισαγωγές στο έργο. Περιλαμβάνει επιλογές για τον καθορισμό ψευδωνύμων, επεκτάσεων και καταλόγων λειτουργικών μονάδων.

Ακολουθεί ένα παράδειγμα αρχείου διαμόρφωσης Vite:

εισαγωγή { defineConfig } από"Vite";
εισαγωγή μονοπάτι από'μονοπάτι';
εξαγωγήΠροκαθορισμένο defineConfig({
 διακομιστής: {
 Λιμάνι: 3000,
 Άνοιξε: αληθής,
 },
 επίλυση: {
 ψευδώνυμο: {
'@': path.resolve (__dirname, './src'),
 },
 },
 πρόσθετα: [],
});

Αυτό το αρχείο διαμόρφωσης ρυθμίζει ένα βασικό έργο Vite με:

• ένας τοπικός διακομιστής ανάπτυξης που λειτουργεί στη θύρα 3000
• ένα ψευδώνυμο για το src Ευρετήριο
• χωρίς πρόσθετα

Το Vite έχει μια ισχυρή κοινότητα

Αρκετοί διαδικτυακοί πόροι εξηγούν με μεγάλη λεπτομέρεια πώς να χρησιμοποιήσετε το Vite με δημοφιλή πλαίσια όπως το React, το Vue και το Angular.

Επιπλέον, υπάρχει πληθώρα πληροφοριών σχετικά με την αποτελεσματική χρήση του Vite στην επίσημη τεκμηρίωσή του. Με αυτούς τους διαθέσιμους πόρους, είναι δυνατή η ενσωμάτωση του Vite στο επόμενο έργο σας.