Системные требования и зависимости

Carbon Components Svelte — это библиотека компонентов, созданная для интеграции дизайна IBM Carbon с фреймворком Svelte. Перед началом работы с библиотекой необходимо понимать её системные требования и зависимости, чтобы обеспечить корректное функционирование и стабильность проекта.

Node.js и менеджер пакетов

Для работы с Carbon Components Svelte требуется современная версия Node.js. Рекомендуется использовать версию 16 и выше, так как библиотека использует современный синтаксис ECMAScript и инструменты сборки, которые не поддерживаются в старых версиях. Менеджер пакетов может быть npm или yarn, в зависимости от предпочтений проекта. Проверка версии Node.js осуществляется командой:

node -v

А проверка версии npm:

npm -v

При необходимости обновления Node.js рекомендуется использовать официальные дистрибутивы с сайта nodejs.org или менеджеры версий Node, такие как nvm (Node Version Manager).

Svelte и сборка проекта

Carbon Components Svelte требует, чтобы проект был настроен с поддержкой Svelte версии 3.x и выше. Сборка проекта может выполняться через:

  • Vite — современный инструмент сборки, рекомендуемый для быстрого старта и оптимизации.
  • Rollup — классический инструмент сборки для Svelte, совместимый с большинством существующих проектов.
  • Webpack — поддерживается, но требует дополнительной настройки для корректного подключения стилей и ресурсов Carbon.

В конфигурации сборщика необходимо обеспечить поддержку ES Modules и обработку CSS, так как Carbon Components Svelte использует модульные стили и переменные SCSS.

Зависимости библиотеки

Основные зависимости Carbon Components Svelte включают:

  1. Svelte — ядро фреймворка, без которого компоненты не будут работать.
  2. Carbon Components — базовая библиотека стилей и классов Carbon, реализованная на SCSS. В проекте требуется установка:
npm install carbon-components
  1. Sass / SCSS — для корректной компиляции стилей Carbon. Обычно устанавливается через:
npm install -D sass

  1. classlist-polyfill — при необходимости поддержки старых браузеров, не поддерживающих classList на SVG или других нестандартных элементах.

  2. focus-trap и tabbable — для управления фокусом в интерактивных компонентах, таких как модальные окна и меню.

Эти зависимости обеспечивают корректное поведение компонентов, управление стилями и интерактивными элементами.

Совместимость с браузерами

Carbon Components Svelte поддерживает современные браузеры с полным набором возможностей ECMAScript 2015+ и CSS Variables. Минимальная поддержка включает:

  • Chrome — последние две версии
  • Firefox — последние две версии
  • Safari — версии 13 и выше
  • Edge — версии Chromium (79+)

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

Настройка стилей

Компоненты Carbon Svelte используют CSS-переменные и SCSS-модули. Для правильного подключения стилей требуется:

  1. Импорт базовых стилей Carbon в корневой файл проекта:
import 'carbon-components/css/carbon-components.min.css';
  1. При необходимости изменения темизации или переменных SCSS, подключение собственного файла с переопределением переменных перед импортом стилей библиотеки:
$carbon--theme: $carbon--theme--g100;
@import 'carbon-components/scss/globals/scss/styles.scss';

Оптимизация сборки

Для крупных проектов рекомендуется использовать tree-shaking для удаления неиспользуемых компонентов и минимизации итогового бандла. Carbon Components Svelte поддерживает импорт отдельных компонентов, что позволяет импортировать только необходимые модули:

import Button from 'carbon-components-svelte/lib/Button/Button.svelte';

Это снижает вес проекта и ускоряет загрузку страницы.

Версионная совместимость

В проектах важно следить за совместимостью версий:

  • Carbon Components Svelte должен соответствовать версии Carbon Components.
  • Версия Svelte в проекте должна быть не ниже 3.0.
  • Совместимость с инструментами сборки (Vite, Rollup, Webpack) должна быть подтверждена тестами, особенно при использовании TypeScript или SSR (SvelteKit).

Наличие корректной среды и правильно установленных зависимостей является фундаментом для стабильной работы Carbon Components Svelte, предотвращает ошибки компиляции и конфликт версий, а также обеспечивает полноценное использование всех возможностей библиотеки.

Оглавление