Pfad-Aliase für Importe in WebStorm

82

Ich verwende Webpack-Pfad-Aliase zum Laden von ES6-Modulen.

ZB Wenn ich utilsanstelle von so etwas einen Alias ​​definiere
import Foo from "../../../utils/foo", kann ich das tun
import Foo from "utils/foo"

Das Problem ist, dass WebStorm, sobald ich Aliase verwende, den Überblick über den Import verliert und Warnungen und keine automatische Vervollständigung übrig bleiben.

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

Bogdan D.
quelle

Antworten:

125

Ja da ist.

In der Tat kann Webstorm die Webpack-Konfiguration nicht automatisch analysieren und anwenden, aber Sie können Aliase auf die gleiche Weise einrichten.

Sie müssen nur den übergeordneten Ordner von "utils" (in Ihrem Beispiel) als Ressourcenstamm markieren (Rechtsklick, Verzeichnis als / Ressourcenstamm markieren).

Rechtsklick auf Ordner

Wir haben es gerade mit folgender Struktur geschafft:

/src
    /A
    /B
    /C

Wir haben AB- und C-Ordner in Webpack als Alias ​​deklariert. Und in Webstorm haben wir "src" als "Resource Root" markiert.

Und jetzt können wir einfach importieren:

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

Anstatt von

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

während Webstorm immer noch den gesamten Code korrekt analysiert und indiziert, Links zu Dateien erstellt, automatisch vervollständigt und so weiter ...

Jalil
quelle
2
Dies wird effektiv Dinge brechen, wenn nicht direkt von Webstorm
maddrag0n
2
Ich habe es in WebStorm 2016.2.3 versucht, aber diese Lösung funktioniert nicht.
Zation
2
und was ist mit Importen in angle2 import { Component } from '@angular/core', das ist auch gelöst. Wie kann ich das implementieren at, um klarer zu machen, dass der Pfad ein Alias ​​ist?
Hitmands
6
@Toosick siehe diesen Blogpost blog.jetbrains.com/webstorm/2017/06/…
anstarovoyt
3
Was ist mit mehreren Ordnern und mehreren Webpack-Konfigurationen? Funktioniert bei mir möglicherweise aus diesem Grund nicht: "Standardmäßig analysiert WebStorm die Webpack-Konfigurationsdatei im Stammverzeichnis des Projekts, Sie können jedoch eine andere Datei unter" Einstellungen "| Sprachen & Frameworks | JavaScript | Webpack" auswählen. Blog.jetbrains.com / Websturm / 2017/06 /…
Rofrol
53

Ich habe es geschafft, Aliase für WebStorm 2017.2 in Webpack wie folgt einzurichten:

Geben Sie hier die Bildbeschreibung ein

Tomasz Mularczyk
quelle
2
Es klappt. Die Datei sollte module.exports = {resolve: {alias: {'@utils': path.resolve (__ dirname, '../utils/')}} enthalten. Außerdem musste ich WebStorm neu starten, um die Änderungen zu übernehmen.
Alexander
1
Vielen Dank! Es half mir in PhpStorm 2019.1
Илья Зеленько
Wir sollten diese Antwort als die beste Antwort markieren. Vielen Dank.
Moein Alizadeh
Dieser hat mir geholfen
TomTomSamSam
Vielen Dank! Endlich eine Lösung für dieses nervige Problem.
Alberto Perez
34

Für die Aufzeichnung: In PHPSTORM , das mit Laravel Mix arbeitete , gelang es mir, dieses Problem zu lösen, indem ich eine Datei webpack.config.js 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 dann importieren Sie es 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 unter: Einstellungen> Sprachen und Frameworks> Javascript> Webpack korrekt angezeigt wird

nachodd
quelle
1
Bitte berücksichtigen Sie die Situation von Benutzern, die Webpack in ihrem Projekt nicht verwenden und diese beiden Dateien NUR einrichten möchten, um PHPStorm das Auflösen von Aliasen beizubringen. Diese Leute werden nicht wissen, was in "..." stehen soll, damit die Datei webpack.mix.js tatsächlich für diesen Zweck funktioniert. Insbesondere wenn ich einfach "..." entferne, wird das mixSymbol von der IDE als nicht aufgelöst gemeldet. Dies ist ein starker Hinweis darauf, dass es nicht wirklich funktioniert. Es fehlen aber wichtige Zeilen, in denen das "Mix" -Symbol irgendwie benötigt / importiert wird. Bitte fügen Sie diese Ihrer Antwort hinzu.
Szczepan Hołyszewski
19

Sie können benutzerdefinierte Pfade definieren, damit WebStorm / PhpStorm Ihre Aliase verstehen kann. Stellen Sie jedoch sicher, dass sie mit Ihren Aliasnamen identisch sind. Erstellen Sie eine Datei in Ihrem Stammverzeichnis und nennen Sie sie ungefähr so: webStorm.config.js(Jede jsDatei ist in Ordnung). Konfigurieren Sie dann Ihre Pfade im Inneren:

System.config({
  "paths": {
    "components/*": "./src/components/*",
    "core/*": "./src/core/*",
    ...
  }
});

WebStorm / PhpStorm erkennt Systemes als eigenes Modul und behandelt diese Datei als Konfiguration.

E. Dn
quelle
1
Das funktioniert tatsächlich! Hat mir beim Projekt auf Rollup + Svelte wirklich geholfen!
Joycollector
1
Vielen Dank. Es klappt. F: Kennen Sie eine Dokumentation für die vollständigen Optionen, die für diese Datei verfügbar sind?
Mojtaba Hn
8

Dies wird in einem Kommentar beantwortet, aber um Leute zu retten, die sich in Kommentare vertiefen und nur Informationen verlinken, hier ist es:

Ab WS2017.2 erfolgt dies automatisch . Die Informationen sind hier .

Demnach löst Webstorm automatisch Aliase auf, die webpack.configim Stammverzeichnis des Projekts enthalten sind. Wenn Sie eine benutzerdefinierte Struktur haben und webpack.configsich nicht im Stammordner befinden, gehen Sie zuSettings | Languages & Frameworks | JavaScript | Webpack und stellen Sie die Option auf die gewünschte Konfiguration ein.

Hinweis: Die meisten Setups haben eine baseKonfiguration, die dann eine devoder prodVersion aufruft . Damit dies ordnungsgemäß funktioniert, müssen Sie Webstorm anweisen, den Entwickler zu verwenden .

webnoob
quelle
2
Dies scheint zu funktionieren, sofern kein Webpack-Alias ​​verwendet wird. Ich verwende @als Alias ​​für meinen srcOrdner, aber selbst nachdem ich Webstorm auf meine Konfiguration verwiesen habe, werden meine Importe immer noch nicht korrekt aufgelöst. Sobald ich den srcOrdner jedoch als Ressourcenstamm markiert habe , funktionierte er wie erwartet. Wäre schön, wenn Webstorm mit Aliasnamen umgehen könnte, aber keine große Sache.
Dericcain
Verwenden Sie ein Symbol für einen Alias ​​wie folgt : '@': '../src'). Verwenden Sie auch eine Datei für Ihre Webpack-Konfiguration oder mehrere? Ich frage mich, was anders ist. Vielen Dank!
Dericcain
3
Ein Beispiel von mir ist '@': path.resolve(__dirname, '../src/components'). Ich benutze mehrere Dateien, webpack.base.conf.jsdann devund prodVersionen. Diese wiederum rufen einen Config - Ordner mit index.js, dev.env.jsund prod.env.js. Ich zeige mit meinem Webstorm auf die webpack.dev.conf.jsDatei.
Webnoob
2
Mein Setup ist sehr ähnlich (vue-webpack-pwa) und es auf .dev.confden Trick zu zeigen. Das Zeigen auf das .base.conffunktionierte nicht. Guter Anruf!
Dericcain
Ich denke, dies muss möglicherweise ein Problem lösen. Ich kann bestätigen, dass es funktioniert, aber oft öffne ich es und alle Webpack-Aliase sind ungelöst. Ich mache ein "Invalidate Caches and Restart" und es funktioniert wie angekündigt
willredington315
7

