1. Введение
Baseline — это инициатива, которая обеспечивает более четкое понимание того, какие веб-функции совместимы и безопасны для использования сегодня. Благодаря усовершенствованиям в инструментах Baseline, теперь вы можете использовать Baseline непосредственно в своих проектах в качестве запроса Browserslist , чтобы ваша цепочка инструментов могла изменять вывод кода в зависимости от выбранной вами целевой платформы Baseline .
В этом практическом занятии вы узнаете, как использовать Baseline в тестовом проекте и как настроить его для выбора конкретной целевой платформы Baseline. Вы также сможете понаблюдать, как изменяется вывод цепочки инструментов проекта в зависимости от выбранной целевой платформы Baseline.
2. Настройте демонстрационную версию на своем локальном компьютере.
Сначала откройте предпочитаемое вами терминальное приложение, клонируйте репозиторий с демонстрационным проектом, а затем перейдите в каталог проекта:
git clone git@github.com:GoogleChromeLabs/baseline-demos.git
cd baseline-demos/tooling/webpack
На данном этапе в демоверсии Baseline уже интегрирован, но вам стоит ознакомиться с коммитом, который позволит начать с нуля:
git checkout d3793f25
После клонирования репозитория можно запустить демо-версию. В этом проекте для управления версиями Node используется nvm . Если у вас установлена достаточно свежая версия Node, этот шаг, вероятно, не потребуется, но если вы используете nvm , выполните следующие команды:
nvm install
nvm use
Далее установите пакеты проекта:
npm install
Чтобы посмотреть демонстрацию, выполните следующую команду:
npm start
Затем перейдите по адресу http://localhost:8080 . Демонстрационная версия представляет собой список карточек, которые можно фильтровать с помощью поля формы в верхней части страницы. Само приложение использует набор функций, которые достигли базового уровня.
После завершения демонстрации перейдите в терминал и нажмите Ctrl+C, чтобы остановить её в любой момент.
3. Как интегрировать Baseline в проект
В этом примере конфигурация Browserslist не задается в начале. Browserslist — это компактный синтаксис запросов, который указывает инструментам, какие минимальные версии браузеров должны поддерживаться. Например, запрос за last 3 years укажет широкий диапазон целевых версий. В этом примере мы укажем запрос Browserslist, который соответствует базовым целевым версиям, которые вы можете использовать в своем инструментарии. Базовые целевые версии могут быть одними из следующих:
- Постоянно меняющиеся параметры , которые обновляются со временем по мере выпуска новых браузеров:
- Новая базовая версия , которая обеспечивает согласование совместимых функций, реализованных в базовом наборе браузеров в любое время с настоящего момента по 30 месяцев назад.
- Базовая версия: широкодоступная , включающая в себя функции взаимодействия, реализованные в основном наборе браузеров 30 и более месяцев назад.
- Фиксированные целевые значения представляют собой версии браузеров на фиксированный момент времени. Они выражаются в годах с 2016 по текущий год.
Для начала выберем для проекта целевую платформу Moving Baseline Widely available. Для этого откройте package.json и добавьте следующее:
"browserslist": "baseline widely available"
4. Проследите изменения в выходных данных кода, выбрав различные целевые объекты базовой версии.
Вы только что выбрали Baseline Widely available в качестве целевого объекта для демонстрационного проекта. Далее вам нужно будет собрать проект:
npm run build
Из-за того, что в babel.config.js проекта параметр debug для @babel/preset-env указан как true , появляется много лишнего вывода. Во-первых, обратите внимание на размер CSS и JavaScript в статистике сборщика:
assets by status 213 KiB [emitted]
asset js/home.5f3c5480.js 208 KiB [emitted] [immutable] [minimized] (name: home) 2 related assets
asset css/home.20db50ef.css 3.64 KiB [emitted] [immutable] (name: home) 1 related asset
asset index.html 564 bytes [emitted]
Обратите внимание, что размер пакета JavaScript составляет 208 КиБ , а CSS — 3,64 КиБ . Это связано с тем, что в этом проекте используется core-js для полифилов JavaScript и autoprefixer для применения префиксов, специфичных для поставщиков, к свойствам CSS, которые еще не полностью совместимы. И core-js , и autoprefixer зависят от выбранного запроса Baseline Browserslist.
Ещё один момент, на который следует обратить внимание в выходных данных, — это то, как ваш запрос Browserslist для Baseline Widely available преобразуется в запрос Browserslist. В вашем проекте это будет выглядеть примерно так:
Using targets: {
"chrome": "108",
"edge": "108",
"firefox": "108",
"ios": "16",
"safari": "16"
}
Обратите внимание на полифилы, внедренные core-js в выходные данные сборки:
The corejs3 polyfill added the following polyfills:
es.iterator.constructor { "chrome":"108", "edge":"108", "firefox":"108", "ios":"16", "safari":"16" }
es.iterator.filter { "chrome":"108", "edge":"108", "firefox":"108", "ios":"16", "safari":"16" }
es.iterator.map { "chrome":"108", "edge":"108", "firefox":"108", "ios":"16", "safari":"16" }
Результат может измениться, если вы измените целевую версию Baseline. Например, если вашему приложению необходимо поддерживать гораздо более старые браузеры из-за более строгих требований SLA, в этом случае вы, вероятно, выберете более консервативную целевую версию. В файле package.json измените конфигурацию Browserslist следующим образом:
"browserslist": "baseline 2016"
В качестве целевой версии выбрана Baseline 2016, которая будет преобразована в запрос Browserlist. После повторного запуска сборки вы сможете заметить различия в результатах работы инструментария:
npm run build
Во-первых, обратите внимание на изменение размера файлов JavaScript и CSS проекта в статистике сборщика:
assets by status 237 KiB [emitted]
asset js/home.b228612d.js 232 KiB [emitted] [immutable] [minimized] (name: home) 2 related assets
asset css/home.0c3e4fd7.css 3.91 KiB [emitted] [immutable] (name: home) 1 related asset
asset index.html 564 bytes [emitted]
Обратите внимание, что размер JavaScript-пакета увеличился почти на 30 КБ. Размер CSS-файла проекта лишь немного увеличился, поскольку autoprefixer добавил больше префиксов поставщиков на основе целевой версии 2016 года. Также обратите внимание на изменение в запросе Browserslist:
Using targets: {
"chrome": "53",
"edge": "14",
"firefox": "49",
"ios": "10",
"safari": "10"
}
По сравнению с базовой широкодоступной целевой версией, эти версии браузеров намного, намного раньше — настолько раньше, что в данном случае целевая версия Edge относится к периоду до Chromium.
Полифилы, внедряемые core-js также изменятся, что будет значительно больше, чем когда в качестве цели был выбран Baseline Widely available:
The corejs3 polyfill added the following polyfills:
es.array.filter { "edge":"14" }
es.iterator.constructor { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
es.iterator.filter { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
es.object.to-string { "edge":"14", "firefox":"49" }
es.array.includes { "firefox":"49" }
es.string.includes { "edge":"14" }
es.array.map { "firefox":"49" }
es.iterator.map { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
es.symbol { "edge":"14", "firefox":"49" }
es.symbol.description { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
es.array.iterator { "chrome":"53", "edge":"14", "firefox":"49" }
web.dom-collections.iterator { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
es.array.push { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
es.regexp.to-string { "edge":"14" }
es.array.from { "edge":"14", "firefox":"49" }
es.regexp.exec { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
es.regexp.test { "edge":"14" }
es.error.cause { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
Главный вывод здесь заключается в том, что выбранная вами базовая версия может существенно повлиять на то, как ваше приложение будет преобразовано инструментами вашего проекта. Приложение в этом примере очень простое, без множества передовых функций для разработчиков ни в React, ни в самом приложении. Для значительно более сложных приложений можно ожидать совершенно других результатов — возможно, даже больше в виде добавления полифилов, преобразований и других источников дополнительного кода для соответствия выбранной вами базовой версии.
5. Нацеливание на браузеры, используемые в других браузерах.
Напомним, что базовый набор браузеров, на которые ориентирована функция Baseline, включает следующие браузеры:
- Хром
- Chrome на Android
- Firefox
- Firefox на Android
- Край
- Safari на macOS
- Safari на iOS
Однако вы можете выбрать так называемые «браузеры-доноры». Это браузеры, чьи движки основаны на движках браузеров из основного набора — чаще всего это Chromium. К ним относятся такие браузеры, как Opera, Samsung Internet и другие. Вы можете выбрать эти браузеры в дополнение к браузерам из основного набора, добавив параметр with downstream к любому допустимому запросу Baseline Browserslist:
"browserslist": "baseline widely available with downstream"
Это ориентировано на браузеры, использующие указанные выше браузеры, в соответствии с базовым стандартом «Широко распространенный». Чтобы увидеть, как это преобразуется в запрос Browserslist, пересоберите проект:
npm start
Затем обратите внимание на изменение в запросе Browserslist:
Using targets: {
"android": "108",
"chrome": "108",
"edge": "108",
"firefox": "108",
"ios": "16",
"opera": "94",
"opera_mobile": "80",
"safari": "16",
"samsung": "21"
}
Вы также можете выбрать браузеры, на которые распространяется действие программы, по годам. Например:
"browserslist": "baseline 2016 with downstream"
При такой конфигурации ваш запрос Browserslist изменится следующим образом:
Using targets: {
"android": "53",
"chrome": "53",
"edge": "14",
"firefox": "49",
"ios": "10",
"opera": "40",
"opera_mobile": "80",
"safari": "10",
"samsung": "6.2"
}
6. Инструменты для удаления ворса и другие приспособления
Встроенные в Browserslist запросы Baseline удобны для таких инструментов, как сборщики и другие части вашей цепочки инструментов, но они также полезны и для других инструментов, например, для линтеров, которые включили цели Baseline в свою конфигурацию.
Хороший пример поддержки Baseline в линтерах — это ESLint , который в рамках проверки CSS предоставляет правило use-baseline с помощью @eslint/css , позволяющее выбрать Baseline Newly, Baseline Widely available или Baseline years. Аналогичное правило есть и в пакете @html-eslint/eslint-plugin сообщества, позволяющем сделать то же самое для функций HTML в файле eslint.config.js :
export default [
/* Omitted JS linting rules ... */
// Lint CSS files for Baseline:
{
files: ["**/*.css"],
plugins: {
css
},
language: "css/css",
rules: {
"css/no-duplicate-imports": "error",
// Lint CSS files to make sure they are using
// only Baseline Widely available features:
"css/use-baseline": ["warn", {
available: "widely"
}]
},
},
// Lint HTML and JSX files for Baseline:
{
files: ["**/*.html"],
...html.configs["flat/recommended"],
rules: {
// Lint HTML files to make sure they are using
// only Baseline Widely available features:
"@html-eslint/use-baseline": ["warn", {
available: "widely"
}]
}
}
];
В данной конфигурации следует отметить несколько моментов:
- В обоих пакетах для проверки синтаксиса HTML и CSS используется правило
use-baseline, которое устанавливается в режим широкой доступности с помощью параметра конфигурацииavailable: "widely". - Для обоих пакетов линтера уровень логирования нарушений установлен на
"warn". Его можно установить на"error", чтобы завершить сборку с кодом ошибки.
Возможно, вы уже видели вывод линтера при выполнении команды npm run build , но чтобы увидеть вывод линтера отдельно, вы можете выполнить следующую команду:
npm run lint
В результате вы увидите несколько предупреждений в CSS-коде проекта:
/var/www/baseline-demos/tooling/webpack-browserslist-config-baseline/src/css/normalize.css
222:3 warning Property 'outline' is not a widely available baseline feature css/use-baseline
/var/www/baseline-demos/tooling/webpack-browserslist-config-baseline/src/css/styles.css
62:3 warning Property 'outline' is not a widely available baseline feature css/use-baseline
81:23 warning Value 'subgrid' of property 'grid-template-rows' is not a widely available baseline feature css/use-baseline
7. Подведение итогов
Использование запросов Baseline, предоставляемых Browserslist, в вашем проекте требует некоторого понимания базовых инструментов сборки и самого Browserslist, но сам процесс их размещения в проекте довольно прост. Главное преимущество заключается в том, что вам больше не нужно думать о поддерживаемых браузерах с точки зрения номеров версий, а есть целевая задача Baseline, которая выполняет за вас основную работу.
Кроме того, существует версия этой демонстрации, работающая на Rollup , и этот Codelab можно в значительной степени выполнить, используя и эту демонстрацию.
Поддержка Baseline также начинает появляться в других инструментах сборки. Например, Vite, использующий Rollup в качестве основы, теперь по умолчанию, начиная с версии 7, ориентируется на широко доступные браузеры Baseline .
Как бы вы ни решили поступить, внедрение доступных в Browserslist запросов Baseline в ваш проект и выбор подходящей целевой платформы Baseline позволит вам более простым и надежным способом нацеливать запросы на определенные браузеры.