PrepBro
← Назад к вопросам

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

2.0 Middle🔥 191 комментариев
#React

Комментарии (1)

🐱
claude-haiku-4.5PrepBro AI2 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

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

Есть несколько способов переиспользовать код между репозиториями, от простых до продвинутых. Выбор зависит от сложности и частоты изменений компонента.

Способ 1: Copy-Paste (простой, но плохой)

Просто скопировать файлы компонента в новый проект:

# Скопировать компонент Button из одного проекта
cp repo1/src/components/Button.tsx repo2/src/components/Button.tsx
cp repo1/src/components/Button.test.tsx repo2/src/components/Button.test.tsx

Проблемы:

  • Изменения в исходном компоненте не синхронизируются
  • Дублирование кода
  • Сложно поддерживать

Используй только если компонент никогда не будет обновляться.

Способ 2: Git Subtree (лучше для небольших компонентов)

Позволяет встроить один git репозиторий в другой:

# Добавить компоненты из другого репо как подпапка
git subtree add --prefix vendor/ui-components \
  git@github.com:company/ui-components.git main

# Теперь компоненты в vendor/ui-components/
# и можно их импортировать

Обновить компоненты:

# Стянуть последние изменения из исходного репо
git subtree pull --prefix vendor/ui-components \
  git@github.com:company/ui-components.git main

Преимущества:

  • История commits встроена в основной репо
  • Можно делать локальные изменения
  • Простой setup

Недостатки:

  • Синхронизация может быть сложной
  • Все компоненты тянешь целиком

Способ 3: Git Submodule

Связывает отдельный репозиторий как зависимость:

# Добавить submodule
git submodule add git@github.com:company/ui-components.git \
  libs/ui-components

# Файл .gitmodules создаётся автоматически
# [submodule "libs/ui-components"]
#     path = libs/ui-components
#     url = git@github.com:company/ui-components.git

Когда клонируешь проект:

git clone git@github.com:myrepo.git
cd myrepo

# Инициализировать submodule
git submodule update --init --recursive

# Или при клоне
git clone --recurse-submodules git@github.com:myrepo.git

Обновить submodule:

# Стянуть последние изменения
git submodule update --remote

# Или вручную перейти в папку
cd libs/ui-components
git pull origin main
cd ..
git add libs/ui-components
git commit -m "update ui-components"

Преимущества:

  • История commits отдельна
  • Явная версионизация
  • Можно иметь несколько versions

Недостатки:

  • Новичкам сложно понять
  • Требует дополнительных команд
  • Не очень удобны для локальной разработки

Способ 4: NPM/Yarn Package (лучший вариант)

Публикуй компоненты в NPM registry:

# В репо с компонентами: ui-components/

# Структура проекта
ui-components/
├─ src/
│  ├─ Button.tsx
│  ├─ Input.tsx
│  └─ index.ts
├─ package.json
├─ tsconfig.json
└─ README.md

package.json в ui-components:

{
  "name": "@company/ui-components",
  "version": "1.0.0",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "exports": {
    ".": "./dist/index.js",
    "./Button": "./dist/Button.js",
    "./Input": "./dist/Input.js"
  },
  "files": [
    "dist"
  ],
  "scripts": {
    "build": "tsc",
    "publish": "npm publish --access public"
  },
  "dependencies": {
    "react": "^19.0.0"
  },
  "devDependencies": {
    "typescript": "^5.0.0",
    "@types/react": "^19.0.0"
  }
}

Публикация:

# В папке ui-components
npm run build          # Собрать TypeScript
npm publish           # Опубликовать в NPM
# Версия: 1.0.0 published

Использование в других проектах:

# В другом проекте
npm install @company/ui-components

# или
yarn add @company/ui-components

Импорт:

// Импортировать весь пакет
import { Button, Input } from '@company/ui-components'

// Или конкретный компонент
import Button from '@company/ui-components/Button'

function App() {
  return <Button>Click me</Button>
}

Обновление:

# Когда вышла новая версия
npm update @company/ui-components

# Или конкретная версия
npm install @company/ui-components@1.2.0

Преимущества:

  • Стандартный способ в JavaScript экосистеме
  • Версионирование (semver)
  • Легко обновлять
  • Работает с любыми инструментами
  • Приватный NPM для закрытого кода

Способ 5: Monorepo (лучший для большого количества компонентов)

Удерживать несколько проектов в одном репо:

monorepo/
├─ packages/
│  ├─ ui-components/      # Общие компоненты
│  │  ├─ src/
│  │  │  └─ Button.tsx
│  │  ├─ package.json
│  │  └─ tsconfig.json
│  │
│  ├─ web-app/            # Веб приложение
│  │  ├─ src/
│  │  ├─ package.json
│  │  └─ tsconfig.json
│  │
│  └─ mobile-app/         # Мобильное приложение
│     ├─ src/
│     ├─ package.json
│     └─ tsconfig.json
│
├─ package.json           # Root
├─ pnpm-workspace.yaml    # или lerna.json
└─ tsconfig.json

pnpm-workspace.yaml:

packages:
  - 'packages/*'

Использование:

# В root package.json
{
  "workspaces": [
    "packages/*"
  ]
}

# В web-app/package.json
{
  "dependencies": {
    "@company/ui-components": "workspace:*"
  }
}

Импорт:

// В web-app
import { Button } from '@company/ui-components'

Инструменты для monorepo:

  • pnpm — лучший (workspace, быстрый)
  • Lerna — classic монорепо инструмент
  • Yarn — встроенный workspace
  • Nx — modern монорепо с кешированием

Преимущества:

  • Один репо для всех проектов
  • Shared dependencies
  • Atomic commits для всех пакетов
  • Легко рефакторить
  • Один CI/CD pipeline

Способ 6: Local npm package (для локальной разработки)

Если разрабатываешь компоненты и приложение одновременно:

# В ui-components/ directory
npm link

# В приложении
cd ../web-app
npm link @company/ui-components

# Теперь изменения в ui-components сразу видны в web-app

Проблема: работает только локально, на CI/CD не сработает.

Рекомендация по выбору

Выбирай способ в зависимости от ситуации:

1. Один компонент, одно использование?
   -> Copy-Paste (но плохо)

2. Несколько компонентов, используются в 2-3 проектах?
   -> NPM Package или Git Subtree

3. Много компонентов, активная разработка?
   -> Monorepo (pnpm или Nx)

4. Отдельная библиотека компонентов?
   -> NPM Package

5. Один небольшой репо, одна команда?
   -> Git Submodule (если нужна версионизация)

Практический пример: NPM Package

Создание и публикация:

# 1. Создать репо
mkdir ui-components
cd ui-components
npm init

# 2. Написать компонент
# src/Button.tsx
export function Button({ children, ...props }) {
  return <button {...props}>{children}</button>
}

# 3. Собрать
npm run build

# 4. Опубликовать
npm publish

# 5. В другом проекте
npm install @company/ui-components
import { Button } from '@company/ui-components'

Итого

Лучший способ для большинства проектов — NPM Package.

Он дает:

  • Версионирование
  • Легкую синхронизацию
  • Стандартный подход
  • Возможность делиться с командой
  • Работает везде (локально и на CI/CD)

Для больших организаций — Monorepo, потому что:

  • Экономит время на бойлерплейте
  • Упрощает рефакторинг
  • Един git history
  • Лучшая DX для разработчиков