Δημοφιλή εργαλεία ανάπτυξης Front End που πρέπει να γνωρίζετε

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

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

Πιστεύω ότι είναι σημαντικό για τους Μηχανικούς Λογισμικού και τους Προγραμματιστές να κατανοήσουν τον σκοπό των εργαλείων που χρησιμοποιούμε καθημερινά.

Γι 'αυτό, σε αυτό το άρθρο, κοιτάζω τα NPM, Babel, Webpack, ESLint και CircleCI και προσπαθώ να διευκρινίσω τα προβλήματα που επιλύουν και τον τρόπο επίλυσής τους.

NPM

Το NPM είναι ο προεπιλεγμένος διαχειριστής πακέτων για ανάπτυξη JavaScript. Σας βοηθά να βρείτε και να εγκαταστήσετε πακέτα (προγράμματα) που μπορείτε να χρησιμοποιήσετε στα προγράμματά σας.

Μπορείτε να προσθέσετε npm σε ένα έργο απλά χρησιμοποιώντας την εντολή " npm init ". Όταν εκτελείτε αυτήν την εντολή δημιουργεί ένα αρχείο " package.json " στον τρέχοντα κατάλογο. Αυτό είναι το αρχείο όπου αναφέρονται οι εξαρτήσεις σας και το npm το βλέπει ως ταυτότητα του έργου.

Μπορείτε να προσθέσετε μια εξάρτηση με την εντολή " npm install (package_name) ".

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

Μπορείτε να βρείτε ληφθέντα πακέτα ή εξαρτήσεις στο φάκελο "node_modules" . Απλώς λάβετε υπόψη ότι συνήθως γίνεται πολύ μεγάλο - οπότε φροντίστε να το προσθέσετε στο .gitignore .

Πώς να διατηρείτε ενημερωμένες τις βιβλιοθήκες JavaScript σας - LogRocket Blog

Το NPM όχι μόνο διευκολύνει τη διαδικασία εύρεσης και λήψης πακέτων, αλλά διευκολύνει επίσης τη συνεργασία σε ένα έργο.

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

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

Βαβυλωνία

Το Babel είναι μεταγλωττιστής JavaScript ή μεταδότης που μεταφράζει τον κωδικό ECMAScript 2015+ σε κώδικα που μπορεί να γίνει κατανοητός από παλαιότερες μηχανές JavaScript.

Το Babel είναι ο πιο δημοφιλής μεταγλωττιστής Javascript και τα πλαίσια όπως το Vue και το React το χρησιμοποιούν από προεπιλογή. Ωστόσο, οι έννοιες για τις οποίες θα συζητήσουμε εδώ δεν σχετίζονται μόνο με το Babel και θα ισχύουν για οποιονδήποτε μεταγλωττιστή JavaScript.

Γιατί χρειάζεστε έναν μεταγλωττιστή;

"Γιατί χρειαζόμαστε έναν μεταγλωττιστή, δεν είναι JavaScript μια ερμηνευμένη γλώσσα;" μπορείτε να ρωτήσετε εάν είστε εξοικειωμένοι με τις έννοιες των μεταγλωττισμένων και ερμηνευμένων γλωσσών.

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

Ο όρος transpiler μπορεί να είναι πιο κατάλληλος, δεδομένου ότι είναι ένα υποσύνολο ενός μεταγλωττιστή: Transpilers είναι μεταγλωττιστές που μεταφράζουν τον κώδικα από μια γλώσσα προγραμματισμού σε μια άλλη γλώσσα (σε αυτό το παράδειγμα, από το σύγχρονο JS σε μια παλαιότερη έκδοση).

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

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

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

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

Πριν από το Babel, χρησιμοποιήσαμε polyfills για να εκτελέσουμε παλαιότερες εκδόσεις συγκεκριμένου κώδικα εάν το πρόγραμμα περιήγησης δεν υποστηρίζει τις σύγχρονες λειτουργίες. Και όταν χρησιμοποιείτε το Babel, χρησιμοποιεί polyfills πίσω από τα παρασκήνια και δεν απαιτεί από εσάς να κάνετε τίποτα.

Πώς λειτουργούν οι μεταγραφείς / μεταγλωττιστές;

Το Babel λειτουργεί παρόμοιο με άλλους μεταγλωττιστές. Έχει στάδια ανάλυσης, μετασχηματισμού και δημιουργίας κώδικα.

