Comment puis-je importer des actifs depuis l'extérieur du répertoire « src » dans l'application Create React ?

Surmonter la restriction d'importation create-react-app en dehors du répertoire Src

Lors de l'utilisation de create-react-app, accès à des actifs tels que des images à partir de dossiers en dehors du répertoire src peut conduire à l'erreur "Module introuvable". Cette restriction est inhérente à create-react-app pour maintenir une structure de projet claire et assurer la sécurité du code.

Raison de la restriction

Le ModuleScopePlugin implémenté dans create-react- app applique la restriction selon laquelle les importations relatives à partir du répertoire src de l'application ne doivent pas s'étendre au-delà de celui-ci. Cela garantit que les actifs restent dans les limites établies du projet.

Solutions non officielles

Bien que la position officielle soit que cette restriction ne peut pas être désactivée sans être éjectée de create-react-app , plusieurs solutions non officielles existent. Cependant, l'éjection comporte le risque de perdre l'accès aux futures mises à jour et fonctionnalités.

• Rewire : Cet outil permet de modifier par programme la configuration du webpack sans l'éjecter, mais en supprimant le ModuleScopePlugin. le plugin est fortement déconseillé.
• React-app-alias : Une meilleure approche implique l'ajout de répertoires entièrement fonctionnels analogues à src qui sont également protégés par ModuleScopePlugin.

Approche recommandée

Au lieu d'importer à partir du dossier public, il est conseillé de placez les actifs dans le dossier src. Cela offre plusieurs avantages :

• Taille de téléchargement optimale du package
• Efficacité de chargement améliorée grâce au chargement optimisé des fragments du webpack
• Disponibilité cohérente des actifs via une seule URL

En adhérant à ces directives, les développeurs peuvent éviter les restrictions d'importation et maintenir l'intégrité et les performances de leurs applications créées avec créer-réagir-app.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!