web-dev-qa-db-de.com

Pfadaliasnamen für Importe in WebStorm

Ich verwende Webpackpfad-Aliase für das Laden von ES6-Modulen. 

Z.B. Wenn ich einen Alias ​​für utils definiere, statt so etwas
import Foo from "../../../utils/foo" kann ich tun
import Foo from "utils/foo"

Das Problem ist, dass WebStorm nach dem Verwenden von Aliasnamen den Import verliert und ich Warnmeldungen und keine automatische Vervollständigung hinterlasse.

Gibt es eine Möglichkeit, WebStorm anzuweisen, solche Aliase zu verwenden?

58
Bogdan D

[Veraltete Antwort. Seit WS2017.2 startet Webstorm die Webpack-Konfiguration automatisch und wendet sie an (siehe @anstarovoyt-Kommentar)] 

Ja da ist. 

Tatsächlich kann Webstorm die Webpack-Konfiguration nicht automatisch analysieren und anwenden. Sie können jedoch Aliase auf dieselbe Weise einrichten. 

Sie müssen lediglich den Ordner parent von "utils" (in Ihrem Beispiel) als resource root (Rechtsklick, Verzeichnis als/resource root) markieren. 

 right click on folder

Wir haben es gerade mit der folgenden Struktur geschafft: 

/src
    /A
    /B
    /C

Wir haben die Ordner A B und C als Alias ​​in Webpack deklariert. Und in Webstorm haben wir "src" als "Ressourcenstamm" markiert. 

Und jetzt können wir einfach importieren: 

import A/path/to/any/file.js

anstatt 

import ../../../../../A/path/to/any/file.js

während Webstorm immer noch den gesamten Code analysiert, indiziert und verlinkt, Dateien verlinkt, Autovervollständigung usw.

92
Jalil

Es ist mir gelungen, Aliase für WebStorm 2017.2 in Webpacks wie folgt einzurichten:

 enter image description here

24

Für das Protokoll: inPHPSTORM, das ich mit laravel mix arbeitete, konnte ich dies lösen, indem ich eine webpack.config.js-Datei separat erstellte, wie: 

const path = require('path')
const webpack = require('webpack')

module.exports = {
  ...
  resolve: {
    extensions: ['.js', '.json', '.vue'],
    alias: {
      '~': path.resolve(__dirname, './resources/assets/js')
    }
  },
  ...
}

Und importiere es dann in die webpack.mix.js wie: 

const config = require('./webpack.config')
...
mix.webpackConfig(config)

Stellen Sie sicher, dass die Webpack-Konfigurationsdatei in der Konfiguration des PhpStorm richtig eingestellt ist: Einstellungen> Sprachen und Frameworks> Javascript> Webpack

10
nachodd

Momentan nicht , Wir haben auch Pfad-Aliase für die Dateien in unserem Projekt "rea" verwendet. Die Importnamen waren kürzer, aber wir verloren viel bei der statischen Überprüfung von Webstorm sowie den Fertigstellungsfunktionen.

Später kamen wir zu dem Entschluss, den Code auf nur 3 Tiefenstufen zu reduzieren, sowie auf eine einzige Stufe für die allgemeinen Teile. Die Pfadfertigstellungsfunktion von webstom (ctrl + space) trägt sogar dazu bei, den Tippaufwand zu reduzieren. Der Produktions-Build verwendet keine längeren Namen und macht daher im endgültigen Code kaum einen Unterschied.

Ich werde vorschlagen, bitte Ihre Entscheidung über Aliase zu überdenken. Sie verlieren die semantische Bedeutung von Modulen, die aus node_modules und Ihrem eigenen Code stammen, sowie das Referenzieren der Alias-Dateien, um den Code zu verstehen, ist ein viel größerer Aufwand.

5
sandeep

Dies wird in einem Kommentar beantwortet, aber um zu vermeiden, dass sich die Leute in Kommentare stürzen und nur Informationen verknüpfen, hier ist es:

Ab WS2017.2 wird dies automatisch durchgeführt. Die Informationen sind hier

Dementsprechend löst Webstorm automatisch Aliasnamen auf, die in webpack.config im Stammverzeichnis des Projekts enthalten sind. Wenn Sie über eine benutzerdefinierte Struktur verfügen und sich Ihr webpack.config nicht im Stammordner befindet, wechseln Sie zu Settings | Languages & Frameworks | JavaScript | Webpack und legen Sie die Option auf die gewünschte Konfiguration fest.

Anmerkung: Die meisten Setups haben eine base config, die dann eine dev- oder prod-Version aufruft. Damit dies einwandfrei funktioniert, muss Sie Webstorm die Verwendung des Entwicklers mitteilen.

4
webnoob

In PHPStorm (derzeit mit 2017.2) konnte ich Webpack-Konfigurationen in Bezug auf Aliase nicht ordnungsgemäß ausführen.

Mein Fix beinhaltet die Verwendung des "Directories" -Abschnitts der Haupteinstellungen. Ich musste nur jeden Ordner, auf den ein Alias ​​verweist, als Quellstammverzeichnis kennzeichnen, dann auf die Eigenschaften-Dropdown-Liste klicken und den Alias ​​als "Paketpräfix" angeben. Dadurch wurde alles für mich verbunden.

Nicht sicher, ob der Abschnitt Directories in WebStorm vorhanden ist. Wenn dies der Fall ist, scheint dies eine narrensichere Methode zu sein, damit Import-Aliasnamen funktionieren.

2
Gordon Forsythe

Für alle, die Probleme haben: path.resolve () muss mit dem ersten Argument "__dirname" für Idea (Websorm) aufgerufen werden, um den Pfad richtig auflösen zu können.

Funktioniert für Idea (Websorm):

alias: {
    '@someAlias': pathLib.resolve(__dirname, 'path/to/directory')
}

Funktioniert nicht für Idea (Websorm) (solange der Alias ​​noch gültig ist):

alias: {
    '@someAlias': pathLib.resolve('path/to/directory')
}
2
Kshatra

Webstorm kann webpack.config nicht lesen, wenn module.exports eine Funktion zurückgibt . Zum Beispiel

module.exports = function (webpackEnv) {
  return {
    mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
    ...
 }
}

Überprüfen Sie Ihre Konfigurationsdatei. Möglicherweise handelt es sich dabei um ein Problem.

0
Aleksey Mann