Pular para o conteúdo

Formatador e minificador de JavaScript

JavaScript Beautifier & Minifier

Remove comentários e espaços de JavaScript ou TypeScript sem renomear nada, e reindenta um bundle minificado para que dê para ler de novo.

Embeleza JavaScript ou TypeScript minificado para você conseguir ler, e remove comentários e espaços quando você quer o arquivo menor. É construído sobre um tokenizador em vez de um parser, e essa fronteira é a parte honesta da ferramenta: nada é renomeado, nenhuma expressão é reescrita e nada dentro de uma string, um template ou uma regex é tocado.

🔒 Roda inteiramente no seu navegadorjavascriptformatminifybeautify
Modo
Recuo

JavaScript · TypeScript de entrada

Solte um arquivo .js ou .ts

Lido só nesta aba. Nada é enviado.

Formatado

Tokens

109

Linhas

18

Com franqueza: isto é um tokenizador, não um parser

  • · O tokenizador distingue com exatidão literais de expressão regular de divisão, sabe o que fazer com ${ {a:1}.a } dentro de um template literal e reconhece um // dentro de uma string. Então nada que esteja dentro de uma string, de um template ou de uma expressão regular é tocado.
  • · Minificar tira só comentários e espaços em branco. Não renomeia nada nem reescreve nenhuma expressão, e mantém as quebras de linha de que a inserção automática de ponto e vírgula depende: depois de return, antes de um ++ pós-fixado e onde a linha seguinte começa com ( ou [. Não vai ficar tão pequeno quanto com o Terser, e também não vai mudar o comportamento.
  • · Formatar acha os limites das instruções pela profundidade de chaves e colchetes e pelos ;, recua de novo e deixa as quebras de linha que já estavam lá. Não insere ponto e vírgula, não quebra linhas longas e não sabe distinguir um literal de objeto de um bloco, então nos dois casos põe uma entrada por linha.
  • · Os genéricos do TypeScript como Map<string, T> e uma comparação como a < b são distinguidos olhando os tokens ao redor. JSX não é tratado.
  • · Suficiente para deixar legível um bundle ofuscado; para o código que você está prestes a commitar, a ferramenta certa é o Prettier.

Para achar a posição original por trás de um stack trace minificado, use Resolver source map.

Como usar

  1. Cole o código ou solte um arquivo

    Um bundle de uma linha só, um arquivo com indentação misturada, TypeScript com genéricos: todos são lidos do mesmo jeito. O arquivo é lido nesta aba.

  2. Escolha Formatar ou Minificar

    Formatar reindenta pela profundidade das chaves e deixa suas quebras de linha existentes em paz. Minificar remove comentários e espaços e nada mais, mantendo os cabeçalhos de licença `/*!` se você pedir.

  3. Observe a checagem do fluxo de tokens

    Os tokens significativos da saída são comparados com a entrada a cada execução. Se algum dia diferirem, a página avisa em vermelho e manda você usar a sua entrada no lugar: o único modo de falha que nunca pode ser silencioso.

Perguntas frequentes

Por que meu arquivo minificado ainda é maior que o do Terser?

Porque isto só apaga comentários e espaços. O Terser analisa o programa e pode renomear variáveis locais, dobrar constantes e descartar ramos mortos; isso exige uma AST e uma análise de escopo, e errar qualquer um dos dois de forma sutil muda o comportamento. A troca aqui é uma economia menor que não pode quebrar seu código.

Minificar vai quebrar a inserção automática de ponto e vírgula?

Não: as quebras de linha das quais a ASI depende são mantidas: depois de um `return`, antes de um `++` pós-fixado, e onde a linha seguinte começa com `(` ou `[`. Esses são precisamente os lugares em que remover uma quebra de linha muda o que o programa faz.

Por que meu literal de objeto sai com uma propriedade por linha?

Porque um tokenizador não consegue distinguir um literal de objeto de um bloco: os dois são `{`. Tudo na profundidade das chaves recebe o mesmo tratamento. Um parser saberia a diferença; isto deliberadamente não é um.

Ele lida com JSX?

Não. JSX precisa do parser que isto não tem: `<Foo>` é indistinguível de uma comparação no nível dos tokens, e a heurística de genéricos que dá conta de `Map<string, T>` já está no limite do que adivinhar consegue. Use o Prettier para um arquivo `.tsx`.

Posso usar isto no lugar do Prettier?

Para ler um bundle ofuscado, sim: é para isso que ele serve. Para código que você está prestes a commitar, não: ele não insere ponto e vírgula, não quebra linhas longas e não tem opinião sobre listas de argumentos. O Prettier reimprime a partir de uma AST, e é por isso que consegue.

Pode receber de

Em seguida

Estas aceitam o que esta ferramenta produz, então o resultado pode ir direto.