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.
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 comoa < bsã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
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.
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.
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
Formatador e minificador de HTML
HTML Beautifier & Minifier
Formata ou minifica HTML, preservando os elementos em linha e, opcionalmente, juntando os espaços em branco.
Formatador e minificador de CSS
CSS Beautifier & Minifier
Formata ou minifica CSS sem reordenar nada, preservando exatamente o fluxo de tokens.
Resolver source map
Source Map Resolver
Mapeia um stack trace minificado de volta aos arquivos e linhas originais usando um source map que você fornece.
Inspetor de WebAssembly
WebAssembly Inspector
Lista imports, exports, memória e tamanho das seções de um módulo .wasm e imprime seu formato de texto.
Em seguida
Estas aceitam o que esta ferramenta produz, então o resultado pode ir direto.
Screenshot de código
Code Screenshot
Renderiza um trecho de código como imagem com destaque de sintaxe, moldura de janela e tema escolhido.
Formatador e minificador de CSS
CSS Beautifier & Minifier
Formata ou minifica CSS sem reordenar nada, preservando exatamente o fluxo de tokens.
Formatador e minificador de HTML
HTML Beautifier & Minifier
Formata ou minifica HTML, preservando os elementos em linha e, opcionalmente, juntando os espaços em branco.
Resolver source map
Source Map Resolver
Mapeia um stack trace minificado de volta aos arquivos e linhas originais usando um source map que você fornece.
Codificar e decodificar Base64
Base64 Encoder & Decoder
Codifica e decodifica Base64 e Base64URL para texto ou arquivos, tratando UTF-8 corretamente.
curl para código
curl to Code
Converte um comando curl em fetch, axios, Python requests, Go, PHP ou PowerShell.