web-dev-qa-db-fra.com

Comment utiliser les chemins dans tsconfig.json?

Je lisais à propos de path-mapping in tsconfig.json et je voulais l’utiliser pour éviter d’utiliser les mauvais chemins suivants:

 enter image description here

L'organisation de projet est un peu bizarre, car nous avons un référentiel mono qui contient des projets et des bibliothèques. Les projets sont regroupés par société et par navigateur/serveur/universel.

 enter image description here

Comment puis-je configurer les chemins dans tsconfig.json donc au lieu de:

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

Je peux utiliser:

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

Est-ce que quelque chose d'autre sera requis dans la configuration du webpack? ou le tsconfig.json est-il suffisant?

typescriptnode-modulestsconfig
72
Remo H. Jansen

Cela peut être configuré sur votre fichier tsconfig.json, car il s'agit d'une fonctionnalité TS.

Vous pouvez faire comme ça:

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

N'oubliez pas que le chemin auquel vous souhaitez faire référence, il prend votre baseUrl comme base de la route que vous indiquez, et il est obligatoire, comme décrit dans le doc.

_ {Le caractère '@' n'est pas obligatoire.

Après l'avoir configuré de cette façon, vous pouvez facilement l'utiliser comme ceci:

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

la seule chose que vous remarquerez peut-être, c’est que intellisense ne fonctionne pas dans la version la plus récente, aussi je vous conseillerais donc de suivre une convention d’index pour l’import/export de fichiers.

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

UPDATE Découvrez cet exemple que j'ai créé pour montrer comment le mappage s'effectue dans un seul fichier:

https://github.com/ialex90/TypeScript-Node-Starter/commit/a4e8cc1f8f5d5176e0099e05b51f97b0ef4bebea

115
Alejandro Lora

Vous pouvez utiliser la combinaison de baseUrl et pathsdocs .

En supposant que la racine se trouve dans le plus haut répertoire src (et j'ai lu votre image correctement), utilisez

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

Pour webpack, vous devrez peut-être aussi ajouter résolution du module . Pour webpack2 cela pourrait ressembler à

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

Cochez cette solution similaire avec astérisque

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

Alejandros answer a fonctionné pour moi, mais comme j'utilise le awesome-TypeScript-loader avec le webpack 4, j'ai également ajouté le tsconfig-paths-webpack-plugin à mon fichier webpack.config pour le résoudre correctement

3
James Moran

si TypeScript + webpack 2 + at-loader est utilisé, il existe une étape supplémentaire (la solution de @ mleko ne fonctionnait que partiellement pour moi):

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

Résolution de chemin avancée dans TypeScript 2.0

2
eeglbalazs

Si vous utilisez des chemins, vous devrez redéfinir les chemins absolus en chemins relatifs pour que celui-ci fonctionne après la compilation de TypeScript en javascript ordinaire à l'aide de tsc.

La solution la plus populaire pour cela a été tsconfig-path jusqu'à présent.

Je l’ai essayé, mais cela n’a pas fonctionné pour mon installation compliquée ..__ De plus, cela résout les chemins au moment de l’exécution, ce qui signifie une surcharge en termes de taille de votre package et de résolution des performances.

J'ai donc écrit moi-même une solution, tscpaths .

Je dirais que c'est globalement meilleur car il remplace les chemins au moment de la compilation. Cela signifie qu'il n'y a pas de dépendance à l'exécution ni de surcharge de performances. C'est assez simple à utiliser. Vous devez simplement ajouter une ligne à vos scripts de construction dans package.json.

Le projet est assez jeune, donc il pourrait y avoir des problèmes si votre configuration est très compliquée . Il fonctionne parfaitement pour ma configuration, bien que ma configuration soit assez complexe.

2
Joon

/ commence à partir de la racine uniquement, pour obtenir le chemin relatif, nous devrions utiliser ./ ou ../

0
Vipindas Gopalan

Cela fonctionne pour moi:

 yarn add --dev tsconfig-paths

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

Ceci charge tous les chemins dans tsconfig.json. Un exemple de tsconfig.json:

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

Assurez-vous que vous avez à la fois baseUrl et les chemins pour que cela fonctionne

Et puis vous pouvez importer comme:

import {AlarmIcon} from 'assets/icons'
0
FacePalm

Son genre de chemin relatif Au lieu du code ci-dessous

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

Nous pouvons éviter le "../../../../../", son apparence est étrange et illisible.

Le fichier de configuration TypeScript a donc la même réponse. Il suffit de spécifier le baseUrl, config prendra soin de votre chemin relatif.

chemin à config: tsconfig.json fichier ajouter les propriétés ci-dessous.

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

Donc finalement ça va ressembler à ci-dessous

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

Son look simple, génial et plus lisible ..

0
Vijay

Il semblerait qu’une mise à jour de React ne vous autorise pas à définir le "paths" dans le tsconfig.json.

Nicely React émet juste un avertissement:

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

met ensuite à jour votre tsconfig.json et supprime toute la section "paths" pour vous. Il y a un moyen de contourner cette course

npm run eject

Cela éjectera tous les paramètres create-react-scripts en ajoutant les répertoires config et scripts et les fichiers de construction/config dans votre projet. Cela permet également beaucoup plus de contrôle sur la manière dont tout est construit, nommé, etc. en mettant à jour les fichiers {project}/config/*.

Puis mettez à jour votre tsconfig.json

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