Wie verwende ich Pfade in tsconfig.json?

Ich habe über Pfadzuordnung in gelesen tsconfig.jsonund 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.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

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

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

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

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

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

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.

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

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'

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.

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

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

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