Ich habe über Pfadzuordnung in gelesen tsconfig.json
und wollte es verwenden, um die Verwendung der folgenden hässlichen Pfade zu vermeiden:
Die Projektorganisation ist etwas seltsam, weil wir ein Mono-Repository haben, das Projekte und Bibliotheken enthält. Die Projekte sind nach Unternehmen und nach Browser / Server / Universal gruppiert.
Wie kann ich die Pfade tsconfig.json
so konfigurieren , anstatt:
import { Something } from "../../../../../lib/src/[browser/server/universal]/...";
Ich kann nutzen:
import { Something } from "lib/src/[browser/server/universal]/...";
Wird in der Webpack-Konfiguration noch etwas benötigt? oder ist das tsconfig.json
genug
typescript
node-modules
tsconfig
Remo H. Jansen
quelle
quelle
Antworten:
Dies kann in Ihrer Datei tsconfig.json eingerichtet werden, da es sich um eine TS-Funktion handelt.
Sie können dies tun:
Beachten Sie, dass der Pfad, auf den Sie verweisen möchten, Ihre baseUrl als Basis für die Route verwendet, auf die Sie zeigen, und obligatorisch ist, wie im Dokument beschrieben.
Das Zeichen '@' ist nicht obligatorisch.
Nachdem Sie es auf diese Weise eingerichtet haben, können Sie es einfach folgendermaßen verwenden:
Das einzige, was Sie möglicherweise bemerken, ist, dass der Intellisense in der aktuellen Version nicht funktioniert. Daher würde ich empfehlen, eine Indexkonvention zum Importieren / Exportieren von Dateien zu befolgen.
quelle
moduleNameMapper
: tsjest # 414Sie können eine Kombination aus
baseUrl
undpaths
docs verwenden .Angenommen, root befindet sich im obersten
src
Verzeichnis (und ich habe Ihr Bild richtig gelesen)Für
webpack
Sie könnte auch hinzufügen müssen Modul Auflösung . Fürwebpack2
diese könnte so aussehenquelle
Überprüfen Sie diese ähnlichen Lösungen mit einem Sternchen
quelle
Die Antwort von Alejandros hat bei mir funktioniert, aber da ich das
awesome-typescript-loader
mit Webpack 4 verwende, musste ich das auchtsconfig-paths-webpack-plugin
zu meiner Datei webpack.config hinzufügen , damit es korrekt aufgelöst wirdquelle
Wenn Sie Pfade verwenden, müssen Sie absolute Pfade in relative Pfade zurücksetzen, damit dies funktioniert, nachdem Sie Typoskript mit einfachem Javascript kompiliert haben
tsc
.Die beliebteste Lösung hierfür waren tsconfig-Pfade .
Ich habe es versucht, aber es hat bei meinem komplizierten Setup nicht funktioniert. Außerdem werden Pfade zur Laufzeit aufgelöst, was einen Overhead in Bezug auf Ihre Paketgröße und die Auflösungsleistung bedeutet.
Also habe ich selbst eine Lösung geschrieben, tscpaths .
Ich würde sagen, es ist insgesamt besser, weil es Pfade zur Kompilierungszeit ersetzt. Dies bedeutet, dass keine Laufzeitabhängigkeit oder Leistungsaufwand besteht. Es ist ziemlich einfach zu bedienen. Sie müssen lediglich eine Zeile zu Ihren Build-Skripten hinzufügen
package.json
.Das Projekt ist ziemlich jung, daher kann es zu Problemen kommen, wenn Ihre Einrichtung sehr kompliziert ist. Es funktioniert einwandfrei für mein Setup, obwohl mein Setup ziemlich komplex ist.
quelle
Wenn Typoskript + Webpack 2 + At-Loader verwendet wird, gibt es einen zusätzlichen Schritt (@ mlekos Lösung hat bei mir nur teilweise funktioniert):
Erweiterte Pfadauflösung in TypeScript 2.0
quelle
Das funktioniert bei mir:
Dadurch werden alle Pfade in tsconfig.json geladen. Ein Beispiel für tsconfig.json:
Stellen Sie sicher, dass Sie sowohl baseUrl als auch Pfade haben, damit dies funktioniert
Und dann können Sie importieren wie:
quelle
Seine Art von relativem Pfad Anstelle des folgenden Codes
Wir können vermeiden, dass das "../../../../../" seltsam und auch nicht lesbar aussieht.
Die Typescript-Konfigurationsdatei hat also eine Antwort darauf. Geben Sie einfach die baseUrl an, config kümmert sich um Ihren relativen Pfad.
Weg zur Konfiguration: Die Datei tsconfig.json fügt die folgenden Eigenschaften hinzu.
Also endlich wird es so aussehen wie unten
Es sieht einfach, fantastisch und besser lesbar aus.
quelle
Überprüfen Sie die Compiler-Operation damit
Ich habe baseUrl in der Datei für ein Projekt wie das folgende hinzugefügt:
"baseUrl": "src"
Es funktioniert gut. Fügen Sie also Ihr Basisverzeichnis für Ihr Projekt hinzu.
quelle
/
startet nur von der Wurzel, um den relativen Pfad zu erhalten, den wir verwenden sollten./
oder../
quelle
Es sieht aus wie ein Update hat zu reagieren , die nicht Sie das einstellen läßt
"paths"
in demtsconfig.json
anylonger.Nicely React gibt nur eine Warnung aus:
Aktualisiert dann Ihre
tsconfig.json
und entfernt den gesamten"paths"
Abschnitt für Sie. Es gibt einen Weg, um diesen Lauf zu umgehenDies wird alle der auswerfen
create-react-scripts
Einstellungen durch Hinzufügenconfig
undscripts
Verzeichnisse und Build / config - Dateien in Ihrem Projekt. Dies ermöglicht auch viel mehr Kontrolle darüber, wie alles erstellt, benannt usw. wird, indem das aktualisiert wird{project}/config/*
Dateien werden.Dann aktualisieren Sie Ihre
tsconfig.json
quelle