Каково значение списка браузеров в package.json, созданном приложением create-реагировать
Меня спросили об этом в интервью. Я не мог ответить.
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
Я вижу, что это массив. «not ie <= 11» означает, что не будет работать в Internet Explorer версии ниже 11. "op_mini" должен быть связан с Opera mini.
Но я хочу знать, зачем это нужно.
Ответы 2
Это параметр конфигурации React, позволяющий узнать, на какие браузеры должен ориентироваться процесс сборки.
Как говорится в документации:
The browserslist configuration controls the outputted JavaScript so that the emitted code will be compatible with the browsers specified.
Если вы собираетесь использовать функцию ES, убедитесь, что все указанные браузеры поддерживают ее, в противном случае вам придется включать полифиллы вручную. React не сделает это за вас автоматически.
Подробнее см.: https://facebook.github.io/create-react-app/docs/supported-browsers-features и https://create-react-app.dev/docs/supported-browsers-features/.
это не только для React, это работает как общее решение для любой технологии javascript
Что здесь означает процент вроде 0.2%?
@МахмудМохамедЗакриа. Это означает процент использования браузеров.
не забывайте периодически бегать npx browserslist@latest --update-db. Он обновит ваш файл package-lock новой версией caniuse-lite. В этом случае вы будете уверены, что «последние две версии» или «> 0,2%» будут соответствовать вашим ожиданиям.
Что такое список браузеров?
Browserslist — это инструмент, который позволяет указать, что какие браузеры должен поддерживаться в вашем внешнем приложении, указав «запросы» в файле конфигурации. Он используется фреймворками/библиотеками, такими как React, Angular и Vue, но не ограничивается ими.
Зачем нам это?
Во время разработки мы хотим использовать последние функции javascript (например, ES6), так как это упрощает нашу работу, приводит к более чистому коду и, возможно, к лучшей производительности.
По мере развития javascript браузеры не будут поддерживать новые функции в том же темпе, например, не все браузеры имеют встроенную поддержку ES6 (он же ES2015). Используя browserslist, транспиляторы/бандлеры знают, какие браузеры вы хотите поддерживать, поэтому они могут «группировать» браузеры по разным категориям и генерировать отдельные бандлы, например:
- Legacy Bundle: содержит полифиллы, увеличенный размер пакета, совместимый со старыми браузерами без поддержки ES6.
- Modern Bundle: меньший размер пакета, оптимизированный для современных браузеров.
Таким образом, наша точка входа (например, index.html) создается таким образом, что она будет загружать необходимые пакеты в соответствии с текущим браузером, используемым пользователем.
Этот процесс выполняется Angular, Vue и React. В будущем инструменты упаковщиков могут генерировать еще больше пакетов в зависимости от того, насколько разными являются браузеры, по одному пакету на группу браузеров. Создание большего количества пакетов еще больше оптимизирует ваше приложение за счет более медленной (и более сложной) сборки, что является компромиссом.
Давайте посмотрим на каждый отдельный запрос в вашем примере:
- 0,2%: Все браузеры с долей мирового рынка не менее 0,2%
- не умер: Исключить браузеры без официальной поддержки за последние 24 месяца
- не т.е. <= 11: Исключить IE 11 и более ранние версии
- не op_mini все: Исключить Opera Mini
Вы можете найти больше об этом (включая дополнительные параметры запроса) в GitHub-репозиторий Browserslist.
Почему тогда многие исключают "опера мини"?
@jamesemanon, потому что Opera Mini не имеет встроенной поддержки функций ES6, поэтому, если вы используете ES6 и хотите, чтобы ваше приложение работало в Opera Mini, вам нужно добавить для него полифиллы, а это означает, что вам нужно либо 1) создайте для него отдельный пакет или 2) заставьте весь пакет включать полифиллы ES5. Вариант 1) делает вашу сборку почти в два раза медленнее (и я не уверен, что все js-фреймворки могут это делать), тогда как вариант 2) значительно увеличивает размер вашего пакета, что будет плохо для современных пользователей браузера. Вариант 3) — исключить браузеры без поддержки ES6.
Например, не мертвый: исключить браузеры без официальной поддержки за последние 24 месяца > это означает, что упаковщик создаст отдельный пакет для не мертвого варианта @Alisson
Вы также можете запустить
npx browserslist, чтобы узнать поддерживаемые браузеры.