React ネイティブプロジェクトで依存関係とライブラリを管理する方法

[] ネイティブのドキュメント] は、プロジェクトを初期化し、デフォルトの依存ツリーを初期化するための詳細を提供します。

依存関係のインストール

React ネイティブ プロジェクトに新しいライブラリを追加するには、パッケージ マネージャーのインストール コマンドを使用します。例えば、[] をインストールするには、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 Podをインストールします。
• Android: ライブラリの は自動的にマージされますが、ライブラリの React ネイティブパッケージが自動登録されていない場合は、[リポジトリを追加またはを変更する必要があります。

ライブラリのインストールガイド - 実行時間クラッシュを避けるために、多くの一般的なライブラリのポスト - インストール手順を確認してください。

npx react-native link(Legacy) を使う

React Native <0.60 を使っているプロジェクトでは、ネイティブの依存関係を と手動でリンクしなければなりません。このコマンドは、Podfile と/または を修飾します。レガシープロジェクトを管理している場合は、] で自動リンクを移行することを検討してください。

依存関係の保存

デフォルトでは、npm と yarn はインストールしたパッケージを ]]package.json の下のファイルまたは ]セクションに保存します。これにより、他の開発者やデプロイ環境が単一のコマンドで同じパッケージのセットをインストールできるか () または []]) が、すべての依存関係とバージョン範囲の追跡が保持されます。

明示的にdev dependency としてマークしなくてもパッケージをインストールすると、[] で保存されます。開発中にのみ使用されるツール(例、])、[、])、使用:

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

実行時間とデベリシー間の分離が明確に維持することで、バンドルサイズが生産され、アプリストアアーカイブにおけるビルド時ユーティリティの誤った含入を防ぎます。

依存関係バージョンの管理

[]package.json]の正確なバージョンを指定すると、更新による予期しない問題を防ぐことができます。 semanticバージョン(semver)を使用して、更新を制御することができます。

• [ - 上記1.0.0(例、1.0、1.2.2.5)のマイナーまたはパッチバージョンを許容するが、 2.0.0 ではない。
• [ – パッチバージョンが1.0.0以上(例、1.0.1、1.0.0.9)以上で1.1.0以上でのみ受け付けます。
• [ - 正確にバージョン1.0.0にピン留め(更新なし)。

プロダクションアプリでは、直接の依存関係を正確にバージョン(例えば、[)にピン留めして、展開中に誤って変化を壊すことを避けることができます。ロックファイル()または[])を使用して、すべてのインストールが同じツリーを生成することを保証します。

解決版の紛争

2つのライブラリが同じパッケージの異なるバージョンを必要とする場合、ピア依存警告やランタイムエラーが発生することがあります。 競合を解決するためのツール:

• [npm ls パッケージ名[ - 依存ツリーを表示し、重複を強調表示します。
• パッケージ名の理由を学習します。パッケージがインストールされている理由を説明してください。
• [npm dedupe]/[[]]yarn-deduplicate]] - 可能な限り重複したパッケージをフラットにします。

React Native では、 の競合バージョン、 、または のようなネイティブモジュールに、さらに注意を払ってください。 一貫性のあるバージョンでは、”Native Module が見つかりません。

依存関係のアップ

定期的に依存関係を更新することは、セキュリティ、パフォーマンス、および新機能へのアクセスに不可欠です。次のアプローチを使用します。

• []マイナー/パッチ更新:[ []]または] - 破壊的な変更のために安全。
• ]Majorの更新:] 手動でバージョンをにバインドし、[]を実行します。 APIの変更を破るためのライブラリの変更ログを確認します。
• [] インタラクティブなアップグレード:[]] は [] を使用して、パッケージが最新のバージョンを持っているか、選択的に更新されているかを確認します。

コアReact Native自体()を更新するときは、常に公式に従ってください。 ネイティブアップグレードガイドを有効化し、プロジェクトテンプレートファイルの変更をマージするために]を使用します。 メジャーアップデート後にiOSとAndroidのシミュレータと実際のデバイスの両方で徹底的にテストしてください。

CI/CD による更新の自動化

