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

Требования

Самое важное, что нужно знать о 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).

Почему нужны спецификаторы голых модулей? Спецификаторы голых модулей позволяют импортировать модули, не зная, куда именно менеджер пакетов их установил. Предложение по стандартам под названием Import maps уже начинает поставляться, которое позволит браузерам поддерживать голые спецификаторы модулей. Пока же голые спецификаторы импорта могут быть легко преобразованы на этапе сборки. Существуют также некоторые полифиллы и загрузчики модулей, которые поддерживают карты импорта.

Разбор современных браузеров

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

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

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

Комментарии