Utilia
Kategorije ▾
Jezik: sr ▾

JavaScript AST pregled

Nalepi JavaScript i istraži njegovo apstraktno sintaksno stablo (ESTree, Acorn) u pregledaču. Klikni čvor da vidiš kod i izvezi AST kao JSON.

Tip izvora
Čvorovi
–
Najveća dubina
–
Naredbe na vrhu
–
Sintaksno stablo

Klikni na čvor da izabereš njegov kod. Klikni ili pomeri kursor u kodu da pronađeš njegov čvor.

    Izabrani čvor

    Izaberi čvor u stablu ili klikni u kod.

    ESTree JSON

    Kako da istražiš JavaScript AST

    1. Nalepi kod u polje JavaScript kod ili klikni Učitaj primer da počneš od malog modula.
    2. Izaberi Tip izvora: Modul (import/export, strogi režim) za ES module ili Skript (klasičan) za obične skripte koje mogu da koriste mogućnosti nestrogog režima, poput naredbe with.
    3. Stablo se osvežava trenutak nakon što prestaneš da kucaš. Klikni Parsiraj da ga pokreneš odmah.
    4. U Sintaksno stablo klikni na malu strelicu da raširiš ili skupiš čvor. Klikni na naziv čvora da u uređivaču označiš odgovarajući kod. Panel Izabrani čvor prikazuje tip čvora, svojstvo kojem pripada, opseg znakova, red i kolonu, jednostavna svojstva (ime, operator, izvorna vrednost…) i njegov izvorni tekst.
    5. Radi i u suprotnom smeru: klikni bilo gde u kodu, pomeri kursor tastaturom ili označi deo koda, pa se najdublji čvor koji ga sadrži raširi i istakne u stablu.
    6. Otvori ESTree JSON da vidiš celo stablo kao JSON, sa ili bez opcije Uključi pozicije (start, end, loc), pa ga Kopiraj ili Preuzmi JSON.

    Brojači prikazuju broj čvorova (Čvorovi), Najveću dubinu stabla i broj naredbi na vrhu (Naredbe na vrhu).

    Šta je apstraktno sintaksno stablo?

    Pre nego što JavaScript mašina, linter ili bandler mogu bilo šta da urade s tvojim kodom, oni tekst parsiraju u stablo čvorova. Svaki čvor ima type (VariableDeclaration, CallExpression, Identifier…) i podređene čvorove sačuvane u imenovanim svojstvima. Za total += size; dobijaš ExpressionStatement čiji je expression jedan AssignmentExpression sa operatorom +=, identifikatorom total levo i identifikatorom size desno. Zagrade, tačke sa zarezom i komentari nestaju: stablo čuva samo strukturu koja je važna, zbog čega se i zove apstraktno.

    Ovaj alat koristi Acorn, mali i brz parser koji stoji iza mnogih JavaScript alata, sa podešavanjem ecmaVersion: "latest". Izlaz prati ESTree, zajednički format koji proizvodi i Espree (ESLint) i koji razume većina alata za transformaciju koda. Poznavanje tačnih tipova čvorova neophodno je kad pišeš ESLint pravilo, Babel ili jscodeshift codemod, Prettier dodatak ili bilo koju skriptu koja analizira kod.

    Pozicije, opsezi i izvoz u JSON

    Svaki čvor ima start i end, pomake prvog i znaka posle poslednjeg znaka u izvornom kodu, kao i objekat loc sa redovima (od 1) i kolonama. U JSON-u kolone počinju od 0, kao u Acornovom izlazu, a panel Izabrani čvor ih prikazuje od 1, kao većina uređivača. Isključi Uključi pozicije (start, end, loc) da dobiješ lakši JSON koji je lakše uporediti između dve verzije koda.

    Neke vrednosti ne mogu da se zapišu u JSON: literali regularnih izraza dobijaju "value": null (svojstvo regex čuva obrazac i oznake), a BigInt literali se upisuju kao stringovi, kako preporučuje ESTree specifikacija.

    Ograničenja i privatnost

    Kod se parsira u tvom pregledaču i nikada se ne izvršava niti šalje bilo kuda: parser samo čita tekst. Unos je ograničen na milion znakova. Veoma velika stabla se iscrtavaju po potrebi, po jedna grupa potomaka, a JSON koji je prevelik za pregled i dalje možeš da preuzmeš. JSX i TypeScript nisu standardni JavaScript, pa ih Acorn prijavljuje kao sintaksne greške.

    Česta pitanja

    Zašto dobijam „Sintaksna greška u redu 1, koloni 1“?

    Kod nije ispravan JavaScript za izabrani tip izvora. Poruka navodi red, kolonu i Acornovo objašnjenje. Čest uzrok je import ili export kad je izabran Skript (klasičan), ili TypeScript anotacije i JSX, koje Acorn ne parsira.

    Koja je razlika između modula i skripta?

    Moduli su uvek u strogom režimu, dozvoljavaju import, export i await na vrhu fajla, a zabranjuju with i oktalne literale. Skriptovi su klasičan <script> režim. Stablo takođe beleži izbor u svojstvu sourceType čvora Program.

    Da li se kod izvršava?

    Ne. Parsiranje samo pretvara tekst u strukturu podataka. Ništa se ne izračunava, nijedna funkcija se ne poziva i ne šalje se nikakav mrežni zahtev, pa je bezbedno pregledati nepouzdan ili čak zlonameran kod.

    Da li se komentari prikazuju u stablu?

    Ne. ESTree ne vezuje komentare za čvorove, pa nisu deo stabla, ali ih i dalje možeš videti u izvornom tekstu čvora u panelu Izabrani čvor.

    Koja verzija JavaScripta je podržana?

    Acorn je podešen na najnoviju verziju ECMAScripta koju poznaje, što obuhvata opciono ulančavanje, nullish coalescing, BigInt, polja klasa i privatne metode, await na vrhu fajla, oznake regularnih izraza poput v i drugu noviju sintaksu.

    Srodni alati