Aliasy ścieżek do importu w WebStorm

83

Używam aliasów ścieżek webpack do ładowania modułu ES6.

Np. Jeśli zdefiniuję alias utilszamiast czegoś podobnego
import Foo from "../../../utils/foo", mogę to zrobić
import Foo from "utils/foo"

Problem polega na tym, że gdy zacznę używać aliasów, WebStorm gubi śledzenie importu i pozostają z ostrzeżeniami i brakiem automatycznego uzupełniania.

Czy istnieje sposób, aby poinstruować WebStorm, aby używał takich aliasów?

Bogdan D.
źródło

Odpowiedzi:

125

Tak jest.

W rzeczywistości Webstorm nie może automatycznie analizować i stosować konfiguracji Webpack, ale możesz skonfigurować aliasy w ten sam sposób.

Musisz tylko oznaczyć folder nadrzędny „utils” (w naszym przykładzie) jako katalog główny zasobów (kliknij prawym przyciskiem myszy, zaznacz katalog jako / resource root).

kliknij folder prawym przyciskiem myszy

Właśnie udało nam się zrobić z następującą strukturą:

/src
    /A
    /B
    /C

Mamy foldery AB i C zadeklarowane jako alias w Webpack. W Webstorm oznaczyliśmy „src” jako „Resource Root”.

A teraz możemy po prostu zaimportować:

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

zamiast

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

nadal mając Webstorm poprawnie analizując i indeksując cały kod, łącza do plików, autouzupełnianie i tak dalej ...

Jalil
źródło
2
to skutecznie zepsuje rzeczy, gdy nie budujesz bezpośrednio z Webstorm
maddrag0n
2
Próbowałem w WebStorm 2016.2.3, ale to rozwiązanie nie działa.
Zation
2
a co z importami w angular2 import { Component } from '@angular/core', to też zostało rozwiązane. Jak mogę zaimplementować, ataby wyjaśnić, że ścieżka jest aliasem?
Hitmands
6
@Toosick zobacz ten blogpost blog.jetbrains.com/webstorm/2017/06/…
anstarovoyt
3
A co z wieloma folderami i wieloma konfiguracjami pakietów internetowych? U mnie nie działa, być może z tego powodu: „Domyślnie WebStorm przeanalizuje plik konfiguracyjny pakietu WebPack w katalogu głównym projektu, ale możesz wybrać inny plik w Preferencjach | Języki i struktury | JavaScript | Pakiet internetowy” blog.jetbrains.com / webstorm / 2017/06 /…
rofrol
54

Udało mi się ustawić aliasy dla WebStorm 2017.2 w webpacku w następujący sposób:

wprowadź opis obrazu tutaj

Tomasz Mularczyk
źródło
2
To działa. Plik powinien zawierać module.exports = {solution: {alias: {'@utils': path.resolve (__ dirname, '../utils/')}}}. Musiałem również zrestartować WebStorm, aby zastosować zmiany.
Alexander
1
Dzięki! Pomogło mi to w PhpStorm 2019.1
Илья Зеленько
Tę odpowiedź powinniśmy oznaczyć jako najlepszą. Dzięki.
Moein Alizadeh
ten pomógł mi
TomTomSamSam
Dzięki! Wreszcie rozwiązanie tego irytującego problemu.
Alberto Perez
34

Dla przypomnienia : w PHPSTORM , pracując z laravel mix , udało mi się to rozwiązać, tworząc osobno plik webpack.config.js, taki jak:

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

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

A następnie zaimportowanie go do pliku webpack.mix.js, na przykład:

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

Upewnij się, że plik konfiguracyjny pakietu internetowego jest poprawnie wskazany w konfiguracji PhpStorm w: Ustawienia> Języki i struktury> Javascript> Webpack

nachodd
źródło
1
Proszę wziąć pod uwagę sytuację użytkowników, którzy faktycznie nie używają webpacka w swoim projekcie i chcą ustawić te dwa pliki WYŁĄCZNIE w celu nauczenia PHPStorm, jak rozwiązywać aliasy. Ci ludzie nie będą wiedzieli, co należy wpisać w "...", aby plik webpack.mix.js faktycznie działał w tym celu. W szczególności, jeśli po prostu usunę „...”, mixsymbol zostanie zgłoszony jako nierozwiązany przez IDE, co jest mocną wskazówką, że w rzeczywistości nie będzie działać. Brakuje, ale krytycznie ważnych wierszy, w których symbol „mieszania” jest w jakiś sposób wymagany / importowany. Dodaj je do swojej odpowiedzi.
Szczepan Hołyszewski 16.10.2020
20

Możesz zdefiniować niestandardowe ścieżki, aby WebStorm / PhpStorm mógł zrozumieć Twoje aliasy. Ale upewnij się, że są one identyczne z Twoimi aliasami. Utwórz plik w swoim katalogu głównym i nazwij go mniej więcej tak: webStorm.config.js(każdy jsplik będzie w porządku). Następnie skonfiguruj ścieżki w środku:

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

WebStorm / PhpStorm rozpozna Systemswój własny moduł i potraktuje ten plik jako konfigurację.

E. Dn
źródło
1
To faktycznie działa! Naprawdę pomogło mi przy projekcie na Rollup + Svelte!
joycollector
1
dzięki. to działa. P: Czy znasz jakąś dokumentację dotyczącą pełnych opcji dostępnych dla tego pliku?
Mojtaba Hn
8

