Как использовать Baseline в вашем проекте

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

После клонирования репозитория демо-версию можно развернуть. Этот проект использует nvm для управления версиями Node. Если у вас установлена ​​достаточно свежая версия 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 по текущий год.

Для начала выберем для проекта перемещаемую базовую версию 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, которые пока не полностью совместимы. Выбранный запрос Baseline Browserslist влияет как на core-js , так и autoprefixer .

Ещё один момент, на который стоит обратить внимание в выводе, — это то, как ваш запрос 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" }

Этот вывод может измениться при изменении базового целевого значения. Допустим, ваше приложение должно поддерживать гораздо более старый набор браузеров из-за более строгого соглашения об уровне обслуживания (SLA). В таком случае вы, вероятно, выберете более консервативный целевой показатель. В файле package.json измените конфигурацию Browserslist следующим образом: 

"browserslist": "baseline 2016"

При этом в качестве целевой версии будет выбрана версия Baseline 2016, которая будет преобразована в запрос Browserslist. Вы можете заметить различия в выводе цепочки инструментов после повторного запуска сборки: 

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" }

По сравнению с базовой версией Widely available эти версии браузеров намного более ранние — настолько ранние, что в данном случае целевая версия 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"

Это нацеливает браузеры, работающие в рамках нисходящей цепочки, в соответствии с базовым целевым значением Widely available. Чтобы увидеть, как это преобразуется в запрос 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. Линтеры и другие инструменты

Запросы Baseline, встроенные в Browserslist, удобны для таких инструментов, как сборщики пакетов и других частей вашей цепочки инструментов, но ценность представляют и другие инструменты, например, линтеры, которые приняли целевые показатели 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"       }]     }   } ];

В этой конфигурации следует отметить несколько моментов:

  1. Оба пакета линтинга HTML и CSS используют правило use-baseline , и для него установлено значение Widely available с помощью параметра конфигурации available: "widely" .
  2. Для обоих пакетов линтинга уровень ведения журнала для нарушений линтера установлен на "warn" . Его можно изменить на "error" , чтобы выводился код ошибки и сборка не выполнялась.

Возможно, вы уже видели вывод linter при запуске npm run build , но чтобы увидеть вывод linter отдельно, вы можете выполнить следующее: 

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. Подведение итогов

Использование базовых запросов, предоставляемых Browserslist, в вашем проекте требует некоторого понимания базовых инструментов сборки и самого Browserslist, но сам процесс их добавления в проект предельно лаконичен. Главное преимущество заключается в том, что вам больше не нужно думать о поддерживаемых браузерах с точки зрения номеров версий, а нужно использовать целевой базовый запрос, который сделает всю сложную работу за вас.

Кроме того, существует версия этой демо-версии, которая работает на Rollup , и большую часть данной лабораторной работы можно выполнить также с помощью этой демо-версии.

Поддержка Baseline также начинает появляться в других инструментах для сборки пакетов. Например, Vite, использующий Rollup, теперь, начиная с версии 7, по умолчанию ориентирован на широко распространённые браузеры Baseline .

Однако какой бы способ вы ни выбрали, внедрив в свой проект базовые запросы, доступные в Browserslist, и выбрав подходящую для вас базовую цель , вы сможете таргетироваться на браузеры более простым и надежным способом.