Utiliser un mix d'imports relatifs et absolu

29 septembre 2023

TL;DR

Utilisation d'imports absolu dans la plupart des cas, utilisation d'imports relatifs pour fichiers du même module

Contributeurs

Gauthier Fiorentino, Suxue Li, Dorian De Rosa, Guillaume Moizan

Statut

Accepté

Contexte

La question porte sur l'utilisation d'imports relatifs ou absolus, y compris les imports absolus commençant par un ~, et comment ces choix affectent les regroupements logiques de composants/modules.

Décision

Le choix entre les imports relatifs et absolus, y compris ceux commençant par un ~, dépend des besoins spécifiques du code.

Les imports relatifs sont simples et conviennent à une structure simple ou à des fichiers locaux facilitant la logique de "grappe" de fichier en relation / module.

Les imports absolus, y compris ceux commençant par un ~, permettent d'importer des composants / fichier qui n'ont pas de liens fort avec le composant courant.

Pour illustrer, voici un exemple d'un fichier TypeScript (.tsx) et du CSS associé, montrant l'utilisation d'imports absolus pour regrouper logiquement les composants, les styles, et pour importer un composant UI réutilisable :

// Dans le fichier MyComponent.tsx
import React from 'react';
import './MyComponent.css'; // Import relatif pour le style
import CustomButton from '~/components/CustomButton'; // Import absolu pour le composant UI réutilisable

function MyComponent() {
    return (
        <div className="my-component">
            {/* Contenu du composant */}
            <CustomButton label="Cliquez-moi" />
        </div>
    );
}

export default MyComponent;

/* Dans le fichier MyComponent.css */
.my-component {
  /* Styles CSS pour MyComponent */
}

Dans cet exemple, l'importation absolue du composant CustomButton facilite l'utilisation de composants UI réutilisables au sein de MyComponent. Cela contribue à une organisation logique du code, tout en garantissant la stabilité et la maintenabilité.

Conséquences

Le code sera mieux structuré en fonction des besoins, assurant ainsi une meilleure maintenabilité. L'utilisation d'imports absolus commençant par un ~ facilite l'accès aux dépendances tierces ou aux composants partagés, tout en facilitant les regroupements logiques de composants/modules et l'intégration de composants UI réutilisables.