Если вы когда-либо работали с приложением ReactJS или, в основном, с любым внешним приложением, таким как Angular или VueJS и т. д., вы могли столкнуться со следующим предупреждающим сообщением. в вашей консоли:
Хотя поначалу это сообщение может показаться запутанным, это полезное предупреждение, которое не следует игнорировать. Давайте посмотрим глубже.
вступление
Допустим, вы работаете над веб-сайтом для владельца малого бизнеса, который хочет, чтобы его веб-сайт был доступен как можно большему количеству потенциальных клиентов. Вы хотите, чтобы веб-сайт выглядел великолепно и работал во всех основных браузерах, включая Chrome, Firefox, Safari и Edge. . Используя Browserslist, вы можете указать эти браузеры и убедиться, что ваш код оптимизирован.
Список браузеров автоматически создаст необходимую конфигурацию для поддержки этих браузеров, включая любые префиксы или обходные пути, необходимые для обеспечения совместимости. Это сэкономит вам часы отладки и сделает вашего клиента счастливым, предоставив отточенный продукт.
Что такое список браузеров?
Список браузеров — это инструмент для обмена списками браузеров между различными интерфейсными инструментами. Это позволяет разработчикам указывать, какие браузеры они хотят поддерживать в своих проектах, а затем делиться этой информацией с такими инструментами, как Autoprefixer, Babel и другими.
Browserslist использует данные из CanIUse, чтобы определить, какие браузеры используются и их соответствующие версии. Инструмент имеет файл конфигурации, который содержит список браузеров и их версий. Этот файл конфигурации используется для указания поддерживаемых браузеров.
Предупреждение
Теперь, когда мы знаем о Browserslist, почему приведенное выше предупреждение появляется даже тогда, когда вы работаете в приложении ReactJS или почти в любом внешнем интерфейсе NodeJS приложение, такое как Angular, VueJS и т. д.? Browserslist является пакетом NPM и может быть одной из зависимостей для любого из используемых вами пакетов, поскольку он помогает другим инструментам, таким как PostCSS, где мы можем указать, что наш проект должен поддерживать все современные браузеры, включая последние две версии Chrome, Firefox и Safari. , PostCSS автоматически добавит необходимые префиксы поставщиков для функций, которым они требуются, и предоставит запасные варианты для функций, которые еще не получили широкой поддержки. Это может сэкономить вам много времени и усилий, гарантируя, что ваш CSS будет одинаково работать во всех целевых браузерах.
Если мы проигнорируем предупреждение Browserslist, это может вызвать проблемы в нашем проекте. Например, если мы используем Autoprefixer, а база данных caniuse-lite устарела, она может добавить префиксы в ваш CSS, которые не нужны, или не добавить префиксы, которые необходимы. Это может привести к проблемам совместимости в разных браузерах и привести к тому, что ваш веб-сайт будет выглядеть иначе или работать не так, как ожидалось.
Фиксация
Чтобы исправить предупреждение Browserslist, необходимо обновить базу данных caniuse-lite, которую использует Browserslist. Для этого вы можете запустить следующую команду в каталоге вашего проекта:
npx browserslist@latest --update-db
Эта команда загрузит последнюю версию базы данных caniuse-lite и обновит файл конфигурации Browserslist. После запуска этой команды вы больше не должны видеть предупреждение Browserslist в своей консоли.
Ссылки:
Заключение
Предупреждение Browserslist важно, и его нельзя игнорировать. Обновление базы данных caniuse-lite, которую использует Browserslist, — это простое исправление, которое может предотвратить возможные проблемы в вашем проекте. Поняв предупреждение и предприняв необходимые шаги для его исправления, вы можете обеспечить бесперебойную работу своего приложения ExpressJS и его совместимость со всеми основными браузерами.
