Comment utiliser les chemins dans tsconfig.json ?

Question

Je lisais un article sur cartographie des chemins en tsconfig.json et je voulais l'utiliser pour éviter d'utiliser les vilains chemins suivants :

L'organisation des projets est un peu bizarre car nous avons un monodépôt qui contient les projets et les bibliothèques. Les projets sont regroupés par entreprise et par navigateur / serveur / universel.

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 nécessaire dans la configuration de webpack ? ou est-ce que l'option tsconfig.json assez ?

Answer 1

Ceci peut être configuré dans 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/*"]
        },
        ...

Gardez à l'esprit que le chemin auquel vous voulez vous référer, prend votre baseUrl comme base de la route que vous pointez et c'est obligatoire comme décrit dans la 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 pourriez remarquer 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/exportation de fichiers.

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

Answer 2

Vous pouvez utiliser une combinaison de baseUrl y paths docs .

En supposant que Root est sur le plus haut niveau src dir(et j'ai bien lu votre image) utiliser

// tsconfig.json
{
  "compilerOptions": {
    ...
    "baseUrl": ".",
    "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'
        ]
    }
}

Answer 3

Consultez ces solutions similaires avec asterisk

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

Answer 4

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

Answer 5

Si l'on utilise typescript + webpack 2 + at-loader, 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 avancée des chemins dans TypeScript 2.0