web-dev-qa-db-fra.com

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

J'utilise le package create-react-app pour créer un site Web de réaction. J'utilisais des chemins relatifs dans mon application pour importer des composants, des ressources, des redux, etc., par exemple, import action from '../../../redux/action

J'ai essayé d'utiliser le package module-alis npm mais sans succès. Existe-t-il des plug-ins que je peux utiliser pour importer en fonction du nom du dossier ou de l'alias?

Par exemple., import action from '@redux/action' ou import action from '@resource/css/style.css'

reactjsreact-nativenpmcreate-react-app
31
Prem

Créez un fichier nommé .env dans la racine du projet et y écrire:

NODE_PATH=src

Puis redémarrez le serveur de développement. Vous devriez pouvoir importer n'importe quoi dans src sans chemins relatifs.

Remarque Je ne recommanderais pas d'appeler votre dossier src/redux _ car 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 importer des éléments de app/....

Nous ne prenons pas intentionnellement en charge la syntaxe personnalisée telle que @redux parce que ce n'est pas compatible avec l'algorithme de résolution Node.

75
Dan Abramov

dans le fichier package.json,

éjecte ce code dans l'objet scripts comme ceci.

  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js --env=jsdom",
     "eject": "NODE_PATH=src/ react-scripts eject"
  },

cela permettra aux importations de chemin absolu dans votre application

1
parag patel

J'utilise babel-plugin-module-resolver pour mon projet afin de résoudre ce problème. babel-plugin-module-resolver est également identique à module-alis Donc, je pense que vous devriez juste résoudre en utilisant module-alis problème.

Parce que vous ne nous avez pas dit pourquoi utiliser module-alis était un échec? Donc, je ne peux pas vous montrer comment résoudre ce problème.

N'abandonnez pas votre solution sans en connaître la raison!

1
Quang Noi Truong

Nous pouvons utiliser la propriété de résolution de Webpack 2 dans la configuration de Webpack.

Exemple de configuration de pack Web utilisant la résolution:

Ici, composant et utils sont des dossiers indépendants contenant les 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 des fichiers: 

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

référence de résolution Webpack 2

1
santosh