La restructuration du code est une tâche courante dans le développement logiciel, et la gestion des déclarations d'importation en JavaScript peut parfois devenir un défi. Un scénario fréquent est de passer d'un import groupé unique à des imports individuels pour chaque composant ou module, souvent pour améliorer la lisibilité, faciliter les optimisations de tree-shaking, ou s'aligner sur des conventions spécifiques.

Deux approches principales peuvent être considérées pour effectuer cette transformation :

1. Refactorisation manuelle : Modifier directement les fichiers dans votre éditeur de code ou IDE. C'est simple pour quelques fichiers, mais devient fastidieux et source d'erreurs pour des projets de grande taille.
2. Script d'automatisation : Développer un script qui parcourt votre base de code et applique les modifications de manière programmatique. Cette méthode est nettement plus efficace pour les projets étendus.

Cet article se concentre sur l'approche automatisée en utilisant un script Node.js. Ce script est conçu pour balayer les fichiers d'un projet et transformer des imports comme import { ComposantA, ComposantB } from '@/composants'; en déclarasions séparées comme import ComposantA from "@/composants/ComposantA"; et import ComposantB from "@/composants/ComposantB";.

Mise en place du script Node.js

Pour commencer, vous aurez besoin du module glob pour identifier les fichiers cibles dans votre projet. Installez-le via npm :

npm install glob

Créez ensuite un fichier, par exemple scinder-imports.js, et insérez le code suivant :

const fs = require('fs');
const glob = require('glob');

// Définition des chemins de fichiers à analyser
const CHEMINS_CIBLES = 'src/**/*.js'; // Adaptez ce chemin à la structure de votre projet

glob(CHEMINS_CIBLES, (erreurRecherche, listeFichiers) => {
  if (erreurRecherche) {
    return console.error('Échec de la recherche de fichiers :', erreurRecherche);
  }

  listeFichiers.forEach(cheminFichier => {
    fs.readFile(cheminFichier, 'utf8', (erreurLecture, contenuFichier) => {
      if (erreurLecture) {
        return console.error(`Impossible de lire le fichier : ${cheminFichier}`, erreurLecture);
      }

      // Expression régulière pour cibler les imports groupés spécifiques
      const regexImportGrouped = /import\s+\{([^}]+)\}\s+from\s+'@\/composants';/g;
      let nouveauContenu = contenuFichier.replace(regexImportGrouped, (correspondanceEntiere, nomsImports) => {
        // Traitement des noms d'imports multiples
        return nomsImports
                     .split(',') // Sépare les noms par virgule
                     .map(nomIndividuel => nomIndividuel.trim()) // Nettoie les espaces
                     .map(nomIndividuel => `import ${nomIndividuel} from "@/composants/${nomIndividuel}";`) // Crée la nouvelle déclaration
                     .join('\n'); // Rejoins les déclarations avec des sauts de ligne
      });

      // Écriture du contenu modifié dans le fichier original
      fs.writeFile(cheminFichier, nouveauContenu, 'utf8', (erreurEcriture) => {
        if (erreurEcriture) {
          console.error(`Échec de l'écriture dans le fichier : ${cheminFichier}`, erreurEcriture);
        } else {
          console.log(`Imports mis à jour dans : ${cheminFichier}`);
        }
      });
    });
  });
});

Exécution du script

Pour lancer la transformation, naviguez jusqu'à la racine de votre projet dans le terminal et exécutez la comande suivante :

node scinder-imports.js

Le script va alors parcourir tous les fichiers JavaScript spécifiés par le modèle CHEMINS_CIBLES, identifier les déclarations d'importation correspondantes à l'expression régulière, et les remplacer par des imports individuels. Vous pouvez ajuster le modèle de fichier ou la logique de l'expression régulière pour s'adapter à des cas d'usage différents ou à d'autres types de fichiers (comme .vue ou .ts).