En utilisant des importations absolues, vous pouvez donner à certains dossiers un nom comme ci-dessous :
import {MyComponent} from ‘components/MyComponent’;
Les importations absolues présentent certains avantages.
- Il n’y a pas
../../../../hell. Il est donc plus facile de saisir les importations. - Copiez-collez facilement le code avec les importations dans un autre fichier du projet sans avoir à bricoler les chemins d’importation.
- C’est court et doux
L’exemple ci-dessous est un fichier avec des importations relatives.
Rendre les importations dans le fichier ci-dessus plus jolies.
Alors, comment utiliser les importations absolues avec ReactJs ?
Utiliser TypeScript
Si vous devez configurer des importations absolues dans votre application Typescript, ajoutez/mettez à jour votre tsconfig.json fichier dans le répertoire racine du projet. Ensuite, vous devez mettre à jour l’option du compilateur baseUrl dans le fichier.
Utiliser Javascript
La configuration des importations absolues vers Typescript et la configuration des importations absolues vers JavaScript sont à peu près le même processus. Créer le jsconfig.json fichier dans le répertoire racine du projet. Ensuite, vous devez mettre à jour l’extrait suivant.
Vous pouvez maintenant importer vos composants comme ceci.
import {MyComponent} from ‘components/MyComponent’;
Vous pouvez également utiliser l’option du compilateur paths aussi. Peut-être souhaitez-vous donner un alias à votre component dossier. Pour cela, vous devez configurer votre tsconfig.jsonou jsconfig.json comme indiqué ci-dessous :
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@component/*": ["src/components/*"],
}
}
}
Vous pouvez maintenant importer les composants de votre dossier de composants comme ceci :
import {MyComponent} from ‘@component/MyComponent’;
est-ce suffisant?
Eh bien non… Vous devez rendre votre IDE intelligent pour comprendre les importations absolues dans vos fichiers. Ici, je vais mentionner les progrès des 2 meilleurs IDE. Ce sont VS Code et WebStrom.
Pour VSCode
VS Code est suffisamment intelligent pour comprendre le tsconfig.jsonou jsconfig.json déposer. Intellisense et Jump to Source fonctionnent parfaitement avec les importations absolues.
Par conséquent, vous pouvez suivre le processus ci-dessus.
Pour WebStrom/IntelliJ Idea
Sélectionnez le dossier src dans la fenêtre du projet et cliquez dessus avec le bouton droit. Sélectionnez l’option Marquer le répertoire comme puis sélectionnez le Racine des ressources option.
Allez maintenant à Paramètres -> Éditeur –> Style de code -> Javascript et sélectionnez le Importations languette. Vérifiez ensuite le Utiliser des chemins relatifs aux racines du projet, de la ressource ou des sources.
WebStrom sait désormais où pointent les importations absolues. Il n’y aura aucun avertissement et la saisie semi-automatique/le saut à la source fonctionnera. Cela signifie que le mécanisme d’importation automatique utilise des importations absolues.
Si vous êtes un développeur strict comme moi, utilisez quelque chose comme la configuration ESLint d’Airbnb.
Avec ESLint
Create React App dispose également d’une configuration ESLint, mais elle comporte un ensemble minimal de règles. eslint-plugin-importation est utilisé par Airbnb et ce plugin vérifie les importations non définies. Lorsque vous comptez utiliser la configuration ESLint d’Airbnb, l’erreur ci-dessous s’affichera :
Vous pouvez corriger l’erreur en ajoutant settings prop dans votre configuration ESLint. Ce point d’appui de réglage auquel vos importations pourraient être relatives src dossier. Par conséquent, vous devez ajouter une mise à jour de votre configuration ESLint dans .eslintrc fichier comme ceci :
Vous n’avez pas besoin d’installer de modules NPM pour éviter l’erreur ESLint, ajoutez le settings l’accessoire suffit.
Par convention
Les importations absolues sont possibles depuis longtemps avec Webpack. Lorsque vous nommez votre dossier avec un alias, vous devez utiliser PascalCase/CamelCase car c’est la convention suivie dans le Pack Web.
