Explorator AST JavaScript

Cum explorezi AST-ul unui cod JavaScript

1. Lipește codul în Cod JavaScript sau apasă Încarcă exemplul pentru a porni de la un mic modul.
2. Alege Tipul de sursă: Modul (import/export, mod strict) pentru module ES sau Script (clasic) pentru scripturi obișnuite, care pot folosi funcții din modul nestrict, precum with.
3. Arborele se actualizează la scurt timp după ce nu mai scrii. Apasă Analizează ca să rulezi imediat analiza.
4. În Arbore sintactic, fă clic pe săgeata mică pentru a extinde sau a restrânge un nod. Fă clic pe numele unui nod pentru a selecta codul corespunzător din editor; panoul Nod selectat arată tipul nodului, proprietatea din care face parte, intervalul de caractere, linia și coloana, proprietățile simple (nume, operator, valoare brută…) și textul sursă.
5. Funcționează și invers: fă clic oriunde în cod, mută cursorul de la tastatură sau selectează o bucată de cod, iar cel mai adânc nod care o conține este extins și evidențiat în arbore.
6. Deschide JSON ESTree pentru a vedea arborele complet ca JSON, cu sau fără Include pozițiile (start, end, loc), apoi Copiază-l sau apasă Descarcă JSON.

Contoarele arată numărul de Noduri, Adâncimea maximă a arborelui și numărul de Instrucțiuni de nivel superior.

Ce este un arbore sintactic abstract?

Înainte ca un motor JavaScript, un linter sau un bundler să facă ceva cu codul tău, textul este transformat într-un arbore de noduri. Fiecare nod are un type (VariableDeclaration, CallExpression, Identifier…) și noduri copil, păstrate în proprietăți cu nume. Pentru total += size; obții un ExpressionStatement al cărui expression este un AssignmentExpression cu operatorul +=, un identificator total în left și un identificator size în right. Parantezele, punctele și virgulele și comentariile dispar: arborele păstrează doar structura care contează, de aceea se numește abstract.

Instrumentul folosește Acorn, parserul mic și rapid din spatele multor unelte JavaScript, cu ecmaVersion: "latest". Rezultatul urmează ESTree, formatul comun produs și de Espree (ESLint) și înțeles de majoritatea uneltelor de transformare a codului. Cunoașterea tipurilor exacte de noduri este esențială când scrii o regulă ESLint, un codemod Babel sau jscodeshift, un plugin Prettier sau orice script care analizează cod.

Poziții, intervale și export JSON

Fiecare nod are start și end, adică pozițiile primului caracter și ale celui de după ultimul din sursă, precum și un obiect loc cu linii (de la 1) și coloane. În JSON, coloanele încep de la 0, ca în rezultatul Acorn; panoul Nod selectat le arată de la 1, ca majoritatea editoarelor. Debifează Include pozițiile (start, end, loc) pentru un JSON mai ușor, mai simplu de comparat între două versiuni ale codului.

Câteva valori nu pot fi scrise în JSON: literalii de expresii regulate primesc "value": null (proprietatea regex păstrează tiparul și flagurile), iar literalii BigInt sunt scriși ca șiruri de caractere, așa cum recomandă specificația ESTree.

Limite și confidențialitate

Codul este analizat în browserul tău și nu este niciodată executat sau trimis undeva: parserul doar citește textul. Textul introdus este limitat la un milion de caractere. Arborii foarte mari sunt afișați la cerere, câte un lot de noduri copil, iar un JSON prea mare pentru previzualizare poate fi totuși descărcat. JSX și TypeScript nu sunt JavaScript standard, așa că Acorn le raportează ca erori de sintaxă.