Comment utiliser les chemins dans tsconfig.json?

Je lisais à propos de chemin cartographie dans tsconfig.jsonet je voulais l' utiliser pour éviter d' utiliser les chemins laids suivants:

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

Comment puis-je configurer les chemins au tsconfig.jsonlieu de:

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

Je peux utiliser:

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

Quelque chose d'autre sera-t-il nécessaire dans la configuration du webpack? ou est-ce tsconfig.jsonassez?

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

Vous pouvez faire comme ceci:

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

Gardez à l'esprit que le chemin auquel vous voulez vous référer, il prend votre baseUrl comme base de la route vers laquelle vous pointez et c'est obligatoire comme décrit sur le doc.

Le caractère «@» n'est pas obligatoire.

Une fois que vous l'avez 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 est que l'intellisense ne fonctionne pas dans la dernière version actuelle, je vous suggère donc de suivre une convention d'index pour l'importation / l'exportation de fichiers.

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

Vous pouvez utiliser une combinaison de baseUrlet paths docs .

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

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

Car webpackvous devrez peut-être également ajouter une résolution de module . Car webpack2cela pourrait ressembler à

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

Vérifiez ces solutions similaires avec un astérisque

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

La réponse d'Alejandros a fonctionné pour moi, mais comme j'utilise le awesome-typescript-loaderavec webpack 4, j'ai également dû ajouter le tsconfig-paths-webpack-pluginà mon fichier webpack.config pour qu'il se résolve correctement

Si vous utilisez des chemins, vous devrez changer les chemins absolus en chemins relatifs pour que cela fonctionne après la compilation du typecript en javascript simple en utilisant tsc .

La solution la plus populaire pour cela a été tsconfig-chemins .

Je l'ai essayé, mais cela n'a pas fonctionné pour moi pour ma configuration compliquée. En outre, il résout les chemins au moment de l'exécution, ce qui signifie une surcharge en termes de taille de package et de performances de résolution.

Donc, j'ai écrit une solution moi-même, tscpaths .

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

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

si typescript + webpack 2 + at-loader est utilisé, il y a 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

Cela fonctionne pour moi:

 yarn add --dev tsconfig-paths

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

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

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

Assurez-vous que vous disposez à la fois de baseUrl et de chemins pour que cela fonctionne

Et puis vous pouvez importer comme:

import {AlarmIcon} from 'assets/icons'

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

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

Nous pouvons éviter que le "../../../../../" semble étrange et illisible.

Donc, le fichier de configuration Typescript a la même réponse. Spécifiez simplement baseUrl, config s'occupera de votre chemin relatif.

façon de config: fichier tsconfig.json ajoutez les propriétés ci-dessous.

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

Donc finalement ça ressemblera à ci-dessous

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

Cela a l'air simple, génial et plus lisible.

Vérifiez l'opération du compilateur en utilisant ceci

J'ai ajouté baseUrl dans le fichier pour un projet comme ci-dessous:

"baseUrl": "src"

Cela fonctionne bien. Ajoutez donc votre répertoire de base pour votre projet.

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

Il semble qu'il y ait eu une mise à jour de React qui ne vous permet pas de définir le "paths"dans le tsconfig.jsonanylonger.

Nicely React affiche 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)

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

npm run eject

Cela éjecte tous les create-react-scriptsparamètres en ajoutant configet scriptsrépertoires et build / fichiers de configuration dans votre projet. Cela permet également beaucoup plus de contrôle sur la façon dont tout est construit, nommé, etc. en mettant à jour le{project}/config/* fichiers.

Puis mettez à jour votre tsconfig.json

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