Stavo leggendo sulla mapping dei tsconfig.json
in tsconfig.json
e volevo usarlo per evitare di usare i seguenti percorsi brutti:
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.json
così 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 è abbastanza il tsconfig.json
?
Questo può essere impostato sul file tsconfig.json, in quanto è una funzionalità di 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 in 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 configurato in questo modo, puoi facilmente usarlo in questo modo:
import { Yo } from '@config/index';
l’unica cosa che si potrebbe notare è che l’intellisense non funziona nell’ultima versione attuale, quindi suggerirei di seguire una convenzione indice per importare / esportare file.
https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping
Puoi utilizzare la combinazione di baseUrl
e documenti di paths
.
Supponendo che root sia nella directory src
più in alto (e leggo correttamente la tua immagine) usi
// tsconfig.json { "compilerOptions": { ... "rootDir": ".", "paths": { "lib/*": [ "src/org/global/lib/*" ] } } }
Per il webpack
potrebbe essere necessario aggiungere anche la risoluzione del modulo . Per webpack2
questo potrebbe sembrare
// webpack.config.js module.exports = { resolve: { ... modules: [ ... './src/org/global' ] } }
Controlla questa soluzione simile con l’asterisco
"baseUrl": ".", "paths": { "*": [ "node_modules/*", "src/types/*" ] },
La risposta di Alejandros ha funzionato per me, ma siccome sto usando il awesome-typescript-loader
con webpack 4, ho anche dovuto aggiungere il tsconfig-paths-webpack-plugin
al mio file webpack.config perché si risolvesse correttamente
se si usa 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 del percorso avanzata in TypeScript 2.0
Se non sbaglio, ./
significa iniziare dalla directory corrente del file mentre /
significa iniziare dalla root. Quindi puoi sostituire tutti ../
all’inizio con a /