ES6 モジュールの読み込みに webpack パス エイリアスを使用します。
たとえばutils、のようなものの代わりにエイリアスを定義すると、次の
import Foo from "../../../utils/foo"ことができます
import Foo from "utils/foo"
問題は、エイリアスの使用を開始すると、WebStorm がインポートの追跡を失い、警告が表示され、オートコンプリートされないことです。
そのようなエイリアスを使用するよう WebStorm に指示する方法はありますか?
はいあります。
実際、Webstorm は Webpack 構成を自動的に解析して適用することはできませんが、同じ方法でエイリアスを設定できます。
「utils」の親フォルダー（例では）をリソースルートとしてマークするだけです（右クリックして、ディレクトリを/リソースルートとしてマークします）。
次の構造でうまくいきました：
/src
/A
/B
/C
Webpack でエイリアスとして宣言された AB および C フォルダーがあります。Webstorm では、「src」を「リソース ルート」としてマークしました。
そして今、単純にインポートできます:
import A/path/to/any/file.js
それ以外の
import ../../../../../A/path/to/any/file.js
Webstorm がすべてのコードの解析とインデックス作成、ファイルへのリンク、オートコンプリートなどを正しく実行している間...
今は違います。react プロジェクトのファイルにはパス エイリアスも使用していました。インポート名は短くなりましたが、webstorm の静的チェックと補完機能で多くを失いました。
その後、コードの深さを 3 レベルに減らし、共通部分を 1 レベルにするという決定に至りました。webstom のパス補完機能は(ctrl + space)、入力のオーバーヘッドを削減するのにも役立ちます。製品ビルドでは長い名前を使用しないため、最終的なコードにほとんど違いはありません。
エイリアスに関する決定を再考することをお勧めします。node_modules と独自のコードに由来するモジュールのセマンティックな意味を失うだけでなく、コードを理解するためにエイリアス ファイルを何度も参照すると、はるかに大きなオーバーヘッドになります。
Jetstream を使用した新しい Laravel プロジェクトでも同じ問題が発生しました。webpack.config.js存在し、正しかった。しかし、PHPStorm はまだ@シンボルをリソース ルートとして認識しませんでした。
webpack 構成を開いた後、通知を受け取りました。
Trust project and run をクリックすると、@シンボルが認識されるようになりました。
これがすべての人にとっての解決策やユースケースではないことはわかっています。しかし、私の状況で役に立ったので、この投稿に注目する価値があると思いました.
使用する
laravel/framework:8.77.1npm:8.3.0node:v14.18.1