Πώς να ρυθμίσετε μια εφαρμογή React με το Vite

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

Τι είναι το Vite;

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

Vite χρήσεις esbuild, ένα πακέτο που βασίζεται σε Go που είναι σημαντικά ταχύτερο από τα παραδοσιακά bundler που βασίζονται σε JavaScript για να επιταχύνει τη διαδικασία δημιουργίας για τον πηγαίο κώδικα. Επίσης, προ-ομαδοποιεί τις εξαρτήσεις της εφαρμογής σας και εξυπηρετεί τον πηγαίο κώδικα μέσω του εγγενούς ESM, επιτρέποντας στα προγράμματα περιήγησης να βελτιστοποιούν τη φόρτωση των μονάδων για πιο αποτελεσματική και ταχύτερη εφαρμογή εκτέλεση. Όταν έρθει η ώρα να αναπτύξετε την εφαρμογή σας στην παραγωγή, το Vite έχει μια ενσωματωμένη εντολή δημιουργίας που βελτιστοποιεί αυτόματα την εφαρμογή σας για ανάπτυξη, διασφαλίζοντας ότι η εφαρμογή σας εκτελείται ομαλά.

Δημιουργία ενός έργου Vite

Πριν δημιουργήσετε ένα έργο Vite, σημειώστε ότι το Vite απαιτεί Node.js έκδοση 14.18+ ή 16+. Μπορείτε να ανατρέξετε σε αυτά τα άρθρα για να εγκαταστήσετε το Node στον υπολογιστή σας με Windows ή Ubuntu.

• Πως να εγκαταστήστε το Node.js στα Windows.
• Μαθαίνω πώς να εγκαταστήσετε τα Npm και Node.js στο Ubuntu

Δημιουργήστε ένα έργο Vite εκτελώντας αυτήν την εντολή στο τερματικό.

npm δημιουργία vite@latest

Μόλις ξεκινήσει η εκτέλεση της εντολής, θα σας ζητηθεί ένα όνομα έργου. Πληκτρολογήστε το όνομα του έργου σας και κάντε κλικ στο enter.

Στη συνέχεια, το Vite θα σας ζητήσει να επιλέξετε ένα πλαίσιο. Επιλέξτε Αντίδραση.

Το Vite θα σας ζητήσει επίσης να επιλέξετε μια παραλλαγή. Επιλέξτε JavaScript.

Όταν το Vite ολοκληρώσει τη σκαλωσιά του έργου, περιηγηθείτε στον κατάλογο που δημιουργεί και εγκαταστήστε τις εξαρτήσεις μέσω npm.

npm εγκατάσταση

Για να εκτελέσετε το έργο, χρησιμοποιήστε αυτήν την εντολή:

npm εκτέλεση dev

Αυτή θα πρέπει να είναι η αρχική σελίδα.

Μπορείτε να ξεκινήσετε την επεξεργασία του έργου σας και οι αλλαγές σας θα αντικατοπτρίζονται στο πρόγραμμα περιήγησης.

Χρησιμοποιήστε το Vite για γρήγορη ταχύτητα ανάπτυξης

Το CRA (create-react-app) είναι συνήθως το προεπιλεγμένο εργαλείο για τη ρύθμιση της δομής και της διαμόρφωσης του έργου για μια εφαρμογή React. Είναι βολικό καθώς όλα έχουν ρυθμιστεί για εσάς, αλλά μπορεί να καθυστερήσει η κατασκευή και η επαναφόρτωση κατά την ανάπτυξη.

Το Vite, από την άλλη πλευρά, χρησιμοποιεί εγγενείς μονάδες ES στο πρόγραμμα περιήγησης για να παρέχει ταχύτερους χρόνους κατασκευής. Εάν δεν θέλετε να χρησιμοποιήσετε το Vite, μπορείτε να επιλέξετε ένα μετα-πλαίσιο React όπως το Next.js, καθώς είναι επίσης σχεδιασμένο να έχει υψηλή απόδοση.