継続的な統合パイプラインでは、定期的にまたはを実行するジョブを設定し、マイナーな更新のためのプルリクエストを作成し、完全なテストスイートをトリガーします。 これは、安定した環境を維持しながら、依存性腐敗を防ぎます。

未使用の依存関係の除去

ライブラリが使用されていない場合は、バンドルサイズを削減し、メンテナンスを簡素化するために削除します。

npm uninstall library-name
yarn remove library-name

未使用のパッケージは、自動依存関係があったとしても、削除後でも [] で linger を することができます。 を実行するか、] を 余分なパッケージを削除します。 より徹底的なクリーンアップのために、次のことを検討してください。

• [depcheck]] - お使いのコードベースで未使用の依存関係を識別するツール。
• [npx 反応性非リンクライブラリ名] - 任意のネイティブリンクアーティファクトを削除します。

依存関係管理のためのベストプラクティス

• [ 定期的なレビューと更新の依存関係。[[ 月間「依存監査」をスケジュールし、セキュリティアドバイザリー(])をチェックし、最新の安定版に更新し、廃止されたパッケージをクリーンアップします。
• [] 最小限の依存関係をキープします。[]] 避けます。 焦点を絞った、よく維持された代替手段(例: ) アイコン全体にインポートするのではなく、UIキット。
• [] 管理更新にセマンティックバージョンを使用する.[[]]] ピンメジャーバージョンと再現性のためのロックファイルに依存します。
• [依存関係を更新した後に徹底的にテストします。[ ユニットテストを実行し、統合テストを実行し、両方のプラットフォームでUIテストを手動します。 変更されたネイティブモジュールの動作に注意を払う。
• [] クリーン] をキープし、ファイルをロックします。[] は、矛盾を招くマニュアル編集を避けます。 または ] をコミットして、環境全体に同じインストールを確実にするためにバージョン管理します。
• [] 決定的なインストールとワークスペースが必要な場合は、npm を超えるヤーンを準備します。[]] ヤーンベリー(v2 +)は、インストールを高速化できるプラグイン'n'Playを提供しますが、React Native との互換性チェックが必要です。
• ]を使用して、デバッグ前に一般的な依存性および環境の問題を診断します。

CocoaPodとGradleでネイティブの依存関係を処理

iOS では、常に [ をコミットして、ネイティブのPodのバージョンをロックします。 React ネイティブライブラリをアップグレードすると、React ネイティブライブラリをアップグレードして、最新の互換のPodバージョンを取得できます。 Android の場合、 ]] が に競合していないか、 がライブラリ全体で値が表示されることを確認してください。

React Native でモノレポスを使う

プロジェクトがmonorrepo(例えば、Nx、Turtrepo、Lerna)を使用している場合は、作業スペースでルートレベルの依存関係を管理します。 ホイストに注意してください。一部のReact Nativeライブラリは、]オプションを必要としているため、依存関係の競合を避けることができます。

一般的な落札とテムを避ける方法

• []npmインストール後の「モジュールが見つからない場合」エラー:[]を削除、]、[新しいインストールを実行します。 糸を使用する場合、 ]]を削除し、(ただしロックファイルで注意が必要です)。
• []:] ライブラリを追加した後、iOS ビルドが失敗し、 を実行し、ライブラリの podfile が正しく参照されていることを確認します。 「ライブラリが見つからない」エラーの Xcode ビルドログを確認してください。
• [] ネイティブモジュールが不足しているため、Android のランタイムクラッシュ:[]) ライブラリの Android パッケージが自動登録されているか、手動で [] を追加したことを確認してください。 。
• [] 記号やメソッドのコンフリクトを重複:[ を使用して、ライブラリの1つをアップグレードまたはダウングレードすることで、ネイティブコードを競合する解決します。

外部リソース

• [] ネイティブの公式ドキュメント – 依存関係[
• [npm コマンド参照[]をインストールします。
• []利用とコマンド[]]
• [audit-ci – CI[のセキュリティ監査]

効果的な依存性管理は、React Native プロジェクトを安全で効率的かつ保守可能に保つことができます。これらの慣行に従って、開発を合理化し、古いライブラリや互換性のないライブラリによって引き起こされる潜在的な問題を減らし、あなたのチームは依存性地獄と戦うのではなく、機能の構築に集中することができます。