Czytałem o mapowaniu ścieżek w programie tsconfig.json
i chciałem go użyć, aby uniknąć używania następujących brzydkich ścieżek:
Organizacja projektu jest trochę dziwna, ponieważ mamy jedno repozytorium zawierające projekty i biblioteki. Projekty są pogrupowane według firmy i według przeglądarki / serwera / uniwersalnego.
Jak mogę skonfigurować ścieżki w tsconfig.json
so zamiast:
import { Something } from "../../../../../lib/src/[browser/server/universal]/...";
Mogę użyć:
import { Something } from "lib/src/[browser/server/universal]/...";
Czy w konfiguracji webpacka będzie wymagane coś innego? czy tsconfig.json
wystarczy?
typescript
node-modules
tsconfig
Remo H. Jansen
źródło
źródło
Odpowiedzi:
Można to ustawić w pliku tsconfig.json, ponieważ jest to funkcja TS.
Możesz zrobić tak:
Pamiętaj, że ścieżka, do której chcesz się odnieść, przyjmuje Twój baseUrl jako podstawę trasy, na którą wskazuje, i jest to obowiązkowe, jak opisano w dokumencie.
Znak „@” nie jest obowiązkowy.
Po skonfigurowaniu w ten sposób możesz z łatwością z niego korzystać w następujący sposób:
jedyną rzeczą, jaką możesz zauważyć, jest to, że intelisense nie działa w aktualnej najnowszej wersji, więc sugerowałbym przestrzeganie konwencji indeksowania podczas importowania / eksportowania plików.
źródło
moduleNameMapper
: tsjest # 414Możesz użyć kombinacji
baseUrl
ipaths
docs .Zakładając, że root jest na najwyższym katalogu
src
(i poprawnie odczytałem twój obraz) użyjByć
webpack
może trzeba będzie również dodać rozdzielczość modułu . Nawebpack2
to mogłoby wyglądaćźródło
Sprawdź podobne rozwiązania za pomocą gwiazdki
źródło
Odpowiedź Alejandrosa zadziałała dla mnie, ale ponieważ używam
awesome-typescript-loader
z webpackiem 4, musiałem również dodaćtsconfig-paths-webpack-plugin
do mojego pliku webpack.config, aby rozwiązać go poprawnieźródło
Jeśli używasz ścieżek, będziesz musiał zmienić z powrotem ścieżki bezwzględne na ścieżki względne, aby działały po skompilowaniu skryptu maszynowego do zwykłego kodu JavaScript za pomocą
tsc
.Najpopularniejszym rozwiązaniem tego problemu były dotychczas ścieżki tsconfig .
Próbowałem, ale nie zadziałało to w przypadku mojej skomplikowanej konfiguracji. Ponadto rozwiązuje ścieżki w czasie wykonywania, co oznacza obciążenie w zakresie rozmiaru pakietu i wydajności.
Więc sam napisałem rozwiązanie, tscpaths .
Powiedziałbym, że ogólnie jest lepszy, ponieważ zastępuje ścieżki w czasie kompilacji. Oznacza to, że nie ma zależności od środowiska uruchomieniowego ani żadnego narzutu wydajności. Jest całkiem prosty w użyciu. Wystarczy dodać linię do swoich skryptów kompilacji w
package.json
.Projekt jest dość młody, więc mogą wystąpić pewne problemy, jeśli konfiguracja jest bardzo skomplikowana. Działa bezbłędnie w mojej konfiguracji, chociaż moja konfiguracja jest dość złożona.
źródło
jeśli używany jest maszynopis + webpack 2 + at-loader, jest dodatkowy krok (rozwiązanie @ mleko działało tylko częściowo):
Zaawansowana rozdzielczość ścieżki w języku TypeScript 2.0
źródło
To działa dla mnie:
Spowoduje to załadowanie wszystkich ścieżek w tsconfig.json. Przykładowy plik tsconfig.json:
Upewnij się, że masz zarówno baseUrl, jak i ścieżki, aby to zadziałało
A potem możesz importować jak:
źródło
To rodzaj względnej ścieżki zamiast poniższego kodu
Możemy uniknąć „../../../../../”, który wygląda dziwnie i nie jest też czytelny.
Więc plik konfiguracyjny Typescript ma odpowiedź na to samo. Po prostu określ baseUrl, config zajmie się twoją względną ścieżką.
sposób konfiguracji: plik tsconfig.json dodaj poniższe właściwości.
W końcu będzie to wyglądało jak poniżej
Wygląda prosto, niesamowicie i bardziej czytelnie.
źródło
Sprawdź operację kompilatora za pomocą tego
Dodałem baseUrl w pliku dla projektu jak poniżej:
"baseUrl": "src"
Działa dobrze. Więc dodaj swój katalog podstawowy dla swojego projektu.
źródło
/
zaczyna się tylko od katalogu głównego, aby uzyskać ścieżkę względną, powinniśmy użyć./
lub../
źródło
Wygląda na to nastąpiło uaktualnienie do reakcji, które nie pozwalają ustawić
"paths"
wtsconfig.json
anylonger.Nicely React wyświetla tylko ostrzeżenie:
następnie aktualizuje
tsconfig.json
i usuwa całą"paths"
sekcję za Ciebie. Jest sposób na obejście tego bieguSpowoduje to usunięcie wszystkich
create-react-scripts
ustawień, dodającconfig
iscripts
katalogi i pliki kompilacji / konfiguracji do projektu. Pozwala to również na znacznie większą kontrolę nad tym, jak wszystko jest zbudowane, nazwane itp. Poprzez aktualizację{project}/config/*
plików.Następnie zaktualizuj swój
tsconfig.json
źródło