JavaScript AST pārlūks

Kā izpētīt JavaScript AST

1. Ielīmējiet kodu laukā JavaScript kods vai noklikšķiniet uz Ielādēt piemēru, lai sāktu ar nelielu moduli.
2. Izvēlieties Pirmkoda tips: Modulis (import/export, stingrais režīms) ES moduļiem vai Skripts (klasiskais) parastiem skriptiem, kuros var būt nestingrā režīma iespējas, piemēram, with.
3. Koks atjaunojas īsu brīdi pēc tam, kad pārtraucat rakstīt. Noklikšķiniet uz Parsēt, lai to izdarītu uzreiz.
4. Sadaļā Sintakses koks noklikšķiniet uz mazās bultiņas, lai izvērstu vai sakļautu mezglu. Noklikšķiniet uz mezgla nosaukuma, lai redaktorā atlasītu atbilstošo kodu. Panelī Atlasītais mezgls redzams tā tips, īpašība, kurai tas pieder, rakstzīmju diapazons, rinda un kolonna, vienkāršās īpašības (nosaukums, operators, neapstrādāta vērtība u. c.) un pirmkods.
5. Tas darbojas arī pretēji: noklikšķiniet jebkurā vietā kodā, pārvietojiet kursoru ar tastatūru vai atlasiet koda fragmentu, un kokā tiek izvērsts un izcelts dziļākais mezgls, kas to ietver.
6. Atveriet ESTree JSON, lai redzētu visu koku kā JSON ar vai bez opcijas Iekļaut pozīcijas (start, end, loc), un tad to Kopēt vai Lejupielādēt JSON.

Skaitītāji rāda Mezgli skaitu, koka Maksimālais dziļums un Augstākā līmeņa teikumi skaitu.

Kas ir abstraktais sintakses koks?

Pirms JavaScript dzinējs, linteris vai pakotņu veidotājs var kaut ko darīt ar jūsu kodu, tas pārveido tekstu mezglu kokā. Katram mezglam ir type (VariableDeclaration, CallExpression, Identifier…) un pakārtoti mezgli, kas glabājas nosauktās īpašībās. Izteiksmei total += size; iegūstat ExpressionStatement, kura expression ir AssignmentExpression ar operatoru +=, kreiso identifikatoru total un labo identifikatoru size. Iekavas, semikoli un komentāri pazūd: koks saglabā tikai būtisko struktūru, tāpēc to sauc par abstraktu.

Šis rīks izmanto Acorn, mazo un ātro parseri, uz kura balstās daudzi JavaScript rīki, ar iestatījumu ecmaVersion: "latest". Izvade atbilst ESTree, kopējam formātam, ko veido arī Espree (ESLint) un saprot lielākā daļa koda pārveidošanas rīku. Precīzu mezglu tipu pārzināšana ir būtiska, rakstot ESLint noteikumu, Babel vai jscodeshift koda pārveidotāju, Prettier spraudni vai jebkuru skriptu, kas analizē kodu.

Pozīcijas, diapazoni un JSON eksports

Katram mezglam ir start un end – pirmās un pēdējās rakstzīmes plus viens nobīdes pirmkodā – un objekts loc ar rindām (no 1) un kolonnām. JSON kolonnas sākas no 0, kā Acorn izvadē, savukārt panelis Atlasītais mezgls tās rāda no 1, kā lielākā daļa redaktoru. Atceliet izvēli Iekļaut pozīcijas (start, end, loc), lai iegūtu vieglāku JSON, kuru vieglāk salīdzināt starp divām koda versijām.

Dažas vērtības nevar ierakstīt JSON: regulāro izteiksmju literāļiem ir "value": null (to regex īpašībā saglabājas šablons un karodziņi), bet BigInt literāļi tiek ierakstīti kā virknes, kā iesaka ESTree specifikācija.

Ierobežojumi un privātums

Kods tiek parsēts jūsu pārlūkprogrammā un nekad netiek izpildīts vai kaut kur sūtīts: parseris tikai nolasa tekstu. Ievade ir ierobežota līdz vienam miljonam rakstzīmju. Ļoti lieli koki tiek attēloti pēc pieprasījuma, pa pakešu bērnmezgliem, un JSON, kas ir pārāk liels priekšskatījumam, joprojām var lejupielādēt. JSX un TypeScript nav standarta JavaScript, tāpēc Acorn tos uzrāda kā sintakses kļūdas.