Система сборки
Цель и область применения
Этот документ описывает систему сборки, которая компилирует исходный код TypeScript в распространяемые JavaScript-модули для публикации в NPM. Он объясняет процесс компиляции, скрипты сборки, конфигурацию TypeScript, структуру выходных данных и настройку распространения. Информацию о структуре пакета и экспорте модулей см. в разделе Структура пакета. Подробности о системе реестра компонентов, которая обеспечивает установку отдельных компонентов, см. в разделе Реестр компонентов. Для деталей, специфичных для TypeScript, включая псевдонимы путей и генерацию типов, см. Конфигурация TypeScript.Обзор конвейера сборки
Система сборки преобразует исходный код TypeScript вsrc/ в JavaScript-модули ES2022 с файлами объявлений в dist/, а также в генерируемые артефакты, которые поддерживают Tailwind CSS и инструменты сборки.
Команды сборки
Система сборки предоставляет несколько npm-скриптов, определенных вpackage.json, для различных аспектов сборки и рабочего процесса разработки.
Основные команды сборки
| Команда | Скрипт | Назначение |
|---|---|---|
npm run build | tsc -p tsconfig.json | Компиляция TypeScript в JavaScript с файлами объявлений |
npm run type-check | tsc --noEmit | Проверка типов без генерации файлов |
npm run lint | eslint src --ext .ts,.tsx | Проверка качества и стиля кода |
npm run lint:fix | eslint src --ext .ts,.tsx --fix | Автоматическое исправление проблем линтинга |
Команды инструментов
| Команда | Скрипт | Назначение |
|---|---|---|
npm run scan | bunx buildy-ui@latest scan | Генерация метаданных реестра компонентов |
npm run build:r | bunx buildy-ui@latest build | Сборка пакета реестра |
npm run publish | cd packages/registry && npm version patch && npm publish | Публикация реестра в NPM |
Ручные скрипты сборки
| Скрипт | Команда | Назначение |
|---|---|---|
| Извлечение CVA | bun scripts/cva-extractor.ts | Извлечение CSS-классов из определений вариантов |
Процесс компиляции TypeScript
Компилятор TypeScript (tsc) преобразует исходные файлы из src/ в скомпилированные JavaScript-модули и файлы объявлений в dist/, используя конфигурацию, определенную в tsconfig.json.
Конфигурация компиляции
Компилятор TypeScript настроен в tsconfig.json1-26 со следующими ключевыми параметрами:| Параметр | Значение | Назначение |
|---|---|---|
target | ES2022 | Вывод современного JavaScript с возможностями ES2022 |
module | ES2022 | Использование ES-модулей (синтаксис import/export) |
moduleResolution | Bundler | Разрешение модулей для современных сборщиков |
rootDir | src | Корневой каталог исходного кода |
outDir | ./dist | Каталог скомпилированного вывода |
declaration | true | Генерация файлов объявлений типов .d.ts |
declarationDir | ./dist | Расположение вывода для объявлений |
jsx | react-jsx | Использование автоматического преобразования JSX React 18+ |
strict | true | Включение всех опций строгой проверки типов |
Псевдонимы путей
Компилятор разрешает псевдонимы путей во время компиляции:Структура вывода
Процесс компиляции генерирует структурированный вывод в каталогеdist/, который отражает структуру исходного кода.
Схема каталога распространения
Структура точки входа
Главная точка входа в src/index.ts1-32 определяет публичный API через серию экспортов:dist/index.js со всеми импортами, разрешенными в относительные пути.
Генерируемые типы файлов
| Тип файла | Расширение | Назначение |
|---|---|---|
| JavaScript-модули | .js | Исполняемый код ES2022 |
| Объявления типов | .d.ts | Информация о типах TypeScript |
| Карты объявлений | .d.ts.map | Сопоставление источников для объявлений |
Конфигурация распространения
Пакет настроен для распространения через NPM с помощью параметров вpackage.json, которые определяют, как скомпилированный код предоставляется потребителям.
Конфигурация экспорта модулей
Пакет определяет свои экспорты, используя современное полеexports:
main: Точка входа по умолчанию для CommonJS и старых инструментовtypes: Расположение файла объявлений TypeScriptexports["."]: Современные условные экспорты для ESM и типов
Файлы распространения пакета
Полеfiles в package.json39-43 указывает, какие файлы включены в опубликованный пакет:
Метаданные пакета
| Поле | Значение | Назначение |
|---|---|---|
name | @ui8kit/core | Имя пакета NPM |
version | 0.1.8 | Номер семантической версии |
type | module | Объявляет пакет как ESM |
sideEffects | false | Включает оптимизацию tree-shaking |
publishConfig.access | public | Разрешает публичный доступ NPM |
Инструменты времени сборки
Система сборки включает специализированные скрипты, которые выполняются во время разработки для генерации артефактов, необходимых для системы времени выполнения и приложений потребителей.Экстрактор классов CVA
Скрипт scripts/cva-extractor.ts1-339 анализирует определения вариантов для извлечения CSS-классов, используемых библиотекой.Реализация экстрактора
КлассSimpleCVAExtractor обрабатывает файлы вариантов:
-
Обнаружение файлов: Рекурсивно сканирует src/core/variants/ для файлов
.tsи.tsx -
Парсинг AST: Использует
@babel/parserдля парсинга синтаксиса TypeScript -
Обнаружение CVA: Находит вызовы функции
cva()через обход AST -
Извлечение классов: Извлекает все строковые литералы из:
- Базовых классов (первый аргумент)
- Объектов вариантов (свойства второго аргумента)
- Вложенных определений вариантов
-
Дедупликация: Использует
Set<string>для обеспечения уникальности - Генерация вывода: Записывает JSON-массив из 618 классов
Генерируемый белый список классов
Экстрактор создает src/lib/core-classes.json1-624 со следующей структурой:- Safelist Tailwind: Предотвращает удаление классов, генерируемых вариантами, при очистке CSS
- Конфигурация tw-merge: Обеспечивает безопасное слияние классов, генерируемых вариантами
Сканер реестра компонентов
Командаbuildy-ui scan генерирует src/registry.json анализируя файлы компонентов на предмет метаданных, используемых системой установки отдельных компонентов. Подробности см. в разделе Реестр компонентов.
Источники: scripts/cva-extractor.ts11-279 src/lib/core-classes.json1-624 Диаграмма 2 и Диаграмма 5 из высокоуровневой архитектуры
Артефакты сборки
Процесс сборки генерирует несколько зафиксированных артефактов, которые соединяют системы времени сборки и времени выполнения.Сводка артефактов
Детали артефактов
| Артефакт | Расположение | Генерируется | Назначение | Зафиксирован |
|---|---|---|---|---|
| Скомпилированные модули | dist/**/*.js | tsc | Код времени выполнения для пакета NPM | Да |
| Объявления типов | dist/**/*.d.ts | tsc | Информация о типах TypeScript | Да |
| Белый список CSS-классов | src/lib/core-classes.json | cva-extractor.ts | Конфигурация safelist Tailwind | Да |
| Реестр компонентов | src/registry.json | buildy-ui scan | Установка отдельных компонентов | Да |
Почему артефакты зафиксированы
Артефакты сборки зафиксированы в репозитории (в отличие от типичных проектов Node.js) по нескольким причинам:- Готовность к NPM: Каталог
dist/может быть опубликован напрямую без необходимости выполнения шагов сборки потребителями - Совместимость с подмодулями: Установки подмодулей Git могут использовать скомпилированный вывод без инструментов сборки
- Стабильность белого списка: Файл
core-classes.jsonслужит версионированным контрактом для конфигураций Tailwind - Доступность реестра:
registry.jsonобеспечивает установку отдельных компонентов без необходимости полной установки пакета
Пример рабочего процесса сборки
Типичный рабочий процесс разработки включает последовательное выполнение команд сборки:Полная последовательность сборки
Сборка для разработки
Для итеративной разработки выполните минимальную сборку:Непрерывная интеграция
Конвейер CI/CD обычно выполняет:Зависимости и требования
Система сборки требует определенных инструментов и зависимостей для корректной работы.Зависимости времени сборки
| Зависимость | Версия | Назначение |
|---|---|---|
typescript | ^5.6.3 | Компилятор TypeScript |
@babel/parser | ^7.28.4 | Парсинг AST для извлечения CVA |
@babel/traverse | ^7.28.4 | Обход AST для извлечения CVA |
bun-types | ^1.1.29 | Определения типов для среды выполнения Bun |
Зависимости времени выполнения
Они включены в пакет:| Зависимость | Версия | Назначение |
|---|---|---|
class-variance-authority | ^0.7.1 | Движок вариантов CVA |
clsx | ^2.1.1 | Утилита для имен классов |
tailwind-merge | ^3.3.1 | Слияние имен классов |
lucide-react | ^0.525.0 | Компоненты иконок |
react-resizable-panels | ^3.0.6 | Изменение размера макетов |
Одноранговые зависимости
Приложения-потребители должны предоставить:| Зависимость | Диапазон версий | Назначение |
|---|---|---|
react | ^18.0.0 || ^19.0.0 | Среда выполнения React |
react-dom | ^18.0.0 || ^19.0.0 | Рендерер React DOM |
Решение проблем сборки
Распространенные проблемы сборки
| Проблема | Причина | Решение |
|---|---|---|
tsc не найден | TypeScript не установлен | Запустите npm install для установки dev-зависимостей |
| Ошибки типов во время сборки | Строгая проверка типов | Исправьте ошибки типов или временно отключите с помощью npm run type-check |
Отсутствует вывод dist/ | Сборка не выполнена | Явно запустите npm run build |
| Классы CVA не найдены | Белый список не сгенерирован | Запустите bun scripts/cva-extractor.ts |
| Реестр не синхронизирован | Компоненты изменились | Запустите npm run scan для повторной генерации |