Create React App で「src」ディレクトリの外からアセットをインポートするにはどうすればよいですか?

Src ディレクトリ外での create-react-app インポート制限の克服

create-react-app を利用する場合、画像などのアセットにアクセスするsrc ディレクトリの外のフォルダーからのファイルは、「モジュールが見つかりません」エラーが発生する可能性があります。この制限は、明確なプロジェクト構造を維持し、コードのセキュリティを確保するために、create-react-app に固有のものです。

制限の理由

create-react- で実装された ModuleScopePlugin app は、アプリの src ディレクトリからの相対インポートがそれを超えて拡張できないという制限を強制します。これにより、アセットがプロジェクトの確立された境界内に留まることが保証されます。

非公式ソリューション

公式の立場では、この制限は create-react-app からイジェクトしない限り無効にすることはできません。 、非公式の解決策がいくつか存在します。ただし、取り出すと、将来のアップデートや機能にアクセスできなくなるリスクが伴います。

• Rewire: このツールを使用すると、取り出すことなく、ModuleScopePlugin を削除して、Webpack 構成をプログラムで変更できます。プラグインは強力です
• React-app-alias: より良いアプローチには、同じく ModuleScopePlugin によって保護されている、src に類似した完全に機能するディレクトリを追加することが含まれます。

推奨されるアプローチ

一般からインポートする代わりにフォルダーにアセットを配置する場合は、src フォルダーにアセットを配置することをお勧めします。これには、次のような利点があります。

• 最適なパッケージ ダウンロード サイズ
• Webpack の最適化されたチャンク読み込みによる読み込み効率の向上
• 単一 URL による一貫したアセットの可用性

これらのガイドラインに従うことで、開発者はインポート制限を回避し、整合性を維持し、 create-react-app で構築されたアプリケーションのパフォーマンス

以上がCreate React App で「src」ディレクトリの外からアセットをインポートするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。