Create React App で「src」ディレクトリの外にあるモジュールを取り出さずにインポートするにはどうすればよいですか?

Create-React-App の src ディレクトリ外でのインポート制限の克服

Create-React-App (CRA) は厳格なインポート ルールを適用します。モジュールが src ディレクトリの外にインポートされるのを防ぎます。この制限により、パブリック フォルダーなど、他のディレクトリからファイルにアクセスするときにエラーが発生します。

ModuleScopePlugin について

CRA 内の ModuleScopePlugin プラグインにより、アプリのソース コードのインポートが確実に維持されます。 src フォルダー内に制限されます。このプラグインは外部モジュールへのアクセスを保護し、包含された安全なアプリ環境を確保します。

非イジェクト ソリューション

正式には、この制限をバイパスするには CRA からの「イジェクト」が必要です。基礎となる Webpack 設定への直接アクセスを可能にするプロセス。ただし、取り出すと、将来の CRA 機能やアップデートにアクセスできなくなるリスクが伴います。

取り出す代わりに、次の非公式ソリューションを検討してください:

• 再配線: を使用します。 Webpack 構成を動的に変更するには、rewire パッケージを使用します。これにより src 外部のモジュール アクセスが可能になりますが、プラグインの保護が弱くなるためお勧めできません。
• react-app-alias: このライブラリは、追加の src のようなディレクトリを作成します。 ModuleScopeプラグイン。これにより、セキュリティを維持しながら柔軟性が向上します。

パブリック フォルダーからのインポートを避ける

パブリック フォルダーからのアセットのインポートは、ビルド内で複製されるため非効率的です。フォルダ。代わりに、アセットを src に保存して、バンドル サイズと読み込み効率を最適化します。

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