Comment puis-je importer des modules en dehors du répertoire « src » dans Create React App sans les éjecter ?

Surmonter les restrictions d'importation en dehors du répertoire src dans Create-React-App

Create-React-App (CRA) applique des règles d'importation strictes, empêchant les modules d'être importés en dehors du répertoire src. Cette restriction provoque des erreurs lors de l'accès aux fichiers à partir d'autres répertoires, tels que le dossier public.

Comprendre le ModuleScopePlugin

Le plugin ModuleScopePlugin au sein de CRA garantit que les importations de code source de l'application restent restreint dans le dossier src. Le plugin protège contre l'accès au module externe, garantissant un environnement d'application confiné et sécurisé.

Solutions sans éjection

Officiellement, contourner cette restriction nécessite "l'éjection" de CRA, un processus qui permet un accès direct à la configuration du webpack sous-jacent. Cependant, l'éjection comporte le risque de perdre l'accès aux futures fonctionnalités et mises à jour de CRA.

Au lieu d'éjecter, envisagez ces solutions non officielles :

• Rewire : Utiliser le package rewire pour modifier la configuration du webpack de manière dynamique. Bien que cela permette l'accès au module en dehors de src, cela n'est pas recommandé car cela affaiblit la protection du plugin.
• react-app-alias : Cette bibliothèque crée des répertoires supplémentaires de type src qui sont également couverts par le ModuleScopePlugin. Cela ajoute de la flexibilité tout en maintenant la sécurité.

Évitez d'importer à partir du dossier public

L'importation d'actifs à partir du dossier public est inefficace car ils seront dupliqués dans la build. dossier. Au lieu de cela, stockez les actifs dans src pour optimiser la taille du bundle et l'efficacité du chargement.

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!