Il s'agit d'une restriction spéciale ajoutée par les développeurs de create-react-app. Il est implémenté dans ModuleScopePlugin
pour garantir que les fichiers résident dans src/
. Ce plugin garantit que les importations relatives depuis le répertoire source de l'application n'atteignent pas en dehors de celui-ci.
Vous pouvez désactiver cette fonctionnalité mais uniquement après l' eject
opération du projet create-react-app.
La plupart des fonctionnalités et ses mises à jour sont cachées dans les composants internes du système create-react-app. Si vous faites eject
vous n'aurez plus certaines fonctionnalités et sa mise à jour. Donc, si vous n'êtes pas prêt à gérer et configurer l'application incluse pour configurer Webpack et ainsi de suite, n'effectuez pas l' eject
opération.
Jouez avec les règles existantes (passez à src). Mais maintenant vous pouvez savoir comment supprimer la restriction: faire eject
et supprimer ModuleScopePlugin
du fichier de configuration Webpack .
Depuis create- react -app v0.4.0, la NODE_PATH
variable d'environnement permet de spécifier un chemin pour l'importation absolue. Et puisque la v3.0.0 NODE_PATH
est obsolète au profit de la configuration baseUrl
de jsconfig.json
ou tsconfig.json
.
L'importation absolue permet d'utiliser à la import App from 'App'
place par import App from './App'
rapport à la valeur spécifiée dans l'URL de base.
Cette fonctionnalité est particulièrement utile pour les monorepos ou autres questions de configuration, mais pas pour importer des images ou quoi que ce soit d'autre à partir d'un public
dossier.
Le contenu du public
dossier sera placé dans le build
dossier et disponible par URL relative. De plus, tout ce qui est importé sera traité par webpack et sera également placé dans un build
dossier.
Si vous importez quelque chose à partir d'un public
dossier, ce dernier sera probablement dupliqué dans le build
dossier et sera disponible par deux URL différentes (ou avec différentes façons de charger), ce qui finira par aggraver la taille de téléchargement du package.
L'importation depuis le dossier src est préférable et présente des avantages. Tout sera emballé par webpack dans le bundle avec des morceaux de taille optimale et pour une meilleure efficacité de chargement .
Il existe des solutions intermédiaires, à savoir le système rewire qui vous permet de modifier par programmation la configuration du webpack. Mais supprimer le ModuleScopePlugin
plugin n'est pas une bonne solution; il est préférable d'ajouter des répertoires supplémentaires entièrement fonctionnels similaires à src
.
Actuellement, create-react-app
ne prend pas en charge les répertoires supplémentaires autres que src
dans le dossier racine. Cela peut être fait en utilisant react-app-rewire-alias
../public/images/logo_2016.png
Vous êtes monté deux fois, d'abord hors du dossier des composants, puis hors du dossier src.