Simplifier les importations avec le résolveur de module de plugin Babel

Qu’est-ce que babel-plugin-module-resolver?

babel-plugin-module-résolveur est un plugin Babel qui vous aide à configurer des chemins de résolution de modules personnalisés, vous permettant de créer des alias pour les répertoires ou les fichiers de votre projet. Cela rend votre code plus propre et plus facile à maintenir en remplaçant les chemins relatifs longs et complexes par des alias absolus plus lisibles.

Installation

Pour utiliser babel-plugin-module-resolvervous devez l’installer avec Babel si ce n’est pas déjà fait. Voici comment l’installer :

npm install --save-dev babel-plugin-module-resolver

ou

yarn add --dev babel-plugin-module-resolver

Exemple de configuration de base

Jetons un coup d’œil à l’exemple de configuration :

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
        alias: {
          '@assets': './src/assets',
          '@features': './src/features',
          '@navigation': './src/navigation',
          '@components': './src/components',
          '@styles': './src/styles',
          '@service': './src/service',
          '@state': './src/state',
          '@utils': './src/utils',
        },
      },
    ],
  ],
};

Dans cette configuration :

• root L’option indique à Babel par où commencer la résolution des modules. Dans ce cas, il pointe vers le ./src répertoire, ce qui signifie que tous les chemins seront résolus par rapport à src.
• alias L’option vous permet de définir des raccourcis pour différents répertoires de votre projet.

Comment configurer votre projet

1. Installez le plugin en utilisant npm ou yarn:

   npm install --save-dev babel-plugin-module-resolver

2. Mettez à jour votre configuration Babel (babel.config.js) avec le module-resolver plugin et configurez vos chemins personnalisés, comme indiqué dans l’exemple.
3. Assurez-vous que la saisie semi-automatique de votre éditeur peut gérer cela. Certains éditeurs comme VSCode nécessitent une configuration supplémentaire dans le jsconfig.json ou tsconfig.json fichier pour reconnaître les alias. Voici un exemple de configuration pour VSCode :

   {
     "compilerOptions": {
       "baseUrl": "./src",
       "paths": {
         "@assets/*": ["assets/*"],
         "@features/*": ["features/*"],
         "@service/*": ["service/*"],
         "@styles/*": ["styles/*"],
         "@navigation/*": ["navigation/*"],
         "@components/*": ["components/*"],
         "@state/*": ["state/*"],
         "@utils/*": ["utils/*"]
       }
     }
   }

Conclusion

babel-plugin-module-resolverest un outil puissant pour rationaliser vos importations, rendre votre code plus propre et votre projet plus facile à maintenir. En créant des alias simples et cohérents pour vos répertoires, vous pouvez éviter de confondre les chemins relatifs et réduire les efforts requis pour naviguer et mettre à jour votre projet.

Cette configuration est particulièrement utile pour les grands projets avec des structures de dossiers approfondies et s’intègre facilement à Réagir natif et d’autres écosystèmes JavaScript. Vous pouvez désormais vous concentrer davantage sur les fonctionnalités d’écriture et moins sur les chemins d’importation !