Formatador i minimitzador de JavaScript

Com formatar o minimitzar JavaScript

1. Enganxa el teu codi, o fes clic a Obre un fitxer per carregar un fitxer .js, .mjs o .jsx (fins a 10 MB).
2. Tria la Sagnia i, si prefereixes l’estil Allman, marca Claus en una línia pròpia.
3. Fes clic a Formata (embelleix) per fer el codi llegible.
4. Per reduir-lo, defineix les Opcions de minimització i fes clic a Minimitza. Per només cercar errors, fes clic a Comprova la sintaxi.
5. Copia o baixa el resultat. La línia d’estat mostra la mida abans i després, i el percentatge estalviat.

El codi només es llegeix i es transforma, mai no s’executa: res del que enganxes s’executa en aquesta pàgina.

Embellir amb js-beautify

Formata (embelleix) fa servir js-beautify. Posa una sentència per línia, sagna els blocs, afegeix espais al voltant dels operadors i després de les paraules clau, i manté fins a una línia en blanc allà on n’hi havia. També entén la sintaxi moderna (classes, funcions de fletxa, literals de plantilla, async/await) i JSX. És la manera més ràpida de llegir una biblioteca minimitzada o un fragment d’una línia copiat d’una pàgina web.

Embellir només canvia els espais en blanc. No comprova que el codi sigui vàlid: un parèntesi que falta simplement produeix una sagnia estranya. Per a això, fes servir Comprova la sintaxi.

Minimitzar amb Terser

Minimitza fa servir Terser, el minimitzador que usen la majoria d’eines de construcció de JavaScript. Com que és gran, només es baixa quan fas clic per primera vegada a Minimitza o Comprova la sintaxi. Les opcions corresponen directament als paràmetres de Terser:

• Mòdul ES (import/export) analitza el codi com a mòdul (module: true): s’aplica el mode estricte i els noms de primer nivell són privats, de manera que es poden reanomenar i es poden eliminar els que no s’usen. Deixa-ho desmarcat per a un script clàssic les funcions globals del qual fan servir altres scripts.
• Comprimeix (compress) reescriu el codi en un codi equivalent més curt: càlcul de constants (2*60 es converteix en 120), eliminació de codi mort, unió de declaracions var, condicions més curtes.
• Escurça els noms de les variables (mangle) reanomena les variables locals i els paràmetres amb una o dues lletres. Els noms globals i les propietats dels objectes no es reanomenen mai.
• Conserva els comentaris de llicència conserva els comentaris que comencen per /*! o contenen @license o @preserve. Tots els altres comentaris s’eliminen.

La minimització no pot canviar el que fa el codi, però el codi que depèn dels noms de funció (fn.name) o d’eval pot comportar-se de manera diferent després de reanomenar. En aquest cas, desmarca Escurça els noms de les variables.

Errors de sintaxi amb línia i columna

Quan Terser no pot analitzar el codi, Minimitza i Comprova la sintaxi mostren el missatge d’error amb la seva línia i columna, per exemple «Línia 12, columna 8 – Error de sintaxi: Unexpected token punc «)»». La columna compta els caràcters a partir d‘1. Una causa típica és un claudàtor que falta abans al fitxer, així que mira també les línies just abans de la posició indicada.