Разработка

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

• Сервер разработки для предварительного просмотра кода без этапа сборки.
• TypeScript для написания кода с проверкой типов.
• Линтер для выявления ошибок в JavaScript.
• Форматтер кода для единообразного форматирования.
• Плагины IDE для Lit для проверки шаблонов Lit и подсветки их синтаксиса.

Ознакомьтесь с документацией по стартовым наборам, чтобы легко настроить среду разработки со всеми этими предварительно сконфигурированными возможностями.

Все пакеты Lit публикуются в вариантах для разработки и production-сборках с использованием поддержки Node условий экспорта.

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

Чтобы использовать сборку для разработки, необходимо указать условие экспорта "development" в инструментах, поддерживающих условия экспорта, например Rollup, Webpack и Web Dev Server. Для каждого инструмента это делается по-разному.

Например, в Rollup с помощью плагина @rollup/node-resolve можно выбрать сборку для разработки, используя параметр exportConditions:

import { nodeResolve } from '@rollup/plugin-node-resolve';

export default {
  // ...
  plugins: [nodeResolve({
    exportConditions: ['development']
  })]
};

Сборки для разработки ReactiveElement и LitElement поддерживают дополнительные предупреждения во время выполнения, которые помогают выявлять проблемы, проверка на наличие которых в production-сборках была бы затратной.

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

• 'migration'. Предупреждения, связанные с переходом с LitElement 2.x. По умолчанию отключены.
• 'change-in-update'. Предупреждения, связанные с изменением реактивного состояния во время обновления. По умолчанию включены.

Управлять необязательными предупреждениями можно с помощью методов ReactiveElement.disableWarning() и ReactiveElement.enableWarning(). Их можно вызывать для любого подкласса ReactiveElement, включая LitElement и ваши собственные классы. Вызов этих методов для определённого класса включает или отключает предупреждения для этого класса и всех его подклассов. Например, можно отключить категорию предупреждений для всех классов ReactiveElement, всех классов LitElement или определённого подкласса LitElement.

Эти методы доступны только в сборках для разработки, поэтому не забудьте защитить их вызов. Рекомендуем использовать optional chaining.

Примеры:

import {LitElement, ReactiveElement} from 'lit';

// Turn off migration warnings on all ReactiveElements,
// including LitElements
ReactiveElement.disableWarning?.('migration');

// Turn off update warnings on all LitElements
LitElement.disableWarning?.('change-in-update');

// Turn off update warnings on one element
MyElement.disableWarning?.('change-in-update');

Также можно управлять предупреждениями в пределах одного класса, определив свойство static enabledWarnings:

class MyElement extends LitElement {
  static enabledWarnings = ['migration'];
}

Для уменьшения размера кода лучше исключать код управления предупреждениями из собственных production-сборок.

Lit поставляется в виде модулей JavaScript и использует простые спецификаторы модулей, которые пока нативно не поддерживаются большинством браузеров. Простые спецификаторы широко используются, и вы можете захотеть применять их и в собственном коде. Например:

import {LitElement, html, css} from 'lit';

Чтобы запустить этот код в браузере, простой спецификатор ('lit') необходимо преобразовать в URL, который браузер сможет загрузить (например, '/node_modules/lit/lit.js').

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

Если вам нужен сервер разработки, рекомендуем Web Dev Server.

Web Dev Server — это сервер разработки с открытым исходным кодом, который позволяет разрабатывать без сборки.

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

Установите Web Dev Server:

npm i @web/dev-server --save-dev

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

"scripts": {
  "start": "web-dev-server"
}

И файл web-dev-server.config.js:

export default {
  open: true,
  watch: true,
  appIndex: 'index.html',
  nodeResolve: {
    exportConditions: ['development'],
  },
};

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

npm run start

Для старых браузеров, например IE11, Web Dev Server может преобразовывать модули JavaScript для использования обратно совместимого загрузчика модулей SystemJS и автоматически подключать полифилы веб-компонентов. Чтобы обеспечить поддержку старых браузеров, необходимо настроить пакет @web/dev-server-legacy.

Установите пакет Web Dev Server для поддержки устаревших браузеров:

npm i @web/dev-server-legacy --save-dev

Настройте web-dev-server.config.js:

import { legacyPlugin } from '@web/dev-server-legacy';

export default {
  // ...
  plugins: [
    // Make sure this plugin is always last
    legacyPlugin({
      polyfills: {
        webcomponents: true,
        // Inject lit's polyfill-support module into test files, which is required
        // for interfacing with the webcomponents polyfills
        custom: [
          {
            name: 'lit-polyfill-support',
            path: 'node_modules/lit/polyfill-support.js',
            test: "!('attachShadow' in Element.prototype)",
            module: false,
          },
        ],
      },
    }),
  ],
};

Полные инструкции по установке и использованию см. в документации Web Dev Server.

TypeScript расширяет язык JavaScript, добавляя поддержку типов. Типы помогают заблаговременно выявлять ошибки и делают код более читабельным и понятным.

Чтобы установить TypeScript в проект:

npm install typescript --save-dev

Чтобы собрать код:

npx tsc --watch

Полные инструкции по установке и использованию см. на сайте TypeScript. Для начала особенно полезны разделы об установке TypeScript и использовании его возможностей.

Проверка линтером помогает выявлять ошибки в коде. Для проверки кода Lit мы рекомендуем использовать ESLint.

Чтобы установить ESLint в проект:

npm install eslint --save-dev
npx eslint --init

Чтобы запустить его:

npx eslint yourfile.js

Или добавьте его в npm-скрипты:

{
  "scripts": {
    "lint": "eslint \"**/*.{js,ts}\"",
  }
}

Полные инструкции по установке и использованию см. в документации ESLint.

Также мы рекомендуем eslint-plugin-lit для ESLint, который обеспечивает проверку HTML-шаблонов Lit, включая распространённые проверки HTML и специальные правила для Lit.

Интеграция проверки линтером в рабочий процесс IDE помогает выявлять ошибки как можно раньше. См. раздел Плагины IDE для Lit, чтобы настроить IDE для работы с Lit.

Форматтер кода помогает сделать код единообразным и читабельным. Интеграция выбранного форматтера с IDE гарантирует, что ваш код всегда будет чистым и аккуратным.

Среди популярных вариантов:

• Prettier: плагин для VS Code
• Beautifier: плагин для VS Code
• Clang: плагин для VS Code

При разработке с Lit могут пригодиться различные плагины IDE. В частности, мы рекомендуем использовать подсветку синтаксиса, поддерживающую шаблоны Lit.

lit-plugin обеспечивает подсветку синтаксиса, проверку типов и другие возможности для шаблонов Lit. Он доступен для VS Code. Также можно использовать плагин компилятора TypeScript ts-lit-plugin, совместимый с Sublime Text и Atom.

lit-plugin и ts-lit-plugin обеспечивают:

• Подсветку синтаксиса
• Проверку типов
• Автодополнение кода
• Документацию при наведении курсора
• Переход к определению
• Проверку линтером
• Быстрые исправления

Для ряда редакторов кода ESLint предлагает интеграции. Если в конфигурации ESLint установлен eslint-plugin-lit для ESLint, IDE будет отображать ошибки и предупреждения, связанные с Lit.

Другие плагины IDE, а также дополнительные инструменты и сведения см. в репозитории awesome-lit-html.

Изменить эту страницу