webentwicklung-frage-antwort-db.com.de

So vermeiden Sie die Verwendung relativer Pfadimporte (/../../../redux/action/action1) in der create-react-app

Ich habe das Paket "create-react-app" zum Erstellen einer Reaktionswebsite verwendet. Ich habe in meiner gesamten App relative Pfade zum Importieren von Komponenten, Ressourcen, Redux usw. verwendet, z. B. import action from '../../../redux/action

Ich habe versucht, module-alis npm-Paket zu verwenden, aber ohne Erfolg. Gibt es ein Plugin, mit dem ich basierend auf dem Ordnernamen oder Alias ​​importieren kann?

Z.B., import action from '@redux/action' oder import action from '@resource/css/style.css'

reactjsreact-nativenpmcreate-react-app
31
Prem

Erstellen Sie eine Datei mit dem Namen .env Im Projektstamm und schreiben Sie dort:

NODE_PATH=src

Starten Sie anschließend den Entwicklungsserver neu. Sie sollten in der Lage sein, alles in src ohne relative Pfade zu importieren.

Hinweis Ich würde nicht empfehlen, Ihren Ordner src/redux Aufzurufen, da es jetzt verwirrend ist, ob sich redux import auf Ihre App oder die Bibliothek bezieht. Stattdessen können Sie Ihren Ordner src/app Aufrufen und Dinge aus app/... Importieren.

Benutzerdefinierte Syntax wie @redux Wird absichtlich nicht unterstützt, da sie nicht mit dem Auflösungsalgorithmus Node) kompatibel ist.

75
Dan Abramov

in package.json Datei,

wirf diesen Code in dem Skriptobjekt wie folgt aus.

  "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"
  },

dadurch werden die absoluten Pfadimporte in Ihrer App aktiviert

1
parag patel

Ich benutze Babel-Plugin-Modul-Resolver für mein Projekt, um dieses Problem zu lösen. babel-plugin-module-resolver ist auch dasselbe wie module-alis . Ich denke, Sie sollten das Problem einfach mit module-alis lösen.

Weil Sie uns nicht gesagt haben, warum die Verwendung von module-alis fehlgeschlagen ist? Also kann ich Ihnen nicht zeigen, wie man es repariert.

Gib deine Lösung nicht auf, solange du den Grund nicht kennst!

1
Quang Noi Truong

Wir können die Auflösungseigenschaft von Webpack 2 in der Webpack-Konfiguration verwenden.

Beispiel für eine Webpack-Konfiguration mit der folgenden Auflösung:

Hier sind Komponente und Utils unabhängige Ordner, die React components enthalten.

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'),
        }
    }

Danach können wir direkt in Dateien importieren: 

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

Webpack 2 Resolve Reference

1
santosh