Понимание зависимостей в React Native

Зависимости - это внешние библиотеки или модули, на которые опирается ваш проект, чтобы добавить функциональность, оптимизировать разработку или улучшить производительность. В React Native зависимости обычно управляются через npm или yarn - менеджеры пакетов JavaScript, которые обрабатывают установку библиотеки, обновления, контроль версий и иногда даже нативное связывание кода. В отличие от стандартного веб-приложения, проекты React Native часто объединяют зависимости JavaScript вместе с нативными зависимостями (iOS CocoaPods, файлы Android Gradle), делая управление зависимостью более тонким.

Зависимости делятся на две категории:

  • JavaScript Dependencies — чистые библиотеки JS (например, , ), которые работают без какой-либо нативной конфигурации.
  • Нативные зависимости — библиотеки, которые требуют перехода на нативный код (например, , ). Им часто требуются дополнительные шаги настройки, такие как или ручные изменения Градла.

Документация React Native содержит подробную информацию о инициализации проекта и его дереве зависимостей по умолчанию.

Установка зависимостей

Чтобы добавить новую библиотеку в свой проект React Native, используйте команду установки менеджера пакетов. Например, для установки react-navigation, запустите:

npm install @react-navigation/native @react-navigation/stack

или с пряжей:

yarn add @react-navigation/native @react-navigation/stack

После установки некоторые библиотеки требуют связывания нативного кода. В React Native 0.60+ автоссылка автоматически обрабатывает большинство нативных зависимостей. Однако некоторые библиотеки (особенно те, у которых нативные пользовательские представления или сторонние SDK) по-прежнему требуют ручных шагов:

  • Для iOS: запустите или , чтобы установить подушки CocoaPods.
  • Для Android: библиотека автоматически объединена, но вам может потребоваться добавить репозиторий или изменить , если пакет React Native библиотеки не зарегистрирован автоматически.

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

Использование npx-реактивной ссылки (Legacy)

Для проектов, использующих React Native <0.60, вы должны вручную связать нативные зависимости с . Эта команда изменяет ваш Подфайл и/или . Если вы поддерживаете унаследованный проект, рассмотрите возможность перехода на автосвязь с .

Экономия зависимостей

По умолчанию npm и yarn сохраняют установленные пакеты в файле package.json в разделе или . Это позволяет отслеживать все зависимости и диапазоны их версий, гарантируя, что другие разработчики или среды развертывания могут устанавливать тот же набор пакетов с одной командой или .

Когда вы устанавливаете пакет без явной маркировки его как зависимого от разработчика, он сохраняется в разделе . Для инструментов, используемых только во время разработки (например, , , ), используйте:

npm install --save-dev package-name
yarn add --dev package-name

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

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

Определение точных версий в вашем package.json помогает предотвратить неожиданные проблемы, вызванные обновлениями. Вы можете использовать семантические версии (семвер) для управления обновлениями:

  • - принимает любую незначительную или исправленную версию выше 1.0.0 (например, 1.1.0, 1.2.5), но не 2.0.0.
  • — принимает только версии патчей выше 1,0,0 (например, 1,0,1, 1,0,9), но не 1,1,0.
  • — прикреплена к точной версии 1.0.0 (без обновлений).

Для производственных приложений прикрепите свои прямые зависимости к точным версиям (например, ), чтобы избежать случайных изменений при развертывании. Используйте файл блокировки ( или ), чтобы гарантировать, что каждая установка производит идентичные деревья .

Разрешение конфликтов версий

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

  • npm ls package-name — отображает дерево зависимостей и выделяет дубликаты.
  • , почему имя пакета — объясняет, почему установлен пакет.
  • npm dedupe /yarn-deduplicate — сплющивает дубликаты пакетов, где это возможно.

Для React Native обратите особое внимание на противоречивые версии , или нативные модули, такие как . Непоследовательные версии могут вызывать загадочные ошибки, такие как «Нативный модуль не может быть найден».

Обновление зависимостей

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

  • Минор/Обновления пакетов: или — безопасны для невзламывающих изменений.
  • Основные обновления: вручную переключают версию в и запускают .
  • Интерактивное обновление: Используйте (установлено отдельно) для того, чтобы увидеть, какие пакеты имеют последние версии, а затем выборочно обновляйте.

При обновлении самого ядра React Native () всегда следуйте официальному руководству по обновлению React Native и используйте для объединения изменений в файлы шаблонов вашего проекта.

Автоматизация обновлений с помощью CI/CD

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

Устранение неиспользуемых зависимостей

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

npm uninstall library-name
yarn remove library-name

Неиспользованные пакеты могут задерживаться в даже после удаления, если они были транзитивными зависимостями. Запустите или , чтобы удалить посторонние пакеты. Для более тщательной очистки рассмотрите:

  • depcheck — инструмент, который идентифицирует неиспользуемые зависимости в вашей кодовой базе.
  • npx react-native unlink library-name (наследие) — удаляет любые нативные связывающие артефакты.

Лучшие практики управления зависимостью

  • Регулярно просматривайте и обновляйте зависимости. Запланируйте ежемесячный «аудит зависимости» — проверьте наличие рекомендаций по безопасности (]), обновите последние стабильные версии и очистите устаревшие пакеты.
  • Сохраняйте зависимости до минимально необходимого. Избегайте библиотек «кухонной раковины»; выберите целенаправленные, хорошо поддерживаемые альтернативы (например, для иконок вместо импорта всего набора пользовательского интерфейса).
  • Используйте семантические версии для управления обновлениями. Пиновые версии и полагайтесь на файлы блокировки для воспроизводимости.
  • Тщательно проверьте после обновления зависимостей. Запустите модульные тесты, интеграционные тесты и ручное тестирование пользовательского интерфейса на обеих платформах.
  • Поддерживайте чистые и блокируйте файлы. Избегайте ручных правок, которые могут вводить несоответствия. или для контроля версий, чтобы обеспечить идентичные установки в разных средах.
  • Предпочтите пряжу над npm, если вам нужны детерминированные установки и рабочие пространства. Yarn Berry (v2+) предлагает Plug'n'Play, который может ускорить установку, но может потребовать проверки совместимости с React Native.
  • Использовать для диагностики общей зависимости и проблем окружающей среды перед отладкой.

Обработка коренных зависимостей с помощью CocoaPods и Gradle

Для iOS всегда берите на себя обязательство блокировать версии собственных подиумов. Запустите при обновлении библиотеки React Native, чтобы получить последнюю совместимую версию подиумов. Для Android убедитесь, что ваши не имеют противоречивых значений или в библиотеках.

Использование монорепо с React Native

Если в вашем проекте используется монорепо (например, Nx, Turborepo, Lerna), управляйте зависимостями на уровне корня с рабочими пространствами. Будьте осторожны с подъемом - некоторые библиотеки React Native могут потребовать опции, чтобы избежать транзитивных конфликтов зависимости.

Обычные подводные камни и как их избежать

  • «Невозможно найти модуль» ошибки после установки в npm: Удалить , и запустить новую установку. Если вы используете пряжу, удалите также (но будьте осторожны с блокировкой файлов).
  • iOS сборка не удается после добавления библиотеки: Убедитесь, что вы запускали и что подфайл библиотеки правильно ссылается.
  • Сбой времени выполнения Android из-за отсутствия родного модуля: Убедитесь, что пакет Android библиотеки автоматически зарегистрирован или что вы вручную добавили его в .
  • Дублированный символ или конфликт методов: Используйте и устраняйте конфликтующие нативные коды путем обновления или понижения рейтинга одной из библиотек.

Внешние ресурсы

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