Odpowiada na to komentarz, ale aby zaoszczędzić ludziom kopania w komentarzach i informacjach zawierających tylko linki, oto jest:

Od WS2017.2 będzie to robione automatycznie . Informacje są tutaj .

Zgodnie z tym burza internetowa automatycznie rozwiąże aliasy zawarte webpack.configw katalogu głównym projektu. Jeśli masz niestandardową strukturę i webpack.confignie znajdujesz się w folderze głównym, przejdź do Settings | Languages & Frameworks | JavaScript | Webpacki ustaw opcję na wymaganą konfigurację.

Uwaga: większość instalacji ma basekonfigurację, która następnie wywołuje wersję devlub prod. Aby to działało poprawnie, musisz powiedzieć webstormowi, aby używał wersji deweloperskiej .

webnoob
źródło
2
Wydaje się, że to działa, chyba że jest używany alias Webpack. Używam @jako aliasu do mojego srcfolderu, ale nawet po wskazaniu Webstorm na moją konfigurację nadal nie rozwiązuje on poprawnie moich importów. Jednak gdy oznaczyłem srcfolder jako Resource Root, działał zgodnie z oczekiwaniami. Byłoby miło, gdyby Webstorm mógł obsłużyć aliasy, ale nic wielkiego.
dericcain
Czy jesteś za pomocą symbolu dla aliasu tak: '@': '../src'). Czy używasz jednego pliku do konfiguracji pakietu internetowego, czy wielu? Zastanawiasz się, co jest inne. Dzięki!
dericcain
3
Jednym z moich przykładów jest '@': path.resolve(__dirname, '../src/components'). I korzystać z wielu plików, webpack.base.conf.jswtedy devi prodwersje. Z kolei wywołują folder konfiguracyjny za pomocą index.js, dev.env.jsi prod.env.js. Wskazuję moją burzę internetową, aby spojrzeć na webpack.dev.conf.jsplik.
webnoob
2
Moja konfiguracja jest bardzo podobna (vue-webpack-pwa) i wskazanie jej załatwiło sprawę .dev.conf. Wskazanie na .base.confnie działało. Dobra decyzja!
dericcain
Myślę, że może to wymagać otwarcia problemu. Mogę potwierdzić, że działa, ale często otwieram go i wszystkie aliasy pakietu webpack są nierozwiązane. Robię „Unieważnij pamięć podręczną i uruchom ponownie” i działa zgodnie z reklamą
willredington315,
7

Nie teraz , używaliśmy również aliasów ścieżek dla plików w naszym projekcie React. Nazwy importu były krótsze, ale straciliśmy dużo na statycznym sprawdzaniu burzy internetowej i funkcjach uzupełniania.

Później podjęliśmy decyzję o zredukowaniu kodu do zaledwie 3 poziomów głębokości, a także jednego poziomu dla części wspólnych. Funkcja uzupełniania ścieżek w webstom (ctrl + space)pomaga nawet zmniejszyć obciążenie związane z pisaniem. Wersja produkcyjna nie używa dłuższych nazw, więc prawie nie ma znaczenia w ostatecznym kodzie.

Zasugeruję, aby ponownie rozważyć swoją decyzję dotyczącą aliasów. Tracisz semantyczne znaczenie modułów pochodzących z node_modules i własnego kodu, a także ciągłe odwoływanie się do plików aliasów, aby nadać sens kodowi, jest znacznie większym narzutem.

Sandeep
źródło
1
To jest lepsza odpowiedź. Ścieżki względne są denerwujące, ale wygoda aliasów ścieżek nie jest warta utraty przydatnej funkcjonalności IDE.
thewoolleyman
3

W PHPStorm (obecnie używam 2017.2) nie byłem w stanie uzyskać konfiguracji webpacka, aby działała poprawnie w odniesieniu do aliasów.

Moja poprawka polega na użyciu sekcji „Katalogi” w głównych ustawieniach. Po prostu musiałem oznaczyć każdy folder, do którego odwołuje się alias, jako katalog źródłowy, a następnie kliknąć listę rozwijaną właściwości dla każdego i określić alias jako „Prefiks pakietu”. To sprawiło, że wszystko się dla mnie łączyło.

Nie jestem pewien, czy sekcja Katalogi istnieje w WebStorm, ale jeśli tak, wydaje się, że jest to niezawodny sposób na uruchomienie aliasów importu.

Gordon Forsythe
źródło
2

Dla każdego, kto boryka się z problemami: path.resolve () musi zostać wywołana z pierwszym argumentem „__dirname” dla Idea (Websorm), aby można było poprawnie rozwiązać ścieżkę.

Będzie działać dla Idea (Websorm):

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

Nie będzie działać dla Idea (Websorm) (nadal będąc prawidłowym aliasem pakietu webpack):

alias: {
    '@someAlias': pathLib.resolve('path/to/directory')
}
Kshatra
źródło
1
Jak sprawić, by Webstorm @someAliaspoprawnie rozpoznawał ?
Dave Johansen
Gdzie plik zdefiniowałeś alias? W którym pliku?
Daniel
2

Webstorm nie może odczytać pliku webpack.config, jeśli module.exportszwraca funkcję. Na przykład

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

Sprawdź swój plik konfiguracyjny, może to jest przyczyną problemu.

Aleksey Mann
źródło
1

dodaj jsconfig.jsdo katalogu głównego projektu

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

keating
źródło