Aliasy ścieżek do importu w WebStorm

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?

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

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

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

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

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

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 .

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.

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.

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

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.

dodaj jsconfig.jsdo katalogu głównego projektu

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