JavaScript AST felfedező

Hogyan fedezd fel egy JavaScript AST-jét

1. Illeszd be a kódot a JavaScript-kód mezőbe, vagy kattints a Példa betöltése gombra, hogy egy kis modulból indulhass.
2. Válaszd ki a Forrás típusa beállítást: a Modul (import/export, szigorú mód) az ES-modulokhoz való, a Szkript (klasszikus) pedig a hagyományos szkriptekhez, amelyek használhatnak laza módú elemeket, például a with utasítást.
3. A fa röviddel azután frissül, hogy abbahagyod a gépelést. Az Elemzés gombbal azonnal futtathatod.
4. A Szintaxisfa nézetben a kis nyílra kattintva kinyithatsz vagy összecsukhatsz egy csomópontot. Ha egy csomópont nevére kattintasz, a szerkesztőben kijelölődik a hozzá tartozó kód. A Kijelölt csomópont panel megmutatja a típusát, azt a tulajdonságot, amelyhez tartozik, a karaktertartományát, a sorát és oszlopát, az egyszerű tulajdonságait (név, operátor, nyers érték…), valamint a forrásszövegét.
5. Fordítva is működik: kattints bárhová a kódban, mozgasd a kurzort a billentyűzettel, vagy jelölj ki egy kódrészletet, és a fában kinyílik, illetve kiemelődik a legmélyebb csomópont, amely tartalmazza.
6. Nyisd meg az ESTree JSON részt, ha a teljes fát JSON-ként szeretnéd látni a Pozíciók mellékelése (start, end, loc) opcióval vagy anélkül, majd Másolás vagy JSON letöltése.

A számlálók megmutatják a Csomópontok számát, a fa Maximális mélység értékét és a Legfelső szintű utasítások számát.

Mi az az absztrakt szintaxisfa?

Mielőtt egy JavaScript-motor, egy linter vagy egy bundler bármit kezdhetne a kóddal, a szöveget csomópontok fájává elemzi. Minden csomópontnak van egy type értéke (VariableDeclaration, CallExpression, Identifier…), a gyermekcsomópontok pedig elnevezett tulajdonságokban találhatók. A total += size; sorból egy ExpressionStatement lesz, amelynek expression tulajdonsága egy AssignmentExpression a += operátorral, a left oldalon a total, a right oldalon a size azonosítóval. A zárójelek, a pontosvesszők és a megjegyzések eltűnnek: a fa csak a lényeges szerkezetet őrzi meg, ezért nevezik absztraktnak.

Ez az eszköz az Acorn elemzőt használja, amely számos JavaScript-eszköz mögött álló kicsi és gyors parser, ecmaVersion: "latest" beállítással. A kimenet az ESTree formátumot követi, amelyet az Espree (az ESLint elemzője) is előállít, és a legtöbb kódátalakító eszköz érti. A pontos csomóponttípusok ismerete nélkülözhetetlen, ha ESLint-szabályt, Babel- vagy jscodeshift-átalakítót, Prettier-bővítményt vagy bármilyen kódelemző szkriptet írsz.

Pozíciók, tartományok és JSON-exportálás

Minden csomópont tartalmaz egy start és egy end értéket: az első karakter és az utolsó utáni karakter eltolását a forrásban, valamint egy loc objektumot a sorokkal (1-től) és az oszlopokkal. A JSON-ban az oszlopok 0-tól indulnak, ahogy az Acorn kimenetében, a Kijelölt csomópont panel viszont 1-től mutatja őket, mint a legtöbb szerkesztő. Ha kikapcsolod a Pozíciók mellékelése (start, end, loc) opciót, könnyebb JSON-t kapsz, amelyet egyszerűbb összehasonlítani a kód két változata között.

Néhány érték nem írható le JSON-ként: a reguláris kifejezés literálok "value": null értéket kapnak (a regex tulajdonság megőrzi a mintát és a flageket), a BigInt literálok pedig szövegként szerepelnek, ahogy az ESTree specifikáció javasolja.

Korlátok és adatvédelem

A kódot a böngésződben elemzi az eszköz, soha nem futtatja le, és nem is küldi el sehová: az elemző csak a szöveget olvassa. A bemenet legfeljebb egymillió karakter lehet. A nagyon nagy fákat igény szerint jeleníti meg, egyszerre egy gyermekcsoportot, a túl nagy JSON pedig előnézet nélkül is letölthető. A JSX és a TypeScript nem szabványos JavaScript, ezért az Acorn szintaxishibaként jelzi őket.