Fare in modo che il codice VS legga webpack.config e riconosca il percorso con alias?

Question

Sto lavorando con Webpack e codice Visual Studio e al fine di evitare cose come: alias

import { AuthenticationService } from '../../../services/authentication/service'; 

ho creato sulla mia webpack.config modo da poter utilizzare:

import { AuthenticationService } from 'services/authentication/service'; 

Tuttavia in tal modo Visual Code non è in grado di rilevare il mio codice e quindi perdo l'intelisense per le mie classi.

Qualcuno ha una soluzione per questo, c'è un modo per far sì che il codice VS legga il webpack.config e riconosca il percorso con l'alias?

grazie in anticipo

Answer 1

aggiornamento typescript@2.0.0 ed è possibile mappare gli stessi alias WebPack su tsconfig.json aggiungendo:

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

Answer 2

mi sono imbattuto in un problema simile. Poiché stavo usando javascript piuttosto che dattiloscritto, ho dovuto creare un file jsconfig.json e utilizzare l'opzione paths in modo appropriato.

Ipotizzando una struttura di directory simile a questo:

. 
├── src 
│   ├── foo.js 
│   ├── jsconfig.json # your vscode js config 
│   └── my-module  # folder you're aliasing 
│    └── bar.js 
└── webpack.config.js # your webpack config 

questa ferita a lavorare per me:

1. Impostare webpack risolvere alias:

   var path = require('path'); 
   module.exports = { 
       resolve: { 
       alias: { 
        "my-module": path.resolve(__dirname, './src/my-module') 
       } 
       }, 
       // ... other webpack options 
   }; 
   

2. Modifica jsconfig.json nella cartella src:

   { 
       "compilerOptions": { 
       "target": "es6", 
       "paths": { 
        "my-module": ["./my-module"] 
       } 
       } 
   } 
   

3. utilizzare l'alias:

   // in foo.js 
   import Bar from 'my-module/bar'; 
   Bar.quack(); 
   

Answer 3

è necessario specificare le paths e baseUrl campi nel file jsconfig.json.

{ 
    "compilerOptions": { 
     "jsx": "react", 
     "target": "ES6", 
     "allowSyntheticDefaultImports": true, 
     "baseUrl": "./", 
     "paths": { 
      "~/*": ["./app/*"] 
     } 
    }, 
    "exclude": [ 
     "node_modules" 
    ] 
} 

Vedi path mapping documentation