Nicht jetzt haben wir auch Pfad-Aliase für die Dateien in unserem Reaktionsprojekt verwendet. Die Importnamen waren kürzer, aber wir haben viel an statischer Überprüfung des Websturms sowie an den Abschlussfunktionen verloren.

Wir haben uns später entschieden, den Code auf nur drei Tiefenebenen sowie eine einzige Ebene für die gemeinsamen Teile zu reduzieren. Die Pfadvervollständigungsfunktion von Webstom (ctrl + space)hilft sogar dabei, den Tippaufwand zu reduzieren. Der Produktions-Build verwendet keine längeren Namen und macht daher kaum einen Unterschied im endgültigen Code.

Ich werde vorschlagen, Ihre Entscheidung über Aliase zu überdenken. Sie verlieren die semantische Bedeutung von Modulen, die von node_modules und Ihrem eigenen Code stammen, und das wiederholte Verweisen auf die Aliasdateien, um Ihren Code zu verstehen, ist ein viel größerer Aufwand.

Sandeep
quelle
1
Dies ist die bessere Antwort. Relative Pfade sind ärgerlich, aber die Bequemlichkeit von Pfadaliasnamen ist es nicht wert, nützliche IDE-Funktionen zu verlieren.
Thewoolleyman
3

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

Mein Fix beinhaltet die Verwendung des Abschnitts "Verzeichnisse" der Haupteinstellungen. Ich musste nur jeden Ordner, auf den ein Alias ​​verweist, als Quellstamm markieren, dann auf die Dropdown-Liste mit den Eigenschaften für jeden Ordner klicken und den Alias ​​als "Paketpräfix" angeben. Das hat alles für mich verbunden.

Ich bin mir nicht sicher, ob der Abschnitt "Verzeichnisse" in WebStorm vorhanden ist, aber wenn dies der Fall ist, scheint dies eine narrensichere Methode zu sein, um Importaliasnamen zum Laufen zu bringen.

Gordon Forsythe
quelle
2

Für alle, die Probleme haben: path.resolve () muss mit dem ersten Argument "__dirname" aufgerufen werden, damit Idea (Websorm) den Pfad korrekt auflösen kann.

Funktioniert für Idea (Websorm):

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

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

alias: {
    '@someAlias': pathLib.resolve('path/to/directory')
}
Kshatra
quelle
1
Wie bringt man Webstorm dazu, @someAliasrichtig zu erkennen ?
Dave Johansen
Wo haben Sie den Alias ​​definiert? In welcher Datei?
Daniel
2

Webstorm kann webpack.config nicht lesen, wenn module.exportseine Funktion zurückgegeben wird. Zum Beispiel

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

Überprüfen Sie Ihre Konfigurationsdatei. Möglicherweise liegt dies an Ihnen.

Aleksey Mann
quelle
1

Fügen Sie jsconfig.jsIhren Projektstamm hinzu

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

Keating
quelle