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

create-react-app の src ディレクトリ外の相対インポート

Create-react-app は、外部からのアセットのインポートに対して厳しい制限を適用しますsrc ディレクトリ。この制限は ModuleScopePlugin によって実装され、相対的なインポートが src ディレクトリの境界を突破するのを防ぎます。

根本原因

この制限により、アプリケーション関連のすべてのファイルがディレクトリ内に留まることが保証されます。 src ディレクトリ。コードと他のプロジェクトを明確に分離します。 assets.

影響

パブリック フォルダーの画像にアクセスするなど、src ディレクトリの外部からファイルをインポートしようとすると、ModuleScopePlugin の制限を示すエラー メッセージが表示されます。

非公式解決策

rewire を利用して Webpack 構成を変更し、ModuleScopePlugin を削除する非公式の回避策があります。ただし、このアプローチは、プラグインによって提供されるセキュリティと機能拡張が弱まるため、推奨されません。

推奨アプローチ

作成の整合性を維持しながら問題を解決するには-react-app 環境では、次のことができます:

1. アセットを次の場所に移動しますsrc: 必要な画像またはその他のアセットを src ディレクトリに転送します。
2. パブリック フォルダーからの直接 URL を使用: インポートする代わりに、URL を使用してパブリック フォルダーからアセットに直接アクセスします。 .

からインポートする利点src

src からのインポートにはいくつかの利点があります。

• 最適化されたチャンク: Webpack は src からのアセットを最適にバンドルし、最適な読み込み効率を保証します。
• パッケージ サイズの縮小: インポートfrom src により、ビルド フォルダー内の重複が回避され、パッケージ全体のサイズが最小限に抑えられます。

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