JavaScript AST Explorer

Näin tutkit JavaScriptin AST:tä

1. Liitä koodisi kenttään JavaScript-koodi tai napsauta Lataa esimerkki, jos haluat aloittaa pienestä moduulista.
2. Valitse Lähdekoodin tyyppi: Moduuli (import/export, tiukka tila) ES-moduuleille tai Skripti (perinteinen) tavallisille skripteille, jotka voivat käyttää löyhän tilan ominaisuuksia, kuten with-lausetta.
3. Puu päivittyy hetki sen jälkeen, kun lopetat kirjoittamisen. Napsauta Jäsennä, jos haluat ajaa jäsennyksen heti.
4. Napsauta Syntaksipuu-näkymässä solmun pientä nuolta avataksesi tai sulkeaksesi sen. Napsauta solmun nimeä, niin vastaava koodi valitaan editorissa. Valittu solmu -paneeli näyttää solmun tyypin, ominaisuuden johon se kuuluu, merkkialueen, rivin ja sarakkeen, yksinkertaiset ominaisuudet (nimi, operaattori, raaka-arvo…) sekä solmun lähdekoodin.
5. Toimii myös toisinpäin: napsauta mitä tahansa kohtaa koodissa, siirrä kursoria näppäimistöllä tai valitse koodinpätkä. Syvin solmu, joka sisältää kohdan, avautuu ja korostuu puussa.
6. Avaa ESTree JSON nähdäksesi koko puun JSON-muodossa joko Sisällytä sijainnit (start, end, loc) -valinnalla tai ilman sitä. Sen jälkeen voit Kopioi-painikkeella kopioida tuloksen tai painaa Lataa JSON.

Laskurit näyttävät Solmut-määrän, puun Enimmäissyvyyden ja Ylätason lauseet.

Mikä on abstrakti syntaksipuu?

Ennen kuin JavaScript-moottori, linter tai bundleri voi tehdä koodillesi mitään, se jäsentää tekstin solmuista koostuvaksi puuksi. Jokaisella solmulla on type (VariableDeclaration, CallExpression, Identifier…) ja lapsisolmut nimetyissä ominaisuuksissa. Lauseesta total += size; syntyy ExpressionStatement, jonka expression on AssignmentExpression: operaattori on +=, left on tunniste total ja right tunniste size. Sulut, puolipisteet ja kommentit katoavat: puu säilyttää vain olennaisen rakenteen, ja siksi sitä sanotaan abstraktiksi.

Tämä työkalu käyttää Acornia, pientä ja nopeaa jäsennintä, jonka varassa toimivat monet JavaScript-työkalut. Asetuksena on ecmaVersion: "latest". Tuloste noudattaa ESTreetä, yhteistä muotoa, jota tuottaa myös Espree (ESLint) ja jota useimmat koodinmuunnostyökalut ymmärtävät. Tarkat solmutyypit on tunnettava, kun kirjoitat ESLint-sääntöä, Babel- tai jscodeshift-koodimuunnosta, Prettier-lisäosaa tai mitä tahansa koodia analysoivaa skriptiä.

Sijainnit, alueet ja JSON-vienti

Jokaisella solmulla on start ja end: ensimmäisen ja viimeisen merkin jälkeisen merkin sijainti lähdekoodissa. Lisäksi solmulla on loc-olio, jossa on rivit (alkaen 1:stä) ja sarakkeet. JSON-tulosteessa sarakkeet alkavat nollasta kuten Acornin tulosteessa, mutta Valittu solmu -paneeli näyttää ne ykkösestä alkaen, kuten useimmat editorit. Poista Sisällytä sijainnit (start, end, loc) -valinta, jos haluat kevyemmän JSONin, jota on helpompi vertailla koodin kahden version välillä.

Muutamia arvoja ei voi kirjoittaa JSONina: säännöllisten lausekkeiden literaaleille tulee "value": null (regex-ominaisuus säilyttää kuvion ja liput), ja BigInt-literaalit kirjoitetaan merkkijonoina ESTree-määrityksen suosituksen mukaisesti.

Rajat ja yksityisyys

Koodi jäsennetään selaimessasi. Sitä ei suoriteta eikä lähetetä minnekään: jäsennin vain lukee tekstin. Syötteen enimmäispituus on miljoona merkkiä. Hyvin suuret puut piirretään tarpeen mukaan, yksi lapsijoukko kerrallaan, ja liian suuren JSONin voi silti ladata tiedostona. JSX ja TypeScript eivät ole tavallista JavaScriptiä, joten Acorn ilmoittaa niistä syntaksivirheen.