Używam aliasów ścieżek webpack do ładowania modułu ES6.
Np. Jeśli zdefiniuję alias utils
zamiast 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?
źródło
import { Component } from '@angular/core'
, to też zostało rozwiązane. Jak mogę zaimplementować,at
aby wyjaśnić, że ścieżka jest aliasem?Udało mi się ustawić aliasy dla WebStorm 2017.2 w webpacku w następujący sposób:
źródło
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
źródło
mix
symbol 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.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żdyjs
plik będzie w porządku). Następnie skonfiguruj ścieżki w środku:System.config({ "paths": { "components/*": "./src/components/*", "core/*": "./src/core/*", ... } });
WebStorm / PhpStorm rozpozna
System
swój własny moduł i potraktuje ten plik jako konfigurację.źródło
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.config
w katalogu głównym projektu. Jeśli masz niestandardową strukturę iwebpack.config
nie znajdujesz się w folderze głównym, przejdź doSettings | Languages & Frameworks | JavaScript | Webpack
i ustaw opcję na wymaganą konfigurację.Uwaga: większość instalacji ma
base
konfigurację, która następnie wywołuje wersjędev
lubprod
. Aby to działało poprawnie, musisz powiedzieć webstormowi, aby używał wersji deweloperskiej .źródło
@
jako aliasu do mojegosrc
folderu, ale nawet po wskazaniu Webstorm na moją konfigurację nadal nie rozwiązuje on poprawnie moich importów. Jednak gdy oznaczyłemsrc
folder jako Resource Root, działał zgodnie z oczekiwaniami. Byłoby miło, gdyby Webstorm mógł obsłużyć aliasy, ale nic wielkiego.'@': '../src')
. Czy używasz jednego pliku do konfiguracji pakietu internetowego, czy wielu? Zastanawiasz się, co jest inne. Dzięki!'@': path.resolve(__dirname, '../src/components')
. I korzystać z wielu plików,webpack.base.conf.js
wtedydev
iprod
wersje. Z kolei wywołują folder konfiguracyjny za pomocąindex.js
,dev.env.js
iprod.env.js
. Wskazuję moją burzę internetową, aby spojrzeć nawebpack.dev.conf.js
plik..dev.conf
. Wskazanie na.base.conf
nie działało. Dobra decyzja!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.
źródło
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.
źródło
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') }
źródło
@someAlias
poprawnie rozpoznawał ?Webstorm nie może odczytać pliku webpack.config, jeśli
module.exports
zwraca funkcję. Na przykładmodule.exports = function (webpackEnv) { return { mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development', ... } }
Sprawdź swój plik konfiguracyjny, może to jest przyczyną problemu.
źródło
dodaj
jsconfig.js
do katalogu głównego projektu{ "compilerOptions": { "baseUrl": ".", "paths": { "~/*": ["./src/*"] } } }
źródło