Utilia
Kategooriad ▾
Keel: et ▾

JavaScripti AST-uurija

Kleebi JavaScripti kood ja uuri selle abstraktset süntaksipuud (ESTree, Acorn) brauseris. Klõpsa sõlmedel, et näha koodi, ja ekspordi AST JSON-ina.

Lähtekoodi tüüp
Sõlmi
–
Maksimaalne sügavus
–
Ülemise taseme lauseid
–
Süntaksipuu

Klõpsa sõlmel, et valida selle kood. Klõpsa koodis või liiguta kursorit, et leida vastav sõlm.

    Valitud sõlm

    Vali puus sõlm või klõpsa koodis.

    ESTree JSON

    Kuidas JavaScripti AST-i uurida

    1. Kleebi oma kood väljale JavaScripti kood või klõpsa nuppu Laadi näide, et alustada väikesest moodulist.
    2. Vali Lähtekoodi tüüp: Moodul (import/export, range režiim) ES-moodulite jaoks või Skript (klassikaline) tavaliste skriptide jaoks, mis võivad kasutada vabamat režiimi, näiteks with lauset.
    3. Puu uueneb hetk pärast seda, kui oled kirjutamise lõpetanud. Nupp Analüüsi käivitab analüüsi kohe.
    4. Klõpsa Süntaksipuu vaates väikesel noolel, et sõlme laiendada või ahendada. Sõlme nimel klõpsates valitakse redaktoris vastav kood; paneelil Valitud sõlm näed sõlme tüüpi, omadust, kuhu see kuulub, märgivahemikku, rida ja veergu, lihtsaid omadusi (nimi, operaator, algväärtus jne) ja sõlme lähtekoodi.
    5. See töötab ka vastupidi: klõpsa koodis suvalises kohas, liiguta kursorit klaviatuuriga või vali koodilõik ning puus avatakse ja tõstetakse esile sügavaim sõlm, mis selle sisaldab.
    6. Ava ESTree JSON, et näha kogu puud JSON-ina, soovi korral koos valikuga Lisa asukohad (start, end, loc), ning seejärel Kopeeri see või Laadi JSON alla.

    Loendurid näitavad Sõlmi, puu Maksimaalset sügavust ja Ülemise taseme lauseid.

    Mis on abstraktne süntaksipuu?

    Enne kui JavaScripti mootor, linter või komplekteerija saab sinu koodiga midagi peale hakata, analüüsib see teksti sõlmede puuks. Igal sõlmel on type (VariableDeclaration, CallExpression, Identifier jne) ja alamsõlmed nimega omadustes. Lause total += size; annab ExpressionStatement-sõlme, mille expression on AssignmentExpression operaatoriga +=, vasakul identifikaator total ja paremal identifikaator size. Sulud, semikoolonid ja kommentaarid kaovad: puusse jääb alles ainult oluline struktuur, seepärast nimetataksegi seda abstraktseks.

    Tööriist kasutab Acorni, väikest ja kiiret parserit, millel põhinevad paljud JavaScripti tööriistad, seadistusega ecmaVersion: "latest". Väljund järgib ESTree’d, ühist vormingut, mida loob ka Espree (ESLint) ja mida mõistab enamik koodi teisendavaid tööriistu. Täpsete sõlmetüüpide tundmine on hädavajalik, kui kirjutad ESLinti reeglit, Babeli või jscodeshifti koodimuudatust, Prettieri pistikprogrammi või mis tahes skripti, mis koodi analüüsib.

    Asukohad, vahemikud ja JSON-eksport

    Igal sõlmel on start ja end, mis on esimese ja viimasele järgneva märgi nihked lähtekoodis, ning loc-objekt ridade (alates 1-st) ja veergudega. JSON-is algavad veerud nullist nagu Acorni väljundis; paneel Valitud sõlm näitab neid alates ühest, nagu enamik redaktoreid. Võta märge maha valikult Lisa asukohad (start, end, loc), et saada kergem JSON, mida on lihtsam kahe koodiversiooni vahel võrrelda.

    Mõnda väärtust ei saa JSON-ina kirjutada: regulaaravaldise literaalidel on "value": null (muster ja lipud jäävad omadusse regex) ning BigInt-literaalid kirjutatakse stringidena, nagu ESTree’i spetsifikatsioon soovitab.

    Piirangud ja privaatsus

    Kood analüüsitakse sinu brauseris ning seda ei käivitata ega saadeta kuhugi: parser loeb ainult teksti. Sisend on piiratud ühe miljoni märgiga. Väga suuri puid joonistatakse vajaduse korral, alamsõlmi partiidena, ja liiga suure eelvaate jaoks JSON-i saab ikkagi alla laadida. JSX ja TypeScript ei ole standardne JavaScript, seega Acorn teatab neist süntaksivigadena.

    Korduma kippuvad küsimused

    Miks saan teate „Süntaksiviga real 1, veerus 1“?

    Kood ei ole valitud lähtekoodi tüübi jaoks korrektne JavaScript. Teade annab rea, veeru ja Acorni selgituse. Sagedane põhjus on import või export siis, kui valitud on Skript (klassikaline), või TypeScripti tüübimärgendid ja JSX, mida Acorn ei analüüsi.

    Mis vahe on moodulil ja skriptil?

    Moodulid on alati range režiimiga, lubavad import-i, export-i ja ülemise taseme await-i ning keelavad with lause ja kaheksandsüsteemi literaalid. Skriptid on klassikaline <script> režiim. Valik salvestatakse puus ka Program-sõlme omadusse sourceType.

    Kas koodi käivitatakse?

    Ei. Analüüs muudab teksti ainult andmestruktuuriks. Midagi ei hinnata, ühtegi funktsiooni ei kutsuta ja võrgupäringuid ei tehta, seega on turvaline uurida ka mitteusaldusväärset või isegi pahatahtlikku koodi.

    Kas kommentaarid on puus näha?

    Ei. ESTree ei seo kommentaare sõlmedega, seega need ei kuulu puusse, kuid paneelil Valitud sõlm näed neid sõlme lähtekoodis.

    Millist JavaScripti versiooni toetatakse?

    Acorn on seatud uusimale ECMAScripti versioonile, mida ta tunneb. See hõlmab valikulist aheldamist, nullish-ühendamist, BigInt-i, klassiväljasid ja privaatmeetodeid, ülemise taseme await-i, regulaaravaldise lippe nagu v ning muud uuemat süntaksit.

    Seotud tööriistad