Μορφοποίηση JavaScript online
Επικολλήστε ένα ελαχιστοποιημένο αρχείο .js, ένα πακέτο webpack ή ένα απόσπασμα σε μία γραμμή και αποκτήστε JavaScript με σωστές εσοχές στο δεξί πλαίσιο. Η μορφοποίηση γίνεται από το Prettier μέσα στο πρόγραμμα περιήγησής σας, χωρίς να μεταφορτώνεται τίποτα.
Γιατί η JavaScript καταλήγει δυσανάγνωστη
Κάθε σύγχρονη διαδικασία παραγωγής ελαχιστοποιεί τη JavaScript πριν τη διανομή της. Τα Terser, esbuild, SWC και παρόμοια εργαλεία αφαιρούν κενά και σχόλια, μετονομάζουν τοπικές μεταβλητές και συναρτήσεις σε μεμονωμένα γράμματα, μετατρέπουν ένθετα μπλοκ σε αλυσίδες εκφράσεων και ενώνουν ολόκληρη την εφαρμογή σε ένα ή δύο αρχεία. Μια εφαρμογή React που ξεκίνησε με τριακόσια ευανάγνωστα αρχεία πηγαίου κώδικα φτάνει στο πρόγραμμα περιήγησης ως μία γραμμή μερικών εκατοντάδων kilobyte. Ο κώδικας εξακολουθεί να λειτουργεί κανονικά, αλλά όταν χρειαστεί να τον διαβάσετε, βρίσκεστε μπροστά σε έναν τοίχο κειμένου χωρίς ορατή δομή.
Τι επαναφέρει πραγματικά η μορφοποίηση
Η μορφοποίηση ενός πακέτου επαναφέρει όσα κάνουν τον κώδικα εύκολο στην περιήγηση. Οι εντολές επιστρέφουν σε ξεχωριστές γραμμές, οπότε ένα ίχνος στοίβας που δείχνει τη γραμμή 1, στήλη 24815 αντιστοιχεί πλέον σε ένα σημείο που μπορείτε να βρείτε. Η ένθεση γίνεται ορατή και βλέπετε πού αρχίζει και τελειώνει μια συνάρτηση, ποιον κλάδο ελέγχει μια συνθήκη και πώς συνδέονται οι διαδοχικές κλήσεις callback. Οι συμβολοσειρές, οι διευθύνσεις URL και τα ονόματα των endpoints ξεχωρίζουν εύκολα, κάτι που συνήθως χρειάζεστε όταν ελέγχετε ένα ξένο script αντί να διορθώνετε τον δικό σας κώδικα.
Υποστηρίζεται σύγχρονη σύνταξη
Ο μορφοποιητής αναλύει τη σημερινή JavaScript, όχι ένα περιορισμένο υποσύνολο παλιότερης εποχής. Συναρτήσεις βέλους, κλάσεις, async και await, generators, optional chaining, nullish coalescing, template literals, αποδόμηση, σύνταξη spread, δυναμικά imports και ES modules μορφοποιούνται σωστά. Υποστηρίζεται επίσης JSX, κάτι χρήσιμο όταν εξετάζετε ένα στοιχείο React στο οποίο αυτή η σύνταξη δεν έχει μετασχηματιστεί κατά τη μεταγλώττιση. Επειδή την εργασία αναλαμβάνει το Prettier, το αποτέλεσμα ακολουθεί τις ίδιες συμβάσεις που εφαρμόζει ήδη ο επεξεργαστής σας στα δικά σας αρχεία.
Ποιοι είναι οι περιορισμοί
Η αποελαχιστοποίηση δεν ανακτά τη χαμένη πληροφορία του πηγαίου κώδικα. Ο ελαχιστοποιητής διέγραψε τα σχόλια και μετονόμασε τις μεταβλητές, και κανένας μορφοποιητής δεν μπορεί να μαντέψει ότι η μεταβλητή n ονομαζόταν κάποτε remainingRetries. Αν το έργο έχει δημοσιεύσει source map, φορτώστε το στα εργαλεία ανάπτυξης του προγράμματος περιήγησης, καθώς είναι ο μόνος δρόμος προς το πραγματικό πρωτότυπο. Αν, πάλι, ο κώδικας έχει γίνει σκόπιμα δυσνόητος με obfuscation και δεν έχει απλώς ελαχιστοποιηθεί, περιμένετε ευανάγνωστη δομή, αλλά όχι απαραίτητα κατανοητή πρόθεση.
Συχνές ερωτήσεις
Μπορεί να μορφοποιήσει πακέτο webpack ή Vite;
Ναι. Επικολλήστε το πακέτο ή ανοίξτε το αρχείο με την Επιλογή αρχείου και θα μορφοποιηθεί όπως κάθε άλλο αρχείο JavaScript. Τα μεγάλα πακέτα χρειάζονται μερικά δευτερόλεπτα επειδή η επεξεργασία γίνεται στον δικό σας υπολογιστή. Μετά την προσθήκη εσοχών, η δομή των modules είναι ευδιάκριτη.
Αναιρεί το obfuscation της JavaScript;
Μορφοποιεί σκόπιμα δυσνόητο κώδικα και διευκολύνει σημαντικά την ανάγνωσή του, αλλά δεν αναιρεί το ίδιο το obfuscation. Οι κωδικοποιημένες συμβολοσειρές, η τεχνητή ροή ελέγχου και ο σκόπιμα πρόσθετος ανενεργός κώδικας παραμένουν όπως ήταν.
Μπορεί να χαλάσει τον κώδικά μου;
Ο μορφοποιητής επιδιώκει να διατηρεί τη συμπεριφορά της JavaScript εφαρμόζοντας συνεπές στυλ. Μπορεί να αλλάξει σημεία στίξης, εισαγωγικά και διάταξη, επομένως το αποτέλεσμα δεν είναι αντίγραφο byte προς byte. Κρατήστε το αρχικό αρχείο, ελέγξτε το αποτέλεσμα και εκτελέστε τις δοκιμές του έργου πριν χρησιμοποιήσετε ένα τροποποιημένο ή μορφοποιημένο πακέτο σε παραγωγή.