Ich verwende Webpack-Pfad-Aliase zum Laden von ES6-Modulen.
ZB Wenn ich utils
anstelle 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?
quelle
import { Component } from '@angular/core'
, das ist auch gelöst. Wie kann ich das implementierenat
, um klarer zu machen, dass der Pfad ein Alias ist?Ich habe es geschafft, Aliase für WebStorm 2017.2 in Webpack wie folgt einzurichten:
quelle
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
quelle
mix
Symbol 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.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
(Jedejs
Datei ist in Ordnung). Konfigurieren Sie dann Ihre Pfade im Inneren:System.config({ "paths": { "components/*": "./src/components/*", "core/*": "./src/core/*", ... } });
WebStorm / PhpStorm erkennt
System
es als eigenes Modul und behandelt diese Datei als Konfiguration.quelle
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.config
im Stammverzeichnis des Projekts enthalten sind. Wenn Sie eine benutzerdefinierte Struktur haben undwebpack.config
sich 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
base
Konfiguration, die dann einedev
oderprod
Version aufruft . Damit dies ordnungsgemäß funktioniert, müssen Sie Webstorm anweisen, den Entwickler zu verwenden .quelle
@
als Alias für meinensrc
Ordner, aber selbst nachdem ich Webstorm auf meine Konfiguration verwiesen habe, werden meine Importe immer noch nicht korrekt aufgelöst. Sobald ich densrc
Ordner 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.'@': '../src')
. Verwenden Sie auch eine Datei für Ihre Webpack-Konfiguration oder mehrere? Ich frage mich, was anders ist. Vielen Dank!'@': path.resolve(__dirname, '../src/components')
. Ich benutze mehrere Dateien,webpack.base.conf.js
danndev
undprod
Versionen. Diese wiederum rufen einen Config - Ordner mitindex.js
,dev.env.js
undprod.env.js
. Ich zeige mit meinem Webstorm auf diewebpack.dev.conf.js
Datei..dev.conf
den Trick zu zeigen. Das Zeigen auf das.base.conf
funktionierte nicht. Guter Anruf!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.
quelle
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.
quelle
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') }
quelle
@someAlias
richtig zu erkennen ?Webstorm kann webpack.config nicht lesen, wenn
module.exports
eine Funktion zurückgegeben wird. Zum Beispielmodule.exports = function (webpackEnv) { return { mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development', ... } }
Überprüfen Sie Ihre Konfigurationsdatei. Möglicherweise liegt dies an Ihnen.
quelle
Fügen Sie
jsconfig.js
Ihren Projektstamm hinzu{ "compilerOptions": { "baseUrl": ".", "paths": { "~/*": ["./src/*"] } } }
quelle