Jak używać ścieżek w tsconfig.json?


167

Czytałem o mapowaniu ścieżek w programie tsconfig.jsoni chciałem go użyć, aby uniknąć używania następujących brzydkich ścieżek:

wprowadź opis obrazu tutaj

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.

wprowadź opis obrazu tutaj

Jak mogę skonfigurować ścieżki w tsconfig.jsonso 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.jsonwystarczy?


Odpowiedzi:


268

Można to ustawić w pliku tsconfig.json, ponieważ jest to funkcja TS.

Możesz zrobić tak:

"compilerOptions": {
        "baseUrl": "src", // This must be specified if "paths" is.
         ...
        "paths": {
            "@app/*": ["app/*"],
            "@config/*": ["app/_config/*"],
            "@environment/*": ["environments/*"],
            "@shared/*": ["app/_shared/*"],
            "@helpers/*": ["helpers/*"]
        },
        ...

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:

import { Yo } from '@config/index';

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.

https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping


36
Tylko komentarz, który może pomóc innym ... jeśli pracujesz z node.js lub jakimś środowiskiem, które nie używa pakietu modułów, takiego jak webpack, będziesz dodatkowo potrzebować modułu npmjs.com/package/module-alias
Remo H. Jansen

2
@Alejandro Lora Użyłem tego rozwiązania w moim projekcie, działa jak urok, ale kiedy uruchamiam test karmy, nie jest w stanie rozwiązać zmiennych środowiskowych. jaki może być powód?
Gavishiddappa Gadagi

1
Działa to całkowicie dobrze, ale występuje problem podczas włączania deklaracji i importowania tego modułu npm do innego modułu. Intelisense się psuje. Masz jakiś pomysł, jak rozwiązać ten problem?
Siva

1
@Aphax yes. możliwe jest mapowanie do pojedynczego pliku, przykład przygotowałem tutaj: github.com/ialex90/TypeScript-Node-Starter/commit/ ...
Alejandro Lora

2
zwróć uwagę, że jest-test nie używa ścieżek tsconfig - musisz zdefiniować a moduleNameMapper: tsjest # 414
TmTron

14

Możesz użyć kombinacji baseUrli paths docs .

Zakładając, że root jest na najwyższym katalogu src(i poprawnie odczytałem twój obraz) użyj

// tsconfig.json
{
  "compilerOptions": {
    ...
    "rootDir": ".",
    "paths": {
      "lib/*": [
        "src/org/global/lib/*"
      ]
    }
  }
}

Być webpackmoże trzeba będzie również dodać rozdzielczość modułu . Na webpack2to mogłoby wyglądać

// webpack.config.js
module.exports = {
    resolve: {
        ...
        modules: [
            ...
            './src/org/global'
        ]
    }
}

12

Sprawdź podobne rozwiązania za pomocą gwiazdki

  "baseUrl": ".",
  "paths": {
    "*": [
      "node_modules/*",
      "src/types/*"
    ]
  },

7

Odpowiedź Alejandrosa zadziałała dla mnie, ale ponieważ używam awesome-typescript-loaderz webpackiem 4, musiałem również dodać tsconfig-paths-webpack-plugindo mojego pliku webpack.config, aby rozwiązać go poprawnie


6

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.


3

jeśli używany jest maszynopis + webpack 2 + at-loader, jest dodatkowy krok (rozwiązanie @ mleko działało tylko częściowo):

// tsconfig.json
{
  "compilerOptions": {
    ...
    "rootDir": ".",
    "paths": {
      "lib/*": [
        "src/org/global/lib/*"
      ]
    }
  }
}    

// webpack.config.js
const { TsConfigPathsPlugin } = require('awesome-typescript-loader');

resolve: {
    plugins: [
        new TsConfigPathsPlugin(/* { tsconfig, compiler } */)
    ]
}

Zaawansowana rozdzielczość ścieżki w języku TypeScript 2.0


2

To działa dla mnie:

 yarn add --dev tsconfig-paths

 ts-node -r tsconfig-paths/register <your-index-file>.ts

Spowoduje to załadowanie wszystkich ścieżek w tsconfig.json. Przykładowy plik tsconfig.json:

{
    "compilerOptions": {
        {…}
        "baseUrl": "./src",
        "paths": {
            "assets/*": [ "assets/*" ],
            "styles/*": [ "styles/*" ]
        }
    },
}

Upewnij się, że masz zarówno baseUrl, jak i ścieżki, aby to zadziałało

A potem możesz importować jak:

import {AlarmIcon} from 'assets/icons'

1

To rodzaj względnej ścieżki zamiast poniższego kodu

import { Something } from "../../../../../lib/src/[browser/server/universal]/...";

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.

"baseUrl": "src",
    "paths": {
      "@app/*": [ "app/*" ],
      "@env/*": [ "environments/*" ]
    }

W końcu będzie to wyglądało jak poniżej

import { Something } from "@app/src/[browser/server/universal]/...";

Wygląda prosto, niesamowicie i bardziej czytelnie.


1

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.



0

Wygląda na to nastąpiło uaktualnienie do reakcji, które nie pozwalają ustawić "paths"w tsconfig.jsonanylonger.

Nicely React wyświetla tylko ostrzeżenie:

The following changes are being made to your tsconfig.json file:
  - compilerOptions.paths must not be set (aliased imports are not supported)

następnie aktualizuje tsconfig.jsoni usuwa całą "paths"sekcję za Ciebie. Jest sposób na obejście tego biegu

npm run eject

Spowoduje to usunięcie wszystkich create-react-scriptsustawień, dodając configi scriptskatalogi 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

{
    "compilerOptions": {
        "baseUrl": "./src",
        {…}
        "paths": {
            "assets/*": [ "assets/*" ],
            "styles/*": [ "styles/*" ]
        }
    },
}
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.