Инструменты

lit-html доступен в реестре npm. Если вы уже используете npm для управления зависимостями, можете работать с lit-html так же, как и с любой другой устанавливаемой из npm библиотекой JavaScript. В этом разделе описаны дополнительные инструменты и плагины, которые можно добавить в рабочий процесс, чтобы упростить работу с lit-html.

lit-html поставляется в виде набора модулей JavaScript. Если вы ещё не используете модули JavaScript в своём проекте, возможно, вам потребуется добавить несколько шагов в процесс разработки и сборки.

Самый простой способ добавить lit-html в проект — установить его из реестра npm.

1. Если вы начинаете новый проект, выполните следующую команду в каталоге проекта, чтобы настроить npm:

   npm init

   Следуйте инструкциям, чтобы настроить проект. Нажмите клавишу ВВОД, чтобы принять значения по умолчанию.

2. Установите lit-html.

   npm i lit-html

3. Если вы работаете над проектом со множеством зависимостей для фронтенда, воспользуйтесь командой npm dedupe, чтобы попытаться сократить количество дублирующихся модулей:

   npm dedupe

На этапе разработки могут пригодиться следующие инструменты:

• Плагины для IDE — для проверки кода и подсветки синтаксиса.
• Плагины для линтеров — для проверки шаблонов lit-html.
• Сервер разработки — для предварительного просмотра кода без этапа сборки.

При разработке с lit-html могут пригодиться различные плагины для IDE. В частности, мы рекомендуем использовать средство подсветки синтаксиса, совместимое с шаблонами в стиле lit-html. Кроме того, рекомендуем использовать линтер, например ESLint, поддерживающий современный JavaScript.

Следующие плагины для VS Code и TypeScript проверяют шаблоны lit-html на наличие ошибок:

• Плагин для VS Code

• Плагин для TypeScript (работает с Sublime и Atom)

Другие плагины

В репозитории awesome-lit-html перечислены другие плагины для IDE.

Для проверки кода lit-html рекомендуется использовать ESLint. Следующий плагин ESLint можно добавить для выявления распространённых проблем в шаблонах lit-html:

• https://github.com/43081j/eslint-plugin-lit

В качестве альтернативы можно использовать lit-analyzer CLI вместе с ESLint для обнаружения проблем в шаблонах lit-html:

• https://github.com/runem/lit-analyzer/tree/master/packages/lit-analyzer

lit-analyzer использует ту же серверную часть, что и перечисленные в разделе Плагины для IDE плагины для VS Code и TypeScript.

lit-html упакован в виде модулей JavaScript. Многие разработчики предпочитают импортировать модули, используя спецификаторы модулей без пути:

import {html, render} from 'lit-html';

Для запуска в браузере голый идентификатор ('lit-html') нужно преобразовать в путь или URL, который браузер сможет загрузить (например, '/node_modules/lit-html/lit-html.js'). ES dev server — это сервер разработки с открытым исходным кодом, который выполняет это и другие преобразования.

Также можно использовать сервер разработки Polymer CLI, если он уже установлен. Для новых проектов мы рекомендуем ES dev server.

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

ES dev server позволяет разрабатывать приложения без сборки. Он переписывает спецификаторы модулей без пути в корректные пути или URL, как того требует браузер. Для IE11 ES dev server также преобразует модули JavaScript, чтобы они использовали обратно совместимый загрузчик модулей SystemJS.

Установите ES dev server:

npm i -D es-dev-server

Добавьте команду в файл package.json:

"scripts": {
  "start": "es-dev-server --app-index index.html --node-resolve --watch --open"
}

Запустите сервер разработки:

npm run start

Полные инструкции по установке и использованию см. на сайте open-wc.

Для lit-html не требуется особая настройка тестирования. Если у вас уже настроено тестирование, оно должно работать без проблем при условии, что поддерживает работу с модулями JavaScript (и спецификаторами модулей в стиле Node, если вы их используете).

Web Component Tester (WCT) — это среда для сквозного тестирования, поддерживающая спецификаторы модулей в стиле Node. Она работает с платформой тестирования Mocha и (опционально) библиотекой проверок утверждений Chai. Есть два способа добавить WCT в проект:

• web-component-tester. Установка полного пакета WCT предоставляет Mocha и Chai, а также некоторые другие дополнения.
• wct-mocha. Только клиентская библиотека WCT. Вам потребуется самостоятельно установить Mocha и любые другие нужные дополнения.