Δεν θα πάμε σε βάθος εδώ για το πώς λειτουργεί, καθώς οι μεταγλωττιστές είναι περίπλοκα πράγματα. Αλλά για να κατανοήσετε τα βασικά στοιχεία του τρόπου λειτουργίας των μεταγλωττιστών, μπορείτε να δείτε το έργο super-tiny-compiler. Αναφέρεται επίσης στην επίσημη τεκμηρίωση του Babel ως χρήσιμη στην κατανόηση του τρόπου λειτουργίας του Babel.

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

Οι προεπιλογές είναι συλλογές προσθηκών. Εάν θέλετε να χρησιμοποιήσετε το Babel για ένα έργο React, μπορείτε να χρησιμοποιήσετε το προκατασκευασμένο @ babel / preset-react που περιέχει τα απαραίτητα πρόσθετα.

Μπορείτε να προσθέσετε προσθήκες με την επεξεργασία του αρχείου διαμόρφωσης Babel.

Χρειάζεστε το Babel για την εφαρμογή React;

Για το React, χρειάζεστε έναν μεταγλωττιστή επειδή ο κωδικός React χρησιμοποιεί γενικά το JSX και το JSX πρέπει να μεταγλωττιστεί. Επίσης, η βιβλιοθήκη βασίζεται στην έννοια της χρήσης σύνταξης ES6.

Ευτυχώς, όταν δημιουργείτε ένα έργο με το create-react-app , έρχεται με το Babel που έχει ήδη διαμορφωθεί και συνήθως δεν χρειάζεται να τροποποιήσετε τη διαμόρφωση.

Παραδείγματα μεταγλωττιστή σε δράση

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

Webpack

Το Webpack είναι ένα στατικό πρόγραμμα δέσμης στοιχείων. Όταν δημιουργείτε ένα νέο έργο, τα περισσότερα πλαίσια / βιβλιοθήκες JavaScript το χρησιμοποιούν σήμερα από το κουτί.

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

Γιατί χρειάζεστε ένα bundler;

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

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

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

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

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

Τώρα λοιπόν, θα δούμε πώς το Webpack λύνει αυτό το ζήτημα.

Πώς λειτουργεί το Webpack

Όταν μιλούσαμε για το Babel, αναφέραμε ότι ο κώδικας JavaScript πρέπει να μεταφερθεί πριν από την ανάπτυξη.

Αλλά η κατάρτιση με το Babel δεν είναι η μόνη λειτουργία που χρειάζεστε προτού αναπτύξετε το έργο σας.

Συνήθως πρέπει να το κάνετε άσχημο, να το μεταφέρετε, να μεταγλωττίσετε το SASS ή το SCSS σε CSS εάν χρησιμοποιείτε προεπεξεργαστές, να συντάξετε το TypeScript εάν το χρησιμοποιείτε ... και όπως μπορείτε να δείτε, αυτή η λίστα μπορεί να διαρκέσει πολύ εύκολα.

Δεν θέλετε να αντιμετωπίσετε όλες αυτές τις εντολές και λειτουργίες πριν από κάθε ανάπτυξη. Θα ήταν υπέροχο αν υπήρχε ένα εργαλείο που έκανε όλα αυτά για εσάς με τη σωστή σειρά και σωστό τρόπο.

Τα καλά νέα - υπάρχουν: Webpack.

Το Webpack παρέχει επίσης λειτουργίες όπως ένας τοπικός διακομιστής με επαναφόρτωση καυτού (το αποκαλούν αντικατάσταση ενότητας) για να βελτιώσει την εμπειρία ανάπτυξης.

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

Εάν έχετε χρησιμοποιήσει ποτέ "npm run serve", "npm start" ή "npm run dev", αυτές οι εντολές ξεκινούν επίσης τον διακομιστή dev του Webpack πίσω από τα παρασκήνια.

Το Webpack ξεκινά από το σημείο εισόδου του έργου σας (ευρετήριο) και δημιουργεί το Abstract Syntax Tree του αρχείου. Μπορείτε να το θεωρήσετε ως ανάλυση του κώδικα. Αυτή η λειτουργία γίνεται επίσης σε μεταγλωττιστές, οι οποίοι στη συνέχεια αναζητούν αναφορές εισαγωγής αναδρομικά για να δημιουργήσουν ένα γράφημα εξαρτήσεων.

