Come usare i percorsi in tsconfig.json?

Stavo leggendo su percorso di mappatura in tsconfig.jsone volevo usarlo per evitare di utilizzare i seguenti percorsi brutte:

L'organizzazione del progetto è un po 'strana perché abbiamo un repository mono che contiene progetti e librerie. I progetti sono raggruppati per società e per browser / server / universale.

Come posso configurare i percorsi in tsconfig.jsonmodo che invece di:

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

Posso usare:

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

Sarà richiesto qualcos'altro nella configurazione del webpack? o è tsconfig.jsonabbastanza?

Questo può essere impostato sul tuo file tsconfig.json, in quanto è una funzionalità TS.

Puoi fare così:

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

Tieni presente che il percorso a cui vuoi fare riferimento, prende il tuo baseUrl come base del percorso che stai indicando ed è obbligatorio come descritto nel documento.

Il carattere "@" non è obbligatorio.

Dopo averlo impostato in questo modo, puoi facilmente usarlo in questo modo:

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

l'unica cosa che potresti notare è che l'intellisense non funziona nell'ultima versione corrente, quindi suggerirei di seguire una convenzione dell'indice per l'importazione / esportazione di file.

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

Puoi utilizzare la combinazione di baseUrle paths documenti .

Supponendo che root sia nella directory più in alto src(e ho letto bene l'immagine)

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

Perché webpackpotresti anche dover aggiungere la risoluzione del modulo . Per webpack2questo potrebbe sembrare

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

Controlla queste soluzioni simili con l'asterisco

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

La risposta di Alejandros ha funzionato per me, ma mentre sto usando il awesome-typescript-loadercon webpack 4, ho anche dovuto aggiungere il tsconfig-paths-webpack-pluginmio file webpack.config per risolverlo correttamente

Se stai usando i percorsi, dovrai ripristinare i percorsi assoluti in percorsi relativi affinché funzioni dopo aver compilato dattiloscritto in javascript semplice usando tsc.

La soluzione più popolare per questo è stata finora tsconfig-percorsi .

L'ho provato, ma non ha funzionato per me per la mia complicata configurazione. Inoltre, risolve i percorsi in fase di esecuzione, il che significa sovraccarico in termini di dimensioni del pacchetto e risoluzione delle prestazioni.

Quindi, ho scritto una soluzione me stesso, tscpaths .

Direi che nel complesso è meglio perché sostituisce i percorsi in fase di compilazione. Significa che non vi è alcuna dipendenza dal runtime o alcun sovraccarico di prestazioni. È abbastanza semplice da usare. Devi solo aggiungere una riga ai tuoi script di build in package.json.

Il progetto è piuttosto giovane, quindi potrebbero esserci dei problemi se la tua installazione è molto complicata. Funziona perfettamente per la mia installazione, anche se la mia installazione è abbastanza complessa.

se viene utilizzato typescript + webpack 2 + at-loader, c'è un passaggio aggiuntivo (la soluzione di @ mleko funzionava solo parzialmente per me):

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

Risoluzione avanzata del percorso in TypeScript 2.0

Questo funziona per me:

 yarn add --dev tsconfig-paths

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

Questo carica tutti i percorsi in tsconfig.json. Un esempio di tsconfig.json:

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

Assicurati di avere sia baseUrl che i percorsi affinché questo funzioni

E quindi puoi importare come:

import {AlarmIcon} from 'assets/icons'

Il suo tipo di percorso relativo Invece del codice seguente

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

Possiamo evitare che "../../../../../" sia strano e non leggibile.

Quindi il file di configurazione di Typescript ha una risposta per lo stesso. Basta specificare baseUrl, config si occuperà del tuo percorso relativo.

modo di config: il file tsconfig.json aggiunge le seguenti proprietà.

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

Quindi finalmente apparirà come sotto

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

Sembra semplice, fantastico e più leggibile ..

Controlla l'operazione del compilatore usando questo

Ho aggiunto baseUrl nel file per un progetto come di seguito:

"baseUrl": "src"

Funziona benissimo. Quindi aggiungi la tua directory di base per il tuo progetto.

/inizia solo dalla radice, per ottenere il percorso relativo che dovremmo usare ./o../

Sembra che ci sia stato un aggiornamento a React che non ti consente di impostare il "paths"più tsconfig.jsonlungo.

Benely React emette solo un avviso:

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

quindi aggiorna il tuo tsconfig.jsone rimuove l'intera "paths"sezione per te. C'è un modo per aggirare questa corsa

npm run eject

Questo espellerà tutte le create-react-scriptsimpostazioni aggiungendo confige scriptsdirectory e costruendo / config file nel tuo progetto. Ciò consente anche un controllo molto maggiore su come tutto è costruito, chiamato ecc. Aggiornando i {project}/config/*file.

Quindi aggiorna il tuo tsconfig.json

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