Formattatore e minificatore JavaScript
JavaScript Beautifier & Minifier
Toglie commenti e spazi da JavaScript o TypeScript senza rinominare niente, e re-indenta un bundle minificato perché torni leggibile.
Abbellisce JavaScript o TypeScript minificato perché lo si possa leggere, e toglie commenti e spazi bianchi quando lo si vuole più piccolo. È costruito su un tokenizzatore e non su un parser, e quel confine è la cosa onesta che ha: niente viene rinominato, nessuna espressione viene riscritta, e niente dentro una stringa, un template o una regex viene toccato.
JavaScript · TypeScript in ingresso
Trascina un file .js o .ts
Letto solo in questa scheda. Non viene caricato niente.
Formattato
Token
109
Righe
18
A essere onesti: questo è un tokenizzatore, non un parser
- · Il tokenizzatore distingue con esattezza i letterali di espressione regolare dalla divisione, sa che farsene di
${ {a:1}.a }dentro un template literal e riconosce un // dentro una stringa. Quindi niente di quello che sta dentro una stringa, un template o un’espressione regolare viene toccato. - · Minifica toglie solo commenti e spazi. Non rinomina niente e non riscrive nessuna espressione, e tiene gli a capo da cui dipende l’inserimento automatico del punto e virgola — dopo
return, prima di un ++ postfisso e dove la riga successiva comincia con ( o [. Non arriverà piccolo come Terser, ma non cambierà nemmeno il comportamento. - · Formatta trova i confini delle istruzioni dalla profondità di parentesi graffe e quadre e dai ;, reindenta e lascia gli a capo che c’erano già. Non inserisce punti e virgola, non manda a capo le righe lunghe e non sa distinguere un letterale di oggetto da un blocco, così in entrambi i casi mette una voce per riga.
- · I generici TypeScript come
Map<string, T>e un confronto comea < bvengono distinti guardando i token intorno. JSX non è gestito. - · Abbastanza per rendere leggibile un bundle offuscato; per il codice che stai per committare lo strumento giusto è Prettier.
Per trovare la posizione originale dietro uno stack trace minificato, usa il Risolutore di source map.
Come si usa
Incollare il codice o trascinare un file
Un bundle su una riga, un file con indentazione mista, TypeScript con i generici: si leggono tutti allo stesso modo. Il file viene letto in questa scheda.
Scegliere fra Formatta e Minifica
Formatta reindenta secondo la profondità delle graffe e lascia in pace gli a capo esistenti. Minifica toglie commenti e spazi bianchi e nient’altro, conservando le intestazioni di licenza `/*!` se lo si chiede.
Tenere d’occhio il controllo sul flusso di token
A ogni esecuzione i token significativi dell’uscita vengono confrontati con quelli dell’input. Se mai dovessero differire, la pagina lo dice in rosso e invita a usare il proprio input — l’unico modo di fallire che non deve mai essere silenzioso.
Domande frequenti
Perché il mio file minificato è ancora più grande di quello di Terser?
Perché qui si cancellano soltanto commenti e spazi bianchi. Terser analizza il programma e può rinominare le variabili locali, ripiegare le costanti e togliere i rami morti; per farlo servono un AST e un’analisi degli ambiti, e sbagliare di poco l’uno o l’altra cambia il comportamento. Lo scambio qui è un risparmio minore che non può rompere il codice.
Minificare romperà l’inserimento automatico dei punti e virgola?
No: gli a capo da cui dipende l’ASI vengono conservati — dopo un `return`, prima di un `++` postfisso e dove la riga successiva comincia con `(` o `[`. Sono esattamente i punti in cui togliere un a capo cambia quello che il programma fa.
Perché il mio oggetto letterale esce con una proprietà per riga?
Perché un tokenizzatore non sa distinguere un oggetto letterale da un blocco: entrambi sono `{`. Tutto ciò che sta a una profondità di graffe riceve lo stesso trattamento. Un parser saprebbe la differenza; questo di proposito non lo è.
Gestisce JSX?
No. JSX ha bisogno del parser che qui non c’è: `<Foo>` a livello di token non si distingue da un confronto, e l’euristica sui generici che se la cava con `Map<string, T>` è già il limite di quanto si possa indovinare. Per un file `.tsx` va usato Prettier.
Si può usare questo al posto di Prettier?
Per leggere un bundle offuscato sì, è a quello che serve. Per il codice che si sta per committare no: non inserisce punti e virgola, non manda a capo le righe lunghe e non ha nessuna opinione sulle liste di argomenti. Prettier ristampa da un AST, ed è per questo che può.
Può ricevere da
Formattatore e minificatore HTML
HTML Beautifier & Minifier
Formatta o minifica l’HTML, conservando gli elementi in linea e riducendo gli spazi bianchi se glielo chiedi.
Formattatore e minificatore CSS
CSS Beautifier & Minifier
Formatta o minifica il CSS senza riordinare niente, conservando esattamente il flusso dei token.
Risolutore di source map
Source Map Resolver
Riporta una traccia di stack minificata ai file e alle righe originali usando una source map che fornisci tu.
Ispettore WebAssembly
WebAssembly Inspector
Elenca importazioni, esportazioni, memoria e dimensioni delle sezioni di un modulo .wasm e ne stampa il formato testuale.
Dopo
Questi accettano ciò che produce questo strumento, così il risultato può passare direttamente.
Immagine di un frammento di codice
Code Screenshot
Disegna un frammento di codice come immagine, con evidenziazione della sintassi, cornice di finestra e tema a scelta.
Formattatore e minificatore CSS
CSS Beautifier & Minifier
Formatta o minifica il CSS senza riordinare niente, conservando esattamente il flusso dei token.
Formattatore e minificatore HTML
HTML Beautifier & Minifier
Formatta o minifica l’HTML, conservando gli elementi in linea e riducendo gli spazi bianchi se glielo chiedi.
Risolutore di source map
Source Map Resolver
Riporta una traccia di stack minificata ai file e alle righe originali usando una source map che fornisci tu.
Codificatore e decodificatore Base64
Base64 Encoder & Decoder
Codifica e decodifica in Base64 e Base64URL testo o file, trattando correttamente l’UTF-8.
Da curl a codice
curl to Code
Converte un comando curl in fetch, axios, requests di Python, Go, PHP o PowerShell.