Στη συνέχεια μετατρέπει τα αρχεία σε IIFE για να τα διαμορφώσουν (θυμηθείτε, η τοποθέτηση κώδικα μέσα σε μια λειτουργία περιορίζει το πεδίο εφαρμογής της). Με αυτόν τον τρόπο, διαμορφώνουν τα αρχεία και διασφαλίζουν ότι οι μεταβλητές και οι συναρτήσεις δεν είναι προσβάσιμες σε άλλα αρχεία.

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

Το Webpack κάνει πολλά άλλα προηγμένα πράγματα πίσω από τα παρασκήνια, αλλά αυτό αρκεί για να κατανοήσει τα βασικά.

Μπόνους - ESLint

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

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

Λοιπόν, μπορείτε να χρησιμοποιήσετε ένα εργαλείο όπως το ESLint για την επιβολή κανόνων στον κώδικα. Για παράδειγμα, μπορείτε να δημιουργήσετε έναν κανόνα για την επιβολή ή την απαγόρευση της χρήσης ερωτηματικών στον κώδικα JavaScript. Εάν παραβιάσετε έναν κανόνα, το ESLint εμφανίζει ένα σφάλμα και ο κώδικας δεν συγκεντρώνεται καν - επομένως δεν είναι δυνατόν να το αγνοήσετε, εκτός εάν απενεργοποιήσετε τον κανόνα.

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

Μπορείτε να ρίξετε μια ματιά στη διαμόρφωση ESLint της Google εδώ - είναι αυτή που προτιμώ.

Το ESLint σάς βοηθά να συνηθίσετε τις βέλτιστες πρακτικές, αλλά αυτό δεν είναι το μόνο όφελος. Το ESLint σας προειδοποιεί επίσης για πιθανά σφάλματα / σφάλματα στον κώδικά σας, ώστε να μπορείτε να αποφύγετε κοινά λάθη.

Μπόνους - CI / CD (CircleCI)

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

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

Αναφέρομαι στο CircleCI ως προϊόν εδώ επειδή είναι δωρεάν και χρησιμοποιείται συχνά σε έργα JavaScript. Είναι επίσης αρκετά εύκολο στη χρήση.

Ας δούμε ένα παράδειγμα: Ας υποθέσουμε ότι διαθέτετε διακομιστή ανάπτυξης / QA και το αποθετήριο Git. Θέλετε να αναπτύξετε τις αλλαγές σας στον διακομιστή ανάπτυξης / QA, οπότε ακολουθεί ένα παράδειγμα διαδικασίας:

  1. Πιέστε τις αλλαγές στο Git
  2. Συνδεθείτε στο διακομιστή
  3. Δημιουργήστε ένα κοντέινερ Docker και εκτελέστε το
  4. Τραβήξτε τις αλλαγές στο διακομιστή, κατεβάστε όλες τις εξαρτήσεις (εγκατάσταση npm)
  5. Εκτελέστε τις δοκιμές για να βεβαιωθείτε ότι δεν έχει σπάσει τίποτα
  6. Χρησιμοποιήστε ένα εργαλείο όπως το ESLint / Sonar για να διασφαλίσετε την ποιότητα του κώδικα
  7. Συγχωνεύστε τον κωδικό εάν όλα είναι καλά

Με τη βοήθεια του CircleCI, μπορείτε να κάνετε αυτόματα όλες αυτές τις λειτουργίες. Μπορείτε να το ρυθμίσετε και να ρυθμίσετε τις παραμέτρους για να κάνετε όλες τις παραπάνω λειτουργίες όποτε κάνετε μια αλλαγή στο Git Θα απορρίψει την ώθηση εάν κάτι πάει στραβά, για παράδειγμα ένα τεστ που αποτυγχάνει.

Δεν θα μπω στις λεπτομέρειες του τρόπου ρύθμισης παραμέτρων του CircleCI, επειδή αυτό το άρθρο αφορά περισσότερο το "Γιατί;" κάθε εργαλείου. Αλλά αν σας ενδιαφέρει να μάθετε περισσότερα και να τα δείτε σε δράση, μπορείτε να δείτε αυτή τη σειρά σεμιναρίων.

συμπέρασμα

Ο κόσμος της JavaScript εξελίσσεται ραγδαία και νέα εργαλεία κερδίζουν δημοτικότητα κάθε χρόνο.

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

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

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