Machen VS-Code webpack.config lesen und Pfad mit Alias ​​erkennen?

Question

Ich bin mit Webpack und Visual Studio-Code und um Dinge wie zu vermeiden, arbeiten:

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

jedoch:

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

Ich habe auf meinem webpack.config erstellt Aliase so kann ich Dadurch kann Visual Code meinen Code nicht erkennen und deshalb verliere ich die Intellisense für meine Klassen.

Hat jemand eine Lösung dafür, gibt es eine Möglichkeit VS-Code zum Lesen der Datei webpack.config zu machen und den Pfad mit dem Alias ​​zu erkennen?

Dank im Voraus

Answer 1

Update typescript@2.0.0 und Sie können durch Hinzufügen der gleichen webpack Aliase auf tsconfig.json Karte:

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

Answer 2

Ich lief in ein ähnliches Problem. Da ich Javascript anstelle von Typoskript verwendete, musste ich eine jsconfig.json Datei erstellen und die paths Option entsprechend verwenden.

eine Verzeichnisstruktur wie folgt aus der Annahme:

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

Diese Wunde für mich Aufarbeiten:

1. webpack resolve alias ein:

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

2. Ändern jsconfig.json in Ihrem src-Ordner:

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

3. Verwenden Sie den Alias:

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

Answer 3

Sie müssen die paths und baseUrl Felder in Ihrer jsconfig.json-Datei angeben.

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

Siehe path mapping documentation