O Que É um Browser Target? Os Navegadores Que Você Suporta
Um browser target é o conjunto de navegadores e versões que a sua aplicação se compromete a suportar, o qual o build usa para decidir como transformar o código.
Suportar todos os navegadores já feitos incharia a sua saída; suportar apenas os mais novos quebraria alguns usuários. Um browser target traça essa linha de forma explícita. O build o lê para decidir qual sintaxe reduzir de nível, quais polyfills adicionar e quais prefixos CSS emitir. É a única configuração que amarra transpilação, polyfilling e autoprefixing.
Como um target é expresso
Targets normalmente são escritos como consultas do tipo as duas últimas versões de cada navegador ou navegadores com mais que uma pequena participação de mercado. As ferramentas resolvem essas consultas contra os dados atuais de uso de navegadores, gerando uma lista concreta.
O que o target orienta
- Quanto de sintaxe o transpilador reduz de nível.
- Quais polyfills são injetados.
- Quais prefixos de fornecedor o Autoprefixer adiciona.
O trade-off entre suporte e tamanho
Um target mais amplo suporta mais usuários, mas entrega mais código transpilado e polyfills, tornando o bundle maior e mais lento. Um target mais estreito entrega uma saída mais enxuta, mas descarta alguns usuários. O target é uma decisão de produto codificada na config.
Compartilhado entre ferramentas
Como transpiladores, ferramentas de polyfill e o PostCSS leem todos o mesmo browser target, defini-lo uma única vez mantém as saídas de JS e CSS consistentes. Alterá-lo em um lugar atualiza todo o build.
Browser targets no CI/CD
O target afeta a saída, então precisa estar na config versionada e não ser implícito. O CI também depende do dataset de uso de navegadores que resolve as consultas; fixar a versão desse dataset mantém os builds reprodutíveis, já que um dataset atualizado pode, de outra forma, mudar a saída sem qualquer alteração de código.
Principais conclusões
- Um browser target é o conjunto explícito de navegadores que o seu build suporta.
- Ele orienta a transpilação, o polyfilling e o prefixamento de CSS a partir de um único lugar.
- O CI precisa fixar tanto o target quanto a versão do dataset de navegadores para garantir reprodutibilidade.