PassFront
  1. PassFront
  2. База знаний
  3. Компоненты

Как взять компонент из одного репозитория для использования в другом?

Компоненты

Задача «взять компонент из другого репозитория» решается несколькими способами — от быстрых до инфраструктурных. Выбор зависит от масштаба переиспользования.

npm-пакет (стандартный путь)

Компонент публикуется как пакет — в публичный npm или приватный registry (npm private, GitHub Packages, Verdaccio):

репо A: сборка компонента (tsup/vite lib mode) → npm publish
репо B: npm install @company/ui-button
  • Плюсы: версионирование, changelog, независимые релизы; стандарт для дизайн-систем.
  • Минусы: инфраструктура (registry, CI-публикация), задержка «изменил → доехало» (release-цикл).
  • Требования к пакету: собранный ESM/CJS + типы, peerDependencies на react (чтобы не задвоить React у потребителя).

Установка прямо из git

npm install git+https://github.com/team/ui-lib.git#v1.2.0

Быстро, без registry; но нужен build-шаг в пакете (prepare) и дисциплина тегов. Подходит для пары внутренних потребителей.

Монорепозиторий

Если репозитории можно объединить: workspace-пакеты (pnpm workspaces + Turborepo/Nx) — компонент лежит рядом, импортируется как пакет, изменения видны мгновенно без публикации. Лучший DX для команды, владеющей обоими кодами.

Другие варианты

  • Git submodule/subtree — подключение исходников; хрупко, сегодня почти не используют.
  • Module Federation — подгрузка компонента в рантайме из другого приложения (микрофронтенды); для независимых деплоев, не для «просто переиспользовать кнопку».
  • Копирование кода (vendoring) — осознанный форк, если синхронизация не нужна (подход shadcn/ui).

Коротко для собеседования

Основной путь — оформить компонент npm-пакетом (сборка + типы + peerDeps на react) и ставить из приватного registry; быстрые альтернативы — установка из git по тегу или монорепо с workspaces (мгновенная связь). Для рантайм-интеграции микрофронтендов — Module Federation; копирование — осознанный последний вариант.

Другие вопросы раздела