Comment éviter d'utiliser le chemin relatif des importations ( / ../../../redux/action / action1) dans create-react-app
j'ai utilisé le paquet create-react-app pour créer un site react. J'utilisais des chemins relatifs dans mon application pour importer des composants, des ressources, redux, etc. par exemple, import action from '../../../redux/action
j'ai essayé d'utiliser module-alis npm paquet, mais sans succès. Est-il un plugin que je peux utiliser pour importer basé sur le nom du dossier ou l'alias?
par exemple.,import action from '@redux/action' ou import action from '@resource/css/style.css'
4 réponses
Créer un fichier appelé .env à la racine du projet et d'y écrire:
NODE_PATH=src
redémarrez le serveur de développement. Vous devriez être en mesure d'importer quoi que ce soit à l'intérieur de src sans chemins relatifs.
Remarque: je ne recommanderais pas à appeler votre dossier src/redux parce que maintenant il est confus si redux importer se réfère à votre application ou à la bibliothèque. Au lieu de cela, vous pouvez appeler votre dossier src/app et importer des choses de app/....
nous ne le faisons pas intentionnellement soutien personnalisé syntaxe @redux parce que ce N'est pas compatible avec l'algorithme de résolution de Noeud.
nous pouvons utiliser la propriété webpack 2 resolve dans la configuration webpack.
exemple de configuration webpack en utilisant resolve:
ici component et utils sont des dossiers indépendants contenant des components React.
resolve: {
modules: ['src/scripts', 'node_modules'],
extensions: ['.jsx', '.js'],
unsafeCache: true,
alias: {
components: path.resolve(__dirname, 'src', 'scripts', 'components'),
utils: path.resolve(__dirname, 'src', 'scripts', 'utils'),
}
}
Après que nous pouvons importer directement dans les fichiers :
import UiUtils from 'utils/UiUtils';
import TabContent from 'components/TabContent';
parce que vous ne nous avez pas dit Pourquoi utiliser module-alis a été un échec? Donc je ne peux pas vous montrer comment le réparer.
N'abandonnez pas votre solution tant que vous ne connaissez pas la raison!
dans le paquet.fichier json,
éjecter ce code dans l'objet scripts comme ceci..
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom",
"eject": "NODE_PATH=src/ react-scripts eject"
},
cela activera les importations absolute path dans votre application