Comment éviter d'utiliser les importations de chemins relatifs (/../../../redux/action/action1) dans create-react-app

Question

J'ai utilisé le paquet create-react-app pour créer un site web react. J'utilisais des chemins relatifs dans toute mon application pour importer des composants, des ressources, redux etc. par exemple, import action from '../../../redux/action

J'ai essayé d'utiliser module-alis paquet npm mais sans succès. Existe-t-il un plugin que je peux utiliser pour importer sur la base du nom du dossier ou d'un alias, c'est-à-dire un chemin absolu ?

Eg., import action from '@redux/action' o import action from '@resource/css/style.css'

Answer 1

Créez un fichier appelé .env dans la Racine du projet et y écrire :

NODE_PATH=src

Puis redémarrez le serveur de développement. Vous devriez être en mesure d'importer tout ce qui se trouve dans src sans chemins relatifs.

Remarque : je ne recommande pas d'appeler votre dossier src/redux parce que maintenant, il est difficile de savoir si redux import fait référence à votre application ou à la bibliothèque. Au lieu de cela, vous pouvez appeler votre dossier src/app et d'importer des choses de app/... .

Nous ne prenons volontairement pas en charge les syntaxes personnalisées telles que @redux car il n'est pas compatible avec l'algorithme de résolution de Node.

Answer 2

L'approche adoptée dans la réponse acceptée est désormais dépassée. Create React App a maintenant une façon différente de définir les chemins absolus comme documenté aquí .

En résumé, vous pouvez configurer votre application pour prendre en charge l'importation de modules à l'aide de chemins absolus en procédant comme suit :

Créez/éditez votre jsconfig.json/tsconfig.json dans la racine de votre projet avec ce qui suit :

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

Alternativement :

Si vous utilisez TypeScript, vous pouvez configurer le paramètre baseUrl dans le fichier compilerOptions du fichier tsconfig.json de votre projet.

Une fois que vous avez fait cela, vous pouvez importer en spécifiant des sous-répertoires de "src" (dans l'exemple suivant, components est un sous-répertoire de src), par ex.

import Button from 'components/Button'

Answer 3

Après avoir essayé La solution de Ben Smith ci-dessus si vous trouvez qu'eslint se plaint de l'importation d'un chemin absolu, ajoutez la ligne suivante à votre configuration eslint :

settings: {
  'import/resolver': {
    node: {
      paths: ['src'],
    },
  },
},

remplacez 'src' par votre dossier si vous utilisez votre propre gabarit avec le nom de votre dossier.

Answer 4

Nous pouvons utiliser la propriété resolve de webpack 2 dans la configuration de webpack.

Exemple de configuration de webpack utilisant resolve :

Ici, component et utils sont des dossiers indépendants contenant des composants React.

resolve: {
        modules: ['src/scripts', 'node_modules'],
        extensions: ['.jsx', '.js'],
        unsafeCache: true,
        alias: {
            components: path.resolve(__dirname, 'src', 'scripts', 'components'),
            utils: path.resolve(__dirname, 'src', 'scripts', 'utils'),
        }
    }

Après cela, nous pouvons importer directement dans les fichiers :

import UiUtils from 'utils/UiUtils';
import TabContent from 'components/TabContent';

Référence pour Webpack 2 Resolve

Answer 5

Utilice react-app-rewire-alias solution. Il fournit plus qu'un simple alias, mais il permet aussi de multiples usages. src dans le répertoire racine :

La configuration pour votre exemple ci-dessus est la suivante :

// config-overrides.js:

const {alias} = require('react-app-rewire-alias')

module.exports = function override(config) {
  alias({
    "@redux": "src/redux",
    "@resource": "resource", // or "src/resource" if it is in src
  })(config)
  return config
}

C'est pour les projets js simples.

Voir docs react-app-rewire-alias pour plus d'informations. Comment configurer pour ts projets ou chemins de chargement à partir de jsconfig.json o tsconfig.json etc.