Wie verwende ich Pfade in tsconfig.json?

166

Ich habe über Pfadzuordnung in gelesen tsconfig.jsonund wollte es verwenden, um die Verwendung der folgenden hässlichen Pfade zu vermeiden:

Geben Sie hier die Bildbeschreibung ein

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.

Geben Sie hier die Bildbeschreibung ein

Wie kann ich die Pfade tsconfig.jsonso 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.jsongenug

Remo H. Jansen
quelle
1
Schauen Sie sich npmjs.com/package/tspath
Patrik Forsberg

Antworten:

268

Dies kann in Ihrer Datei tsconfig.json eingerichtet werden, da es sich um eine TS-Funktion handelt.

Sie können dies tun:

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

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:

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

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.

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

Alejandro Lora
quelle
36
Nur ein Kommentar, der anderen helfen könnte ... Wenn Sie mit node.js oder einer Umgebung arbeiten, in der kein Modulbündler wie Webpack verwendet wird, benötigen Sie zusätzlich das Modul npmjs.com/package/module-alias
Remo H. Jansen
2
@Alejandro Lora Ich habe diese Lösung in meinem Projekt verwendet. Sie funktioniert wie ein Zauber, aber wenn ich ng test karma ausführe, kann ich Umgebungsvariablen nicht auflösen. Was könnte der Grund sein?
Gavishiddappa Gadagi
1
Dies funktioniert völlig einwandfrei, aber es gibt ein Problem beim Aktivieren der Deklaration und beim Importieren dieses npm-Moduls in ein anderes Modul. Intelisense bricht. Haben Sie eine Idee, wie Sie dieses Problem beheben können?
Siva
1
@Aphax ja. Es ist möglich, eine einzelne Datei zuzuordnen. Ich habe hier ein Beispiel vorbereitet: github.com/ialex90/TypeScript-Node-Starter/commit/…
Alejandro Lora
2
Beachten Sie, dass Jest-Test nicht die tsconfig-Pfade verwenden - Sie müssen ein definieren moduleNameMapper: tsjest # 414
TmTron
13

Sie können eine Kombination aus baseUrlund paths docs verwenden .

Angenommen, root befindet sich im obersten srcVerzeichnis (und ich habe Ihr Bild richtig gelesen)

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

Für webpackSie könnte auch hinzufügen müssen Modul Auflösung . Für webpack2diese könnte so aussehen

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

Überprüfen Sie diese ähnlichen Lösungen mit einem Sternchen

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

Die Antwort von Alejandros hat bei mir funktioniert, aber da ich das awesome-typescript-loadermit Webpack 4 verwende, musste ich das auch tsconfig-paths-webpack-pluginzu meiner Datei webpack.config hinzufügen , damit es korrekt aufgelöst wird

James Moran
quelle
6

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.

Joon
quelle
3

Wenn Typoskript + Webpack 2 + At-Loader verwendet wird, gibt es einen zusätzlichen Schritt (@ mlekos Lösung hat bei mir nur teilweise funktioniert):

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

Erweiterte Pfadauflösung in TypeScript 2.0

Eeglbalazs
quelle
2

Das funktioniert bei mir:

 yarn add --dev tsconfig-paths

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

Dadurch werden alle Pfade in tsconfig.json geladen. Ein Beispiel für tsconfig.json:

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

Stellen Sie sicher, dass Sie sowohl baseUrl als auch Pfade haben, damit dies funktioniert

Und dann können Sie importieren wie:

import {AlarmIcon} from 'assets/icons'
FacePalm
quelle
1

Seine Art von relativem Pfad Anstelle des folgenden Codes

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

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.

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

Also endlich wird es so aussehen wie unten

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

Es sieht einfach, fantastisch und besser lesbar aus.

Vijay
quelle
1

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

divya_kanak
quelle
0

/startet nur von der Wurzel, um den relativen Pfad zu erhalten, den wir verwenden sollten ./oder../

Vipindas Gopalan
quelle
Nicht wahr. Viele Optionen ermöglichen nicht relative Modulimporte .
Nino Filiu
0

Es sieht aus wie ein Update hat zu reagieren , die nicht Sie das einstellen läßt "paths"in dem tsconfig.jsonanylonger.

Nicely React gibt nur eine Warnung aus:

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

Aktualisiert dann Ihre tsconfig.jsonund entfernt den gesamten "paths"Abschnitt für Sie. Es gibt einen Weg, um diesen Lauf zu umgehen

npm run eject

Dies wird alle der auswerfen create-react-scriptsEinstellungen durch Hinzufügen configund scriptsVerzeichnisse 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

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