Formateador y minificador JavaScript

Cómo formatear o minificar JavaScript

1. Pega tu código o haz clic en Abrir un archivo para cargar un archivo .js, .mjs o .jsx (hasta 10 MB).
2. Elige la Indentación y, si prefieres el estilo Allman, marca Llaves en su propia línea.
3. Haz clic en Formatear (embellecer) para que el código sea legible.
4. Para reducir su tamaño, ajusta las Opciones de minificación y haz clic en Minificar. Para buscar solo errores, haz clic en Comprobar la sintaxis.
5. Copia o descarga el resultado. La línea de estado muestra el tamaño antes y después, y el porcentaje ahorrado.

El código solo se lee y se transforma, nunca se ejecuta: nada de lo que pegas se ejecuta en esta página.

Embellecer con js-beautify

Formatear (embellecer) usa js-beautify. Pone una sentencia por línea, indenta los bloques, añade espacios alrededor de los operadores y después de las palabras clave, y conserva como máximo una línea en blanco donde las había. También entiende la sintaxis moderna (clases, funciones flecha, plantillas literales, async/await) y JSX. Es la forma más rápida de leer una biblioteca minificada o un fragmento de una sola línea copiado de una página web.

Embellecer solo cambia los espacios. No comprueba que el código sea válido: un paréntesis que falta simplemente produce una indentación extraña. Para eso, usa Comprobar la sintaxis.

Minificar con Terser

Minificar usa Terser, el minificador que emplean la mayoría de las herramientas de compilación de JavaScript. Como es grande, solo se descarga la primera vez que haces clic en Minificar o Comprobar la sintaxis. Las opciones corresponden directamente a ajustes de Terser:

• Módulo ES (import/export) analiza el código como un módulo (module: true): se aplica el modo estricto y los nombres de nivel superior son privados, así que se pueden renombrar y los que no se usan, eliminar. Déjalo sin marcar para un script clásico cuyas funciones globales usan otros scripts.
• Comprimir (compress) reescribe el código en un código equivalente más corto: plegado de constantes (2*60 pasa a ser 120), eliminación de código muerto, unión de declaraciones var y condiciones más cortas.
• Acortar los nombres de variables (mangle) renombra las variables locales y los parámetros con una o dos letras. Los nombres globales y las propiedades de los objetos nunca se renombran.
• Conservar los comentarios de licencia mantiene los comentarios que empiezan por /*! o contienen @license o @preserve. Todos los demás comentarios se eliminan.

La minificación no puede cambiar lo que hace el código, pero el código que depende de los nombres de las funciones (fn.name) o de eval puede comportarse de otra forma tras el renombrado. En ese caso, desmarca Acortar los nombres de variables.

Errores de sintaxis con línea y columna

Cuando Terser no puede analizar el código, Minificar y Comprobar la sintaxis muestran el mensaje de error con su línea y su columna, por ejemplo «Línea 12, columna 8 – Error de sintaxis: Unexpected token punc «)»». La columna cuenta los caracteres desde 1. El mensaje de Terser en sí está en inglés. Una causa típica es un paréntesis o una llave que falta antes en el archivo, así que revisa también las líneas justo anteriores a la posición indicada.