L’extrémité avant
Un moyen easy de maintenir un code propre dans React
L’utilisation d’importations absolues pour mieux organiser votre projet React est un wonderful moyen. Les importations family members sont difficiles à suivre et à casser lors du refactoring. Les importations absolues gèrent votre projet plus facilement au fur et à mesure de sa croissance. Oubliez les longues importations family members après cet article. Ceci est mon 40e article sur Medium.
Que faire si la construction de dossiers de votre projet est complexe et que vous devez monter dedans ? À l’intérieur de vos composants, vous avez des importations qui ressemblent à l’exemple ci-dessous avec des importations family members.
import {MyComponent} from ‘../../../../parts/MyComponent’;
Vous pouvez interrompre l’importation ci-dessus en modifiant le chemin du composant à partir duquel vous importez votre MyComponent. Supposons que vous décidiez de déménager MyComponent dans son propre file. Ensuite, vous devrez mettre à jour toutes vos importations dans votre projet et en ajouter une supplémentaire ../ à toutes vos importations. Les importations family members ont d’autres problèmes.
- Assez difficile à refactoriser
- Cela s’aggrave au fur et à mesure que vous vous y enfoncez.
- Vous devez modifier l’intégralité de la base de code si vous devez extraire le code à utiliser en externe en tant que module NPM.
En utilisant des importations absolues, vous pouvez attribuer un alias à certains dossiers avec un nom comme ci-dessous :
import {MyComponent} from ‘parts/MyComponent’;
Les importations absolues présentent certains avantages.
- Il n’y a pas
../../../../hell. Donc plus facile de taper les importations. - Copiez-collez facilement le code avec les importations dans un autre fichier du projet et n’ayez pas à bricoler avec les chemins d’importation.
- C’est courtroom et doux
L’exemple ci-dessous est un fichier avec des importations family members.
Rendez les importations dans le fichier ci-dessus plus jolies.
Par conséquent, remark pouvez-vous utiliser les importations absolues avec ReactJs ?
Utilisation de TypeScript
Si vous devez configurer des importations absolues dans votre utility Typescript, ajoutez/mettez à jour votre tsconfig.json fichier dans le répertoire racine du projet. Ensuite, vous devez mettre à jour l’possibility du compilateur baseUrl dans le fichier.
Utilisation de 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 ‘parts/MyComponent’;
Vous pouvez également utiliser l’possibility du compilateur paths aussi. Peut-être que vous voulez alias votre element file. Pour cela, vous devez configurer votre tsconfig.jsonou jsconfig.json comme indiqué ci-dessous :
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@element/*": ("src/parts/*"),
}
}
}
Vous pouvez maintenant importer les composants depuis votre file de composants comme ceci :
import {MyComponent} from ‘@element/MyComponent’;
est-ce suffisant?
Eh bien, non… Vous devez rendre votre IDE clever 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 le code VS
VS Code est assez clever pour comprendre le tsconfig.jsonou jsconfig.json déposer. Intellisense et jump-to-source fonctionnent très bien avec les importations absolues.
Par conséquent, vous pouvez suivre le processus ci-dessus.
Pour WebStrom / IntelliJ Concept
Sélectionnez le file src dans la fenêtre du projet et faites un clic droit dessus. Sélectionnez l’possibility Marquer le répertoire comme puis sélectionnez le Racine des ressources possibility.
Allez maintenant à Paramètres -> Éditeur –> Model 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 maintenant où pointent les importations absolues. Il n’y aura pas d’avertissements et la saisie semi-automatique/le saut vers la supply 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 selected comme la configuration ESLint d’Airbnb.
Avec ESLint
Create React App a également une configuration ESLint mais elle a un ensemble minimal de règles. eslint-plugin-import est utilisé par Airbnb et ce plugin vérifie les importations non définies. Lorsque vous allez utiliser la configuration ESLint d’Airbnb, cela vous donnera l’erreur ci-dessous :
Vous pouvez corriger l’erreur en ajoutant settings prop dans votre configuration ESLint. Ce paramètre prop level auquel vos importations peuvent être family members src file. Par conséquent, vous devez ajouter la mise à jour de votre configuration ESLint dans .eslintrc fichier comme celui-ci :
Vous n’avez pas besoin d’installer de modules NPM pour éviter l’erreur ESLint, ajoutez le settings l’accessoire suffit.
Par conference
Les importations absolues sont possibles depuis longtemps avec Webpack. Lorsque vous nommez votre file alias, vous devez utiliser PascalCase/CamelCase automotive c’est la conference suivie dans le Webpack.
