Pfad-Aliase für Importe in WebStorm

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?

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).

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 ...

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

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

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.

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 .

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.

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.

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')
}

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.

Fügen Sie jsconfig.jsIhren Projektstamm hinzu

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