Πώς να ρυθμίσετε γρήγορα το περιβάλλον σας ES6

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

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

ES5 έως ES6

Για να γράψουμε τον κώδικα ES6, πρέπει να εγκαταστήσουμε κάτι που μπορεί να τον μεταγλωττίσει στο ES5. Θα χρησιμοποιούμε Rollup,. Συγκεντρώνει μικρά κομμάτια κώδικα σε κάτι μεγαλύτερο και πιο περίπλοκο, όπως βιβλιοθήκη ή εφαρμογή. Αυτό σας επιτρέπει να χρησιμοποιήσετε το OOP (αντικειμενοστραφής προγραμματισμός) που κάνει τον κώδικά σας να φαίνεται καθαρότερος, δομημένος και αρθρωτός, μαζί με άλλες χρήσιμες λειτουργίες. Για να διευκρινιστεί, το JS είναι αντικειμενοστρεφές, αλλά δεν είναι μια αντικειμενοστρεφής γλώσσα που βασίζεται στην τάξη, όπως Java, C ++, C #, κλπ, μέχρι την κυκλοφορία του ES6.

Διαφορετικά, το πιο κοντινό που μπορείτε να φτάσετε στο OOP για να συμπεριλάβετε τάξεις με ES5 είναι να χρησιμοποιήσετε το IIFE (Άμεση επίκληση της έκφρασης λειτουργίας) ή να εγκαταστήσετε εξωτερικές βιβλιοθήκες. Γιατί όμως να βασίζεστε σε εξωτερικούς πόρους όταν έχετε μια βασική γλώσσα που υποστηρίζει το πρότυπο OOP; Πολλές από τις πιο ευρέως χρησιμοποιούμενες γλώσσες προγραμματισμού το υποστηρίζουν ήδη (όπως C ++, Java, C # και PHP).

Γιατί ES6;

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

Για παράδειγμα, στο HTML μου, έχω ένα scriptπου φορτώνει main.js, και στο εσωτερικό main.js, φορτώνω πολλά JSαρχεία χρησιμοποιώντας importκαι exportδηλώσεις. Αντί να έχω πολλά σενάρια στο αρχείο HTML μου, χρειάζομαι μόνο ένα (λιγότερος κωδικός).

Προαπαιτούμενα

  • Linux ή macOS (με βάση το Debian)
  • Εγκατεστημένο NPM (διαχειριστής πακέτων)
  • Βασικές γνώσεις CLI

Βήμα πρώτο: Εγκατάσταση συνάθροισης

Για να το χρησιμοποιήσουμε Rollupπρέπει να το εγκαταστήσουμε παγκοσμίως. Θυμηθείτε να το χρησιμοποιήσετε sudo. Αυτό σας επιτρέπει να έχετε πρόσβαση σε Rollupεντολές σε οποιοδήποτε έργο εργάζεστε.

Βήμα δεύτερο: Δομή αρχείων

Αφού εγκαταστήσετε Rollupπαγκοσμίως, το επόμενο βήμα είναι να ρυθμίσετε τη δομή του φακέλου και να δημιουργήσετε δύο φακέλους srcκαι destμέσα στο έργο σας. Επιπλέον, δημιουργήστε index.html.

  • src → αρχεία ES6 (Πού θα γράψετε τον κωδικό)
  • dest → Δημιουργεί ένα ES5 (Συγκεντρωμένες εκδόσεις του ES6)

Λάβετε υπόψη ότι το bundle.jsαρχείο δημιουργείται αυτόματα όταν Rollupεκτελείται η εντολή. Θα το συζητήσουμε αργότερα.

Βήμα τρίτο: Δημιουργήστε ένα αρχείο διαμόρφωσης

Δημιουργήστε ένα νέο αρχείο και ονομάστε το rollup.config.js. Στη συνέχεια, προσθέστε αυτόν τον κωδικό:

Βεβαιωθείτε ότι η διαδρομή προέλευσης inputκαι outputπροέλευσης είναι σωστή με τη δομή του φακέλου σας και ότι αυτό το αρχείο τοποθετείται στον κύριο φάκελο.

Βήμα τέσσερα: Φόρτωση του αρχείου σεναρίου σε HTML

Είμαστε σχεδόν έτοιμοι, αλλά πρώτα πρέπει να συνδεθούμε με το σωστό αρχείο προέλευσης στο πρότυπο HTML. Αυτό θα φορτώσει το αρχείο ES5 που έχει μεταγλωττιστεί από το ES6.

Βήμα πέντε: Ρύθμιση αρχείων JS

Για να επαληθεύσουμε ότι η Rollupεντολή λειτουργεί, πρέπει να ρυθμίσουμε μια απλή δομή OOP. Θα δημιουργήσουμε ένα car.jsμάθημα, και default exportθα το κάνει main.js.

Λάβετε υπόψη ότι αυτό το αρχείο εξάγει μια νέα παρουσία της car.jsκλάσης και αυτό επιτρέπει την άμεση πρόσβαση στις μεθόδους αντί να γράφετε const car = new Car()στην main.jsτάξη.

Δεδομένου ότι είμαι τεμπέλης μηχανικός λογισμικού, η αντιμετώπιση μερικών επιπλέον χαρακτήρων κώδικα είναι χρονοβόρα :)

Στη συνέχεια, εισαγάγετε την car.jsκλάση main.jsγια να αποκτήσετε πρόσβαση στη μέθοδο type().

Βήμα έξι: Μεταγλώττιση ES6 σε ES5

Για να εκτελέσετε το αρχείο διαμόρφωσης που δημιουργήσαμε, εκτελέστε αυτήν την εντολή $ rollup -cή $ rollup --config- και τα δύο είναι τα ίδια.

Αφού εκτελέσετε μία από τις εντολές, ανοίξτε index.htmlένα πρόγραμμα περιήγησης και, στη συνέχεια, ανοίξτε το επιθεώρηση ( ctrl + shift + I) στο πρόγραμμα περιήγησης και μεταβείτε στο console. Εάν δείτε το κείμενο "Tesla Model S", αυτό σημαίνει ότι όλα λειτουργούσαν με επιτυχία.

Λάβετε υπόψη ότι κάθε φορά που κάνετε αλλαγές με αρχεία ES6, πρέπει να το ενημερώσετε εκτελώντας την εντολή.

Προαιρετικός

Εφόσον έχετε εγκαταστήσει Rollupπαγκοσμίως, μπορείτε να μεταγλωττίσετε το ES6 χωρίς να χρειάζεται να έχετε το αρχείο rollup.config.js. Κάνει ακριβώς το ίδιο πράγμα:

$ rollup src/main.js — o dest/bundle.js — f iife

Προσωπικά, θα συνιστούσα την εκτέλεση $ rollup -cόπως φαίνεται στο βήμα έξι, καθώς απαιτείται λιγότερος κώδικας. Να θυμάστε ότι πρέπει να έχετε rollup.config.js συμπεριλάβει το αρχείο κατά την εκτέλεση αυτής της εντολής.

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