В качестве альтернативы можно использовать средство запуска тестов Karma. Рекомендации Open Web Components включают настройку Karma, которая разрешает зависимости модулей, объединяя их с помощью webpack перед запуском тестов.

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

• Объединение модулей для повышения производительности за счёт сокращения количества передаваемых файлов.
• Минификация JavaScript, HTML и CSS.
• Преобразование кода для устаревших браузеров: компиляция кода ES6 в ES5 и преобразование модулей JavaScript в другие форматы.
• Добавление необходимых полифилов (может выполняться вручную).

Многие инструменты сборки могут выполнять эти задачи. Сейчас мы рекомендуем Rollup и предлагаем пример проекта с использованием Rollup.

Если вы используете другой инструмент или создаёте собственную конфигурацию Rollup, ознакомьтесь с разделом Особенности сборки.

Подробные сведения об этапах сборки см. в руководстве LitElement Сборка для рабочей среды. Требования lit-html такие же, как у LitElement, за исключением того, что lit-html нужен только полифил для шаблонов, а не полный набор полифилов Web Components.

Rollup хорошо подходит для работы с lit-html. Репозиторий lit-html-build содержит простой пример проекта с использованием lit-html и сборки Rollup.

Дополнительные сведения об этапах сборки см. в руководстве LitElement Сборка для рабочей среды.

В open-wc также есть материалы о сборке с помощью Rollup.

webpack — это мощный инструмент сборки с большой экосистемой плагинов.

Стандартная конфигурация webpack от open-wc станет отличной отправной точкой для сборки проектов, использующих lit-html. Инструкции по началу работы см. на странице webpack.

Если вы создаёте собственную конфигурацию для webpack, Rollup или другого инструмента, рассмотрите следующие аспекты:

• Компиляция ES6 в ES5.
• Преобразование модулей JavaScript в другие форматы для устаревших браузеров.
• Минификация шаблонов lit-html.
• Полифилы.

Подробные сведения об этих аспектах см. в руководстве LitElement Сборка для рабочей среды. Требования lit-html такие же, как у LitElement, за исключением того, что lit-html нужен только полифил для шаблонов, а не полный набор полифилов Web Components.

Для поддержки устаревших браузеров инструменты сборки должны компилировать возможности ES6 в ES5. В целом ES6 работает быстрее, чем эквивалентный код ES5, поэтому старайтесь отдавать браузерам с поддержкой ES6 код ES6.

Инструменты сборки должны принимать модули JavaScript (также называемые ES-модулями) и при необходимости преобразовывать их в другой формат модулей, например SystemJS. Если вы используете спецификаторы модулей в стиле Node, сборка также должна преобразовывать их в спецификаторы модулей, готовые для браузера.

Если вы работаете с TypeScript, компилятор TypeScript, tsc, может создавать разные выходные данные для разных браузеров. Однако при компиляции для старых браузеров известны проблемы с получаемым кодом. Мы рекомендуем настроить TypeScript для генерации современного JavaScript (целевая версия ES2017 и ES-модули), а для компиляции результата в код для старых браузеров использовать Babel.

Например, если у вас есть файл tsconfig.json, укажите следующие параметры, чтобы получить современный JavaScript:

{
  "compilerOptions": {
    "target": "es2017",
    "module": "es2015",
    ...

В процессе сборки, вероятно, потребуется минифицировать HTML-шаблоны. Большинство HTML-минификаторов не поддерживают HTML внутри шаблонных строк, используемых lit-html, поэтому вам понадобится плагин сборки с поддержкой минификации шаблонов lit-html. Минификация шаблонов lit-html может повысить производительность за счёт сокращения количества узлов в шаблоне.

• Плагин Babel. Для цепочек сборки, использующих Babel для компиляции. Стандартная конфигурация webpack от open-wc использует этот плагин.
• Плагин Rollup. Если вы создаёте собственную конфигурацию Rollup.

Минификация шаблонов — довольно небольшая оптимизация по сравнению с другими распространёнными оптимизациями, такими как минификация JavaScript, объединение и сжатие.

Для запуска в Internet Explorer 11, который не поддерживает элемент <template>, потребуется полифил. Можно использовать полифил для шаблонов, входящий в состав полифилов Web Components.

Установите полифил для шаблонов:

npm i @webcomponents/template

Используйте полифил для шаблонов:

<script src="./node_modules/@webcomponents/template/template.min.js"></script>

Примечание: при транспиляции для IE11 полифилы Babel необходимо объединить отдельно от кода приложения и загрузить до полифила для шаблонов. Пример приведён в файле index-prod.html в примере проекта Rollup.

Редактировать эту страницу