2016-01-07 15 views
6

in uno dei miei file importano un altro modulo commonjs contipografico/ES6: importare i file src con percorso assoluto

import * as at from '../../../at-angular' 

Avrei preferito fare

import * as at from 'fv/at-angular' 

con fv essere il mio elenco src. Così la mia struttura di cartelle app simile a questa:

- src 
    - at-angular.ts 
    - core 
    - services 
    .... 

Posso in qualche modo consentire dattiloscritto di avere fv punto da src?

+1

Possibile duplicato di [Come posso fare riferimento a file typescript senza percorsi assoluti?] (Http://stackoverflow.com/questions/26822836/how-can-i-reference-typescript-files-without-solutions-paths) – toskv

+0

Non è un duplicato. Sono abbastanza sicuro di cosa voglia dire che vuole raggruppare i file con percorsi assoluti. – Azarus

risposta

1

dattiloscritto 1.8 (non ancora rilasciato) avrà mappatura percorso caratteristica:

mappature del percorso

volte moduli non si trovano direttamente sotto baseurl. È possibile impostare per controllare come vengono calcolate le posizioni in tali casi utilizzando i mapping dei percorsi . mappature di percorso vengono specificati usando la seguente JSON struttura:

{ 
    "paths": { 
     "pattern-1": "substitution" | ["list of substitutions"], 
     "pattern-2": "substitution" | ["list of substitutions"], 
     ... 
     "pattern-N": "substitution" | ["list of substitutions"] 
    } 
} 

Modelli e sostituzioni sono stringhe che possono avere zero o una asteriks ('*'). L'interpretazione di entrambi i modelli e le sostituzioni sarà descritta nella sezione Processo di risoluzione.

https://github.com/Microsoft/TypeScript/issues/5039

Può essere quello che stai cercando.

+0

Eppure la tua risposta non funziona, poiché funziona solo per il compilatore per capire dove si trovano i moduli. Ma dopo il transpiling i percorsi non vengono aggiornati e causeranno errori in qualsiasi nodo app o webpack. – Azarus

+0

@azarus: forse dovrei eliminare questo post Non seguo scrupolosamente TypeScript adesso. Non so quale sia il modo corretto per risolverlo. –

+0

Purtroppo non esiste un modo corretto per colpire ESnext in tsc, quindi usare babel per trasformare i moduli. – Azarus

0

Sono stato in grado di ottenere l'importazione di percorsi assoluti lavorando sul mio setup webpack2. Ecco che ho fatto Devi impostare il tsconfig.json per supportare anche quello. Ecco un esempio: https://medium.com/@timwong/typescript-with-webpack2-how-to-do-import-with-absolute-path-f33b1826d330

Ecco l'esempio nel mio post.

Webpack2 Risolvere

/** 
* Assuming the following project structure 
* /src 
*  /app 
*  /services 
*  /models 
*  /node_modules 
*  .webpack.config.js 
*  tsconfig.json 
*/ 
var path = require('path'); 
module.exports = { 
    module: { ... }, 
    devtool: '...', 
    resolve: { 
    modules: [ 
     path.resolve('./node_modules'), 
     path.resolve('./app') 
    ] 
    } 

Definendo le resolve.modules, istruiamo Webpack per la ricerca (a.k.a risolvere) i componenti che utilizzano questi percorsi come cartella principale. Configurazione TypeScript

Ok, ora che Webpack è pronto; che dire di TypeScript. Se stai usando un editor come Atom o VSCode, probabilmente vedrai un errore evidenziato che dice che TypeScript non riesce a trovare i moduli. È perché TypeScript non è a conoscenza dell'impostazione di questo modulo radice. Dobbiamo fornire queste informazioni anche nel file tsconfig.json.

{ 
    "compilerOptions": { 
    "baseUrl": ".", 
    "paths": { 
     "*": [ 
     "*", 
     "app/*" 
     ] 
    } 
} 

Definendo i sentieri oggetto e il baseurl, abbiamo istruire dattiloscritto compilatore di esaminare la cartella di applicazione per la risoluzione istruzioni import. Spero che questo semplice esempio aiuti a sbloccare tutti coloro che affrontano questo problema di configurazione quando si inizia per la prima volta con TypeScript e Webpack2.

+1

Puoi includere l'esempio nella tua risposta. I collegamenti possono morire nel tempo e significare che l'altro utente dello stack non può trarre vantaggio da questa domanda e risposta – Todd

+0

Sure @Todd, ha aggiunto il mio esempio. –

+0

Grazie per averlo incluso – Todd

0

Ho creato un elenco per il codice sorgente per utilizzare nomi assoluti del percorso o qualsiasi altro percorso definito in tsconfig.json Funziona bene con Browserify + Watchify + Tsify funziona anche con Gulp-dattiloscritto.

https://gist.github.com/azarus/f369ee2ab0283ba0793b0ccf0e9ec590

trasforma i nomi di percorso & baseurl definiti nel tsconfig.json ai loro nomi di percorso relativi. Divertiti!

Problemi correlati