Wie vermeiden Sie die Verwendung relativer Pfad importiert (/../../../redux/action/action1) in create-reagieren-app
Habe ich mit create-reagieren-app-Paket für die Erstellung einer reagieren website. Ich wurde mittels relativer Pfade, die im Laufe meiner app für den Import von Komponenten, Ressourcen, redux etc. zB import action from '../../../redux/action
Habe ich versucht, mit Modul-alis npm-Paket, aber ohne Erfolg. Gibt es irgendein plugin, dass ich verwenden können, um die Einfuhr auf der Grundlage der Ordner-name oder alias?
ZB., import action from '@redux/action'
oder import action from '@resource/css/style.css'
Du musst angemeldet sein, um einen Kommentar abzugeben.
Erstellen Sie eine Datei namens
.env
im Projekt-root, und da schreiben:Starten Sie den Entwicklungs-server. Sie sollten in der Lage sein, zu importieren, etwas in
src
ohne relative Pfade.Hinweis: ich würde nicht empfehlen, ruft Sie Ihre Ordner
src/redux
denn jetzt ist es verwirrend, obredux
import bezieht sich auf die app oder die Bibliothek. Stattdessen rufen Sie Ihre Ordnersrc/app
und importieren Sie die Dinge ausapp/...
.Wir absichtlich nicht unterstützen, benutzerdefinierte syntax wie
@redux
weil es nicht kompatibel mit Knoten-Auflösung-Algorithmus.{ "compilerOptions": { "baseUrl": "src" } }
Wir können webpack 2 beheben Eigentum in der webpack config.
Probe webpack config verwenden beheben :
Hier-Komponente und utils sind unabhängig Ordner mit Komponenten Reagieren.
Danach können wir direkt importieren in Dateien :
Webpack 2 Beheben Referenz
/create-react-app/blob/master/packages/react-scripts/config/webpack.config.dev.js
/create-react-app/blob/master/packages/react-scripts/config/webpack.config.prod.js
Ich bin mit babel-plugin-Modul-resolver für mein Projekt, um das problem zu beheben.
babel-plugin-Modul-resolver ist auch die gleiche wie Modul-alis. Also ich denke, Sie sollten nur beheben mit Modul-alis problem.
Weil Sie nicht sagen Sie uns warum Modul-alis war fail? So kann ich Ihnen zeigen, wie es zu lösen ist.
Nicht aufgeben Ihre Lösung, während Sie nicht wissen, die Grund!
im Paket.json-Datei,
Auswerfen dieser code in die Skripte Objekt wie dieses..
damit wird der absolute Pfad der Einfuhr in Ihrem app