Перейти к содержанию

Требования

Самое важное, что нужно знать о Lit для работы с различными браузерами и инструментами, это:

  • Lit опубликован как ES2021.
  • Lit использует "голые спецификаторы модулей" для импорта модулей.
  • Lit использует современные веб-интерфейсы, такие как <template>, пользовательские элементы, теневой DOM и ParentNode.

Эти возможности поддерживаются последними версиями основных браузеров (включая Chrome, Edge, Safari и Firefox) и большинством популярных инструментов (таких как Rollup, Webpack, Babel и Terser) — за исключением поддержки голых спецификаторов модулей в браузерах.

При разработке приложения с использованием Lit либо ваши целевые браузеры должны поддерживать эти функции нативно, либо ваши инструменты должны их обрабатывать. Хотя существует большое количество браузеров с различной поддержкой современных веб-функций, для простоты мы рекомендуем сгруппировать браузеры в одну из двух категорий:

  • Современные браузеры поддерживают ES2021 и веб-компоненты. Инструменты должны разрешать голые спецификаторы модулей.
  • Устаревшие браузеры поддерживают ES5 и не поддерживают веб-компоненты или более новые API DOM. Инструменты должны компилировать JavaScript и загружать полифиллы.

На этой странице приведен общий обзор того, как выполнить эти требования в средах разработки и производства.

Рекомендации по инструментам и конфигурациям, отвечающим этим требованиям, см. в разделах Разработка, Тестирование и Сборка для производства.

Требования для современных браузеров

Единственное преобразование, необходимое для использования Lit в современных браузерах, — это преобразование голых спецификаторов модулей в URL, совместимые с браузерами.

Lit использует голые спецификаторы модулей для импорта модулей между своими подпакетами, например, так:

1
import { html } from 'lit-html';

Современные браузеры в настоящее время поддерживают загрузку модулей только из URL или относительных путей, а не из голых имен, ссылающихся на пакет npm, поэтому система сборки должна их обрабатывать. Для этого нужно либо преобразовать спецификатор в тот, который работает для ES-модулей в браузере, либо выдать на выходе модуль другого типа.

Webpack автоматически обрабатывает голые спецификаторы модулей; для Rollup вам понадобится плагин (@rollup/plugin-node-resolve).

Зачем нужны голые спецификаторы модулей? Они позволяют импортировать модуль, не зная, куда менеджер пакетов его положил. Карты импорта уже есть в текущих Chrome, Edge, Safari и Firefox, так что браузер может разрешать голые спецификаторы без сборки, если на странице задана карта. В приложениях по-прежнему чаще преобразуют спецификаторы на этапе сборки. Полифилы и загрузчики модулей с поддержкой карт импорта тоже остаются.

Какие браузеры считать современными

Все современные браузеры обновляются автоматически, и пользователи с большой вероятностью будут иметь последнюю версию. Lit и связанные с ним библиотеки протестированы на текущих версиях Chromium, Safari и Firefox, а также на двух основных версиях до Chromium и Safari и на Extended Support Release (ESR) для Firefox. Более старые версии могут продолжать работать, но это будет сделано в лучшем виде и без гарантии.

Примечание по устаревшим браузерам

Lit 3 не тестируется на устаревших браузерах, в частности, Internet Explorer 11 и Classic Edge не поддерживаются из-за нестандартного поведения DOM. Если вам необходимо поддерживать устаревшие браузеры, используйте Lit 2 с дополнительной компиляцией и/или полифиллами, как описано в Сборка для устаревших браузеров.

Комментарии