web-dev-qa-db-ja.com

WebStormでのインポートのパスエイリアス

ES6モジュールのロードにwebpackパスエイリアスを使用します。

例のようなものの代わりにutilsのエイリアスを定義した場合
import Foo from "../../../utils/foo"、私はできる
import Foo from "utils/foo"

問題は、エイリアスの使用を開始すると、WebStormがインポートの追跡を失い、警告が表示され、オートコンプリートがなくなることです。

そのようなエイリアスを使用するようにWebStormに指示する方法はありますか？

javascriptwebstormwebpackes6-module-loader
67
Bogdan D

[非推奨の回答。 WS2017.2以降、WebstormはWebpack構成を自動的に解析して適用します（@anstarovoytコメントを参照）]

はい、あります。

実際、WebstormはWebpackの構成を自動的に解析および適用することはできませんが、エイリアスを同じ方法で設定できます。

parentフォルダーの「utils」（この例では）をresource root（右クリックして、ディレクトリを/リソースルートとしてマークします）。

right click on folder

次の構造をどうにかすることができました。

/src
    /A
    /B
    /C

Webpackでエイリアスとして宣言されたA BおよびCフォルダーがあります。 Webstormでは、「src」を「Resource Root」としてマークしました。

そして今、私たちは単にインポートすることができます：

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

の代わりに

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

webstormがすべてのコード、ファイルへのリンク、オートコンプリートなどを正しく解析およびインデックス付けしている間に...

103
Jalil

次のようにwebpack内でWebStorm 2017.2のエイリアスを設定できました。

enter image description here

35
Tomasz Mularczyk

レコードの場合：PHPSTORMでlaravel mixを使用して、webpack.config.jsファイルを次のように個別に作成することでこれを解決しました。

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

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

そして、次のようにwebpack.mix.jsにインポートします。

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

Webpack構成ファイルがPhpStormの構成で正しく設定されていることを確認します：設定>言語とフレームワーク> Javascript> Webpack

19
nachodd

これはコメントで回答されますが、コメントを掘り下げて情報のみをリンクする人々を節約するために、ここにあります：

WS2017.2以降、これは自動的に行われます。情報は here です。

これによると、webstormはプロジェクトのルートのwebpack.configに含まれるエイリアスを自動的に解決します。カスタム構造があり、webpack.configがルートフォルダーにない場合は、Settings | Languages & Frameworks | JavaScript | Webpackに移動し、必要な構成にオプションを設定します。

注：ほとんどのセットアップにはbase構成があり、devまたはprodバージョンを呼び出します。これが正しく機能するためには、webstormにdev oneを使用するよう指示する必要があります。

5
webnoob

現時点ではありません、reactプロジェクトのファイルにもパスエイリアスを使用していました。インポート名は短くなりましたが、webstormおよび補完機能の静的チェックで多くを失いました。

後ほど、コードを3レベルの深さだけでなく、共通部分の単一レベルに減らすという決定を思いつきました。 webstom (ctrl + space)のパス補完機能は、入力のオーバーヘッドを減らすのにも役立ちます。本番ビルドでは長い名前を使用しないため、最終的なコードに違いはほとんどありません。

エイリアスに関する決定を再検討することをお勧めします。 node_modulesと独自のコードから得られるモジュールのセマンティックな意味を失い、コードを理解するためにエイリアスファイルを何度も参照することは、はるかに大きなオーバーヘッドです。

5
sandeep

PHPStorm（現在2017.2を使用）では、エイリアスに関してwebpackの設定を適切に動作させることができませんでした。

私の修正には、メイン設定の「ディレクトリ」セクションの使用が含まれます。エイリアスによって参照される各フォルダーをソースルートとしてマークし、それぞれのプロパティのドロップダウンをクリックして、エイリアスを「パッケージプレフィックス」として指定する必要がありました。これにより、すべてがリンクされました。

ディレクトリセクションがWebStormに存在するかどうかはわかりませんが、存在する場合、これはインポートエイリアスを機能させる簡単な方法のようです。

2
Gordon Forsythe

苦労している人のために：path.resolve（）は、Idea（Websorm）の最初の引数に「__dirname」を指定して呼び出して、パスを正しく解決できるようにする必要があります。

Idea（Websorm）で機能します：

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

Idea（Websorm）では動作しません（有効なwebpackエイリアスのままです）：

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

module.exportsが関数を返す場合、Webstormはwebpack.configを読み取ることができません。例えば

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

設定ファイルを確認してください。これが問題の原因かもしれません。

0
Aleksey Mann