Raziskovalec AST za JavaScript

Kako raziskati AST kode JavaScript

1. Prilepi kodo v polje Koda JavaScript ali klikni Naloži primer, da začneš z manjšim modulom.
2. Izberi Vrsta vira: Modul (import/export, strogi način) za module ES ali Skript (klasičen) za običajne skripte, ki lahko uporabljajo funkcije nestrogega načina, na primer with.
3. Drevo se osveži trenutek po tem, ko nehaš tipkati. Z gumbom Razčleni ga osvežiš takoj.
4. V Sintaksno drevo z majhno puščico razširiš ali strneš vozlišče. S klikom na ime vozlišča v urejevalniku označiš ustrezno kodo. Plošča Izbrano vozlišče prikaže njegov tip, lastnost, ki ji pripada, obseg znakov, vrstico in stolpec, preproste lastnosti (ime, operator, surova vrednost …) in izvorno besedilo.
5. Deluje tudi v nasprotni smeri: klikni kamor koli v kodo, premakni kazalec s tipkovnico ali označi del kode, in najgloblje vozlišče, ki ga vsebuje, se v drevesu razširi in poudari.
6. Odpri JSON ESTree, da vidiš celotno drevo kot JSON, z možnostjo Vključi položaje (start, end, loc) ali brez nje, nato ga Kopiraj ali Prenesi JSON.

Števci prikazujejo število Vozlišča, Največja globina drevesa in število Stavki na vrhnji ravni.

Kaj je abstraktno sintaksno drevo?

Preden lahko izvajalnik JavaScript, linter ali pakirnik karkoli naredi s tvojo kodo, besedilo razčleni v drevo vozlišč. Vsako vozlišče ima type (VariableDeclaration, CallExpression, Identifier …) in podrejena vozlišča v poimenovanih lastnostih. Za total += size; dobiš ExpressionStatement, katerega expression je AssignmentExpression z operatorjem +=, levim identifikatorjem total in desnim identifikatorjem size. Oklepaji, podpičja in komentarji izginejo: drevo ohrani le strukturo, ki je pomembna, zato mu pravimo abstraktno.

Orodje uporablja Acorn, majhen in hiter razčlenjevalnik, na katerem temelji veliko orodij za JavaScript, z nastavitvijo ecmaVersion: "latest". Izhod sledi formatu ESTree, ki ga ustvarja tudi Espree (ESLint) in ga razume večina orodij za preoblikovanje kode. Natančno poznavanje tipov vozlišč je nujno, ko pišeš pravilo za ESLint, kodemod za Babel ali jscodeshift, vtičnik za Prettier ali kateri koli skript, ki analizira kodo.

Položaji, obsegi in izvoz JSON

Vsako vozlišče ima start in end, torej odmik prvega znaka in znaka za zadnjim znakom v izvorni kodi, ter objekt loc z vrsticami (od 1) in stolpci. V JSON se stolpci štejejo od 0, kakor v izhodu Acorna, plošča Izbrano vozlišče pa jih prikazuje od 1, kot večina urejevalnikov. Odstrani kljukico pri Vključi položaje (start, end, loc) za lažji JSON, ki ga je preprosteje primerjati med dvema različicama kode.

Nekaterih vrednosti ni mogoče zapisati v JSON: literali regularnih izrazov dobijo "value": null (lastnost regex ohrani vzorec in zastavice), literali BigInt pa so zapisani kot nizi, kot priporoča specifikacija ESTree.

Omejitve in zasebnost

Koda se razčleni v tvojem brskalniku in se nikoli ne izvede ali pošlje drugam: razčlenjevalnik besedilo le prebere. Vnos je omejen na milijon znakov. Zelo velika drevesa se izrisujejo sproti, po skupinah podrejenih vozlišč, JSON, ki je prevelik za predogled, pa lahko vseeno preneseš. JSX in TypeScript nista standardni JavaScript, zato ju Acorn javi kot sintaksni napaki.