0Pricing
React Academy · Урок

Общие библиотеки и внутренние пакеты

Создавайте общие библиотеки интерфейса и утилит и импортируйте их во всех приложениях с помощью псевдонимов путей TypeScript.

«Общие библиотеки и внутренние пакеты» — бесплатный урок React Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.

Зачем нужны общие библиотеки?

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

Создание библиотеки

Используйте генераторы Nx, чтобы создавать типизированные библиотеки, пригодные для сборки.

# UI component library:
npx nx generate @nx/react:library ui --directory=libs/ui --importPath=@myorg/ui

# Utility library:
npx nx generate @nx/js:library utils --directory=libs/utils --importPath=@myorg/utils

# Data access library (hooks, API calls):
npx nx generate @nx/react:library data-access --importPath=@myorg/data-access

Публичный интерфейс библиотеки

Экспортируйте всё из одного index.ts (публичного интерфейса). Потребители должны импортировать данные только из @myorg/ui, а не из длинных внутренних путей.

// libs/ui/src/index.ts
export { Button } from './lib/Button';
export { Card } from './lib/Card';
export { Input } from './lib/Input';
export type { ButtonProps } from './lib/Button';

// Consumer in apps/web:
import { Button, Card } from '@myorg/ui';
// NOT: import { Button } from '@myorg/ui/src/lib/Button'; // internal path

Типы библиотек: для сборки и публикации

Собираемые библиотеки компилируются поэтапно, ускоряя сборку монорепозитория. Публикуемые библиотеки также создают пакет, совместимый с npm, для использования за пределами монорепозитория.

# Buildable (monorepo internal use only):
npx nx generate @nx/react:library ui --buildable

# Publishable (for npm too):
npx nx generate @nx/react:library ui --publishable --importPath=@myorg/ui

Контроль границ модулей

Используйте правило ESLint @nx/enforce-module-boundaries, чтобы предотвращать циклические зависимости и ограничивать список проектов, которые могут импортировать код друг друга.

// nx.json or .eslintrc
"depConstraints": [
  // Apps can only import from libs:
  { "sourceTag": "type:app", "onlyDependOnLibsWithTags": ["type:lib"] },
  // Feature libs can't import other feature libs (via shared libs only):
  { "sourceTag": "type:feature", "notDependOnLibsWithTags": ["type:feature"] }
]

Storybook для общих библиотек

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

# Generate Storybook config for the ui lib:
npx nx generate @nx/storybook:configuration ui

# Run Storybook:
npx nx storybook ui

Тестирование библиотек

У каждой библиотеки есть собственная цель тестирования. Запускайте тесты для библиотеки и всех затронутых приложений при изменении библиотеки.

# Test specific library:
npx nx test ui

# Test all affected by a change:
npx nx affected --target=test

Управление версиями в монорепозиториях

В монорепозитории все пакеты используют общий package.json и одну версию. Для публикуемых библиотек используйте такие инструменты, как @jscutlery/semver или Changesets, чтобы управлять независимым версионированием.

Перенос существующего кода в библиотеки

Постепенно переносите общий код в библиотеку: создайте библиотеку, переместите файлы, обновите импорты, а псевдонимы путей TypeScript позаботятся об остальном.

# Move a component:
# 1. Copy src/components/Button.tsx → libs/ui/src/lib/Button.tsx
# 2. Export from libs/ui/src/index.ts
# 3. Update imports across apps from relative paths to '@myorg/ui'
# 4. Delete the original file

Документация с Compodoc или Storybook Docs

Используйте тег autodocs Storybook или Compodoc, чтобы создавать документацию по интерфейсу на основе типов TypeScript и комментариев JSDoc в файлах библиотек.

Быстрая проверка

Какой должна быть единственная точка входа для потребителей, импортирующих данные из общей библиотеки Nx?

Итоги

Создавайте библиотеки с помощью nx generate, экспортируйте всё из одного index.ts и контролируйте границы модулей с помощью правил ESLint. Используйте библиотеки для сборки, чтобы ускорить поэтапные сборки, а публикуемые библиотеки — когда нужно выпускать пакет в npm. Запускайте Storybook для библиотек интерфейса, чтобы создавать изолированную документацию.

Часто задаваемые вопросы

Урок «Общие библиотеки и внутренние пакеты» бесплатный?

Да — полный текст урока «Общие библиотеки и внутренние пакеты» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.

Чему я научусь в уроке «Общие библиотеки и внутренние пакеты»?

Создавайте общие библиотеки интерфейса и утилит и импортируйте их во всех приложениях с помощью псевдонимов путей TypeScript. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать React Academy?

Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Общие библиотеки и внутренние пакеты»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке React Academy?

Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Создание монорепозитория Nx с приложениями React
  2. Общие библиотеки и внутренние пакеты
  3. Команды Nx Affected и кэширование
  4. Генераторы кода и автоматизация рабочей области
← Назад к React Academy