O que é o Browserslist?

O que é o Browserslist?

O Browserslist é uma biblioteca em JavaScript que ajuda a determinar quais navegadores (ou versões de navegadores) devem ser suportados em seus projetos. Ele é utilizado principalmente em ferramentas de construção de aplicativos, como o webpack, o Babel e o autoprefixer. Esta biblioteca analisa a lista de navegação definida e fornece uma lista de navegadores correspondentes necessários para o seu projeto.

Por que devo usar o Browserslist?

Usando o Browserslist, você pode definir uma lista de navegadores que deseja dar suporte no seu projeto. A biblioteca, então, pode ser usada para gerar uma matriz de navegadores que você deve levar em consideração ao escrever o CSS e JavaScript, por exemplo, evitando o uso de APIs de navegadores que você não está interessado em apoiar. Se você está criando um projeto que será lançado publicamente, pode usar o Browserslist para garantir que o código seja compatível com os navegadores mais usados.

Como instalo o Browserslist?

Você pode instalar o Browserslist usando o gerenciador de pacotes npm. Para isso, basta executar o seguinte comando no terminal:

npm install --save-dev browserslist

Após a instalação, você pode carregar a biblioteca em seu código JavaScript como qualquer outro pacote:

import browserslist from 'browserslist';

Como definir uma lista de navegador usando o Browserslist?

Para definir uma lista de navegadores usando o Browserslist, você pode criar um arquivo .browserslistrc na raiz do seu projeto com uma lista de navegadores que deseja suportar em ordem de preferência. A biblioteca usará esta lista para determinar quais navegadores você deve suportar. A sintaxe é como esta:

last 2 versions

Mais informações sobre a sintaxe e opções de configuração podem ser encontradas na documentação oficial.

Como usar o Browserslist com o autoprefixer?

O autoprefixer é uma ferramenta do PostCSS que analisa seu CSS e adiciona prefixos de provedores para você, para que você não precise escrevê-los manualmente. Para usá-lo com o Browserslist, você precisa instalar ambos os pacotes:

npm install --save-dev autoprefixer postcss-cli

Após a instalação, você pode adicioná-lo ao PostCSS em seu arquivo de configuração, como este:

"autoprefixer": { "browsers": "last 2 versions" }

Como usar o Browserslist com o webpack?

Para usar o Browserslist com o webpack, você precisa instalar o pacote correspondente:

npm install --save-dev webpack webpack-cli webpack-browserslist

A biblioteca webpack-browserslist permite usar o Browserslist para diferenciar entre os navegadores através da utilização de uma matriz de navegadores de destino. Você pode usar isso diretamente na sua configuração do webpack, como este:

module.exports = { target: ['last 2 versions', 'ie >= 11'] };

Posso usar o Browserslist em projetos React e Vue.js?

Sim, você pode usar o Browserslist com projetos React, Vue.js e todas as outras ferramentas de construção de JavaScript, ou qualquer projeto que envolva CSS. O Browserslist é compatível com as principais ferramentas de construção, como o Webpack e o Babel, e pode ser incorporado na configuração do seu projeto.

Como visualizar a lista de navegadores existentes no Browserslist?

Você pode usar o seguinte comando no terminal para exibir a lista de navegadores existentes no Browserslist:

npx browserslist

Isso retornará uma lista de navegadores compatíveis com a versão atual do Browserslist.

Como atualizar o Browserslist?

Para atualizar o Browserslist, basta executar o seguinte comando no terminal:

npm update browserslist

Este comando atualizará a versão do Browserslist e suas dependências, conforme necessário. É importante lembrar que a atualização do Browserslist pode afetar a compatibilidade do seu projeto com o navegador, por isso, deve ser testado e validado cuidadosamente.

Qual é a sintaxe para excluir navegadores no Browserslist?

Você pode excluir navegadores da sua lista Browserslist usando o sinal de exclamação (!), ex.:

last 2 versions, not IE 11, not < 1% 

Este exemplo excluirá o Internet Explorer 11 e navegadores com menos de 1% de participação de mercado em sua lista de navegadores suportados.