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

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:

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.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?

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

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'
        ]
    }
}

Sprawdź podobne rozwiązania za pomocą gwiazdki

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

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

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.

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

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'

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.

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.

/zaczyna się tylko od katalogu głównego, aby uzyskać ścieżkę względną, powinniśmy użyć ./lub../

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/*" ]
        }
    },
}