Embellecedor / minificador de JavaScript gratis

Cuándo formatear o compactar JavaScript

JavaScript a menudo te llega en un estado difícil de leer. Un fragmento copiado de las herramientas de desarrollo de un navegador puede sentarse en una línea larga. Un colega puede pegar código con hendidura mixta en un chat. Antes de que pueda revisarlo o detectar un soporte que falta, necesita que se establezca limpiamente.

La necesidad opuesta es igual de común. Un pequeño script en línea para una landing page, un bookmarklet, o una muestra de código en un espacio reducido puede beneficiarse de tener espacio en blanco y comentarios despojados. Esta herramienta maneja ambos trabajos. Beautify utiliza Prettier, un código paramateria ampliamente utilizado, y Minify utiliza Terser, un compresor de JavaScript común.

Un ejemplo trabajado en ambas direcciones

Pegar esta función de una línea: función total(ítems){let sum=0;for(const item of items){sum+item.price*item.qty}return sum}. Elige Beautify con un guión de 2 y selecciona Convertir. El resultado es una función de siete líneas. La primera línea lee la función total(ítems) seguido de un tirante de apertura. Las líneas del cuerpo se dejan sumar = 0; a continuación, para (cont item of items) con un tirante de apertura, a continuación, suma = item.price * item.qty; con un punto y coma añadido, un tirante de cierre, y la suma de retorno; antes del tirante de cierre final.

Ahora cambia a Minify y pega la versión formateada de nuevo, con un comentario de licencia /*! v1 */ en la parte superior y un // comentario normal dentro de la función. La salida mantiene /*! v1 */ en tu propia línea y luego pone toda la función de nuevo en una sola línea. El comentario ordinario se elimina, mientras que cada nombre de variable se mantiene exactamente como escrito.

Lo que cada modo realmente cambia

Beautif analiza tu código en un árbol de sintaxis y lo imprime de nuevo usando el estilo predeterminado de Prettier, con el guión elegido de 2 o 4 espacios. Además de espaciamiento y saltos de línea, ese estilo añade semicolons faltantes, envuelve líneas largas cerca de 80 caracteres y cambia comillas de cadena a comillas dobles cuando es posible. Así que const a='x' se convierte en const a = "x";.

Minify elimina el espacio en blanco, saltos de línea y comentarios, pero mantiene los comentarios que comienzan con /*! porque por lo general tienen avisos de licencia. No cambia el nombre de las variables o la lógica de reescritura, por lo que la salida se mantiene fácil de rastrear hasta la fuente. Eso hace que sea más ligero que un paso de construcción de producción completa, que típicamente también acorta los nombres.

Ambos modos necesitan JavaScript válido. Si el analizador encuentra un error de sintaxis, la herramienta muestra un mensaje en lugar de salida. La entrada está limitada a 1 MB.

Errores comunes a evitar

No pega anotaciones de tipo TypeScript, JSX dentro de un archivo que no sea Reactura, o código con marcadores de posición de plantilla de otro sistema y espera un resultado limpio. La sintaxis no soportada puede hacer que el analizador pare.

También evita tratar la salida minificada como su nuevo archivo fuente. Mantén la versión legible en tu proyecto y genera código compacto a partir de él cuando sea necesario. Y comprueba que la cotización y los cambios de punto y coma de Beautify se ajustan a la guía de estilo de tu equipo antes de comprometerlos.