Εξερευνητής AST JavaScript

Πώς να εξερευνήσετε το AST ενός κώδικα JavaScript

1. Επικολλήστε τον κώδικά σας στο πεδίο Κώδικας JavaScript ή πατήστε Φόρτωση παραδείγματος για να ξεκινήσετε από μια μικρή λειτουργική μονάδα.
2. Επιλέξτε τον Τύπο πηγαίου κώδικα: Λειτουργική μονάδα (import/export, αυστηρή λειτουργία) για ενότητες ES ή Σενάριο (κλασικό) για απλά σενάρια που μπορεί να χρησιμοποιούν χαρακτηριστικά μη αυστηρής λειτουργίας, όπως το with.
3. Το δέντρο ενημερώνεται λίγο αφότου σταματήσετε να πληκτρολογείτε. Πατήστε Ανάλυση για άμεση εκτέλεση.
4. Στο Συντακτικό δέντρο, κάντε κλικ στο μικρό βέλος για να αναπτύξετε ή να συμπτύξετε έναν κόμβο. Κάντε κλικ στο όνομα ενός κόμβου για να επιλεγεί ο αντίστοιχος κώδικας στον επεξεργαστή. Ο πίνακας Επιλεγμένος κόμβος εμφανίζει τον τύπο του, την ιδιότητα στην οποία ανήκει, το εύρος χαρακτήρων, τη γραμμή και τη στήλη, τις απλές ιδιότητές του (όνομα, τελεστής, τιμή…) και τον πηγαίο κώδικά του.
5. Λειτουργεί και αντίστροφα: κάντε κλικ οπουδήποτε στον κώδικα, μετακινήστε τον δρομέα με το πληκτρολόγιο ή επιλέξτε ένα κομμάτι κώδικα και ο βαθύτερος κόμβος που το περιέχει αναπτύσσεται και επισημαίνεται στο δέντρο.
6. Ανοίξτε το JSON ESTree για να δείτε ολόκληρο το δέντρο ως JSON, με ή χωρίς Συμπερίληψη θέσεων (start, end, loc), και μετά πατήστε Αντιγραφή ή Λήψη JSON.

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

Τι είναι το αφηρημένο συντακτικό δέντρο;

Πριν μια μηχανή JavaScript, ένας linter ή ένας bundler κάνει οτιδήποτε με τον κώδικά σας, αναλύει το κείμενο σε ένα δέντρο κόμβων. Κάθε κόμβος έχει έναν type (VariableDeclaration, CallExpression, Identifier…) και θυγατρικούς κόμβους που αποθηκεύονται σε ονομασμένες ιδιότητες. Για το total += size; προκύπτει ένα ExpressionStatement του οποίου το expression είναι ένα AssignmentExpression με τελεστή +=, αριστερό αναγνωριστικό total και δεξί αναγνωριστικό size. Οι παρενθέσεις, τα semicolons και τα σχόλια εξαφανίζονται: το δέντρο κρατά μόνο τη δομή που μετράει, και γι’ αυτό λέγεται «αφηρημένο».

Το εργαλείο χρησιμοποιεί τον Acorn, τον μικρό και γρήγορο αναλυτή που βρίσκεται πίσω από πολλά εργαλεία JavaScript, με ecmaVersion: "latest". Η έξοδος ακολουθεί το ESTree, την κοινή μορφή που παράγει και ο Espree (ESLint) και καταλαβαίνουν τα περισσότερα εργαλεία μετασχηματισμού κώδικα. Η γνώση των ακριβών τύπων κόμβων είναι απαραίτητη όταν γράφετε έναν κανόνα ESLint, ένα codemod για Babel ή jscodeshift, ένα πρόσθετο Prettier ή οποιοδήποτε σενάριο αναλύει κώδικα.

Θέσεις, εύρη και εξαγωγή σε JSON

Κάθε κόμβος έχει τα start και end, δηλαδή τις θέσεις του πρώτου και του επόμενου του τελευταίου χαρακτήρα στον πηγαίο κώδικα, καθώς και ένα αντικείμενο loc με γραμμές (από το 1) και στήλες. Στο JSON οι στήλες ξεκινούν από το 0, όπως στην έξοδο του Acorn. Ο πίνακας Επιλεγμένος κόμβος τις εμφανίζει από το 1, όπως οι περισσότεροι επεξεργαστές. Αποεπιλέξτε το Συμπερίληψη θέσεων (start, end, loc) για να πάρετε ελαφρύτερο JSON, που συγκρίνεται ευκολότερα ανάμεσα σε δύο εκδόσεις του κώδικα.

Ορισμένες τιμές δεν μπορούν να γραφτούν σε JSON: τα literals κανονικών εκφράσεων παίρνουν "value": null (η ιδιότητα regex κρατά το μοτίβο και τις σημαίες) και τα literals BigInt γράφονται ως συμβολοσειρές, όπως συνιστά η προδιαγραφή ESTree.

Όρια και απόρρητο

Ο κώδικας αναλύεται στο πρόγραμμα περιήγησής σας και δεν εκτελείται ποτέ ούτε στέλνεται οπουδήποτε: ο αναλυτής απλώς διαβάζει το κείμενο. Η είσοδος περιορίζεται σε ένα εκατομμύριο χαρακτήρες. Τα πολύ μεγάλα δέντρα εμφανίζονται κατά απαίτηση, μια παρτίδα θυγατρικών κάθε φορά, και ένα JSON που είναι πολύ μεγάλο για προεπισκόπηση μπορεί πάντα να ληφθεί. Τα JSX και TypeScript δεν είναι τυπική JavaScript, επομένως ο Acorn τα αναφέρει ως συντακτικά σφάλματα.