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

Importations relatives en dehors du répertoire src dans create-react-app

Create-react-app applique une restriction stricte contre l'importation d'actifs de l'extérieur le répertoire src. Cette restriction est implémentée via ModuleScopePlugin, qui empêche les importations relatives de violer la limite du répertoire src.

Cause première

Cette restriction garantit que tous les fichiers liés à l'application restent dans le répertoire src, fournissant une séparation claire entre le code et les autres projets actifs.

Impact

Une tentative d'importation de fichiers depuis l'extérieur du répertoire src, par exemple en accédant à des images à partir du dossier public, entraîne un message d'erreur indiquant la restriction ModuleScopePlugin.

Solutions non officielles

Il existe des solutions de contournement non officielles des solutions qui exploitent le rewire pour modifier la configuration du webpack et supprimer le ModuleScopePlugin. Cependant, cette approche est déconseillée car elle affaiblit la sécurité et les améliorations de fonctionnalités fournies par le plugin.

Approche recommandée

Pour résoudre le problème tout en préservant l'intégrité de la création -environnement React-app, vous pouvez :

1. Déplacer les actifs vers src : Transférer les images ou autres éléments souhaités dans le répertoire src.
2. Utiliser l'URL directe du dossier public : Accédez aux éléments du dossier public directement en utilisant leur URL au lieu de les importer.

Avantages de l'importation depuis src

L'importation depuis src offre plusieurs avantages :

• Chnks optimisés : Webpack regroupe les actifs de src de manière optimale, garantissant une efficacité de chargement optimale.
• Taille de paquet réduite : Importation depuis src évite la duplication dans le dossier build, minimisant ainsi la taille globale du package.

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!