WebStorm 中導入的路徑別名

Question

我使用 webpack 路徑別名來加載 ES6 模塊。

例如，如果我為utils定義別名而不是類似的東西
import Foo from "../../../utils/foo" ，我可以
import Foo from "utils/foo"

問題是，一旦我開始使用別名，WebStorm 就會失去對導入的跟蹤，我會收到警告並且沒有自動完成功能。

有沒有辦法指示 WebStorm 使用這樣的別名？

Answer 1

就在這里。

實際上，Webstorm 並不能自動解析和應用 Webpack 配置，但您可以通過相同的方式設置別名。

你只需要標注“utils的”（在你的例子），作為一個資源根（右擊，標記目錄/資源根）的父文件夾。

我們只是設法使用以下結構：

/src
    /A
    /B
    /C

我們在 Webpack 中將 AB 和 C 文件夾聲明為別名。 在 Webstorm 中，我們將“src”標記為“Resource Root”。

現在我們可以簡單地導入：

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

代替

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

同時仍然讓 Webstorm 正確解析和索引所有代碼，鏈接到文件，自動完成等等......

Answer 2

我設法在 webpack 中為 WebStorm 2017.2 設置別名，如下所示：

Answer 3

作為記錄：在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)

確保在 PhpStorm 的配置中正確指向 webpack 配置文件：設置 > 語言和框架 > Javascript > Webpack

Answer 4

您可以定義自定義路徑，以便 WebStorm/PhpStorm 可以理解您的別名。 但請確保它們與您的別名相同。 在您的根目錄中創建文件並命名為： webStorm.config.js （任何js文件都可以）。 然后在里面配置你的路徑：

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

WebStorm/PhpStorm 會將System識別為它自己的模塊，並將將此文件視為配置。

Answer 5

這是在評論中回答的，但為了避免人們深入研究評論並僅鏈接信息，這里是：

從 WS2017.2 開始，這將自動完成。 信息在這里。

據此，webstorm 將自動解析項目根目錄下webpack.config中包含的別名。 如果您有自定義結構並且您的webpack.config不在根文件夾中，請轉到Settings | Languages & Frameworks | JavaScript | Webpack Settings | Languages & Frameworks | JavaScript | Webpack Settings | Languages & Frameworks | JavaScript | Webpack並將選項設置為您需要的配置。

注意：大多數設置都有一個base配置，然后調用dev或prod版本。 為了使其正常工作，您需要告訴 webstorm 使用 dev one 。

Answer 6

不是現在，我們還為我們的 React 項目中的文件使用了路徑別名。 導入名稱較短，但我們在 webstorm 的靜態檢查以及完成功能方面丟失了很多。

我們后來決定將代碼減少到只有 3 個深度級別，以及公共部分的一個級別。 webstom 的路徑補全功能(ctrl + space)甚至有助於減少打字開銷。 生產版本不使用更長的名稱，因此最終代碼幾乎沒有任何區別。

我建議請重新考慮您對別名的決定。 來自 node_modules 和您自己的代碼的模塊的語義松散，以及一次又一次地引用別名文件以理解您的代碼，是一個更大的開銷。

Answer 7

在 PHPStorm（目前使用 2017.2）中，我無法讓 webpack 配置在別名方面正常工作。

我的修復涉及使用主要設置的“目錄”部分。 我只需要將別名引用的每個文件夾標記為源根目錄，然后單擊每個文件夾的屬性下拉列表並將別名指定為“包前綴”。 這讓我的一切都聯系起來了。

不確定 WebStorm 中是否存在 Directories 部分，但如果存在，這似乎是使導入別名工作的萬無一失的方法。

Answer 8

對於任何掙扎的人：path.resolve() 必須使用“__dirname”第一個參數調用 Idea (Websorm) 才能正確解析路徑。

將適用於 Idea (Websorm)：

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

不適用於 Idea (Websorm)（同時仍然是有效的 webpack 別名）：

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

Answer 9

如果module.exports返回一個函數，Webstorm 將無法讀取 webpack.config。 例如

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

檢查您的配置文件，也許這會導致您出現問題。

Answer 10

在您的項目根目錄中添加jsconfig.js

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

Answer 11

在使用 Jetstream 的新 Laravel 項目中遇到了同樣的問題。 webpack.config.js存在且正確。 但是 PHPStorm 仍然沒有將@符號識別為資源根。

打開 webpack 配置后，我收到一條通知：

單擊Trust 項目並運行后， @符號被識別。

我知道這不是適合所有人的解決方案或用例。 但我仍然發現這篇文章值得一提，因為它在我的情況下幫助了我。

使用

• laravel/framework:8.77.1
• npm:8.3.0
• node:v14.18.1

Answer 12

這里有很多關於 Laravel Mix 的討論，所以我將把它留在這里以幫助未來的讀者。 我通過創建一個單獨的（假的）webpack 配置文件來解決這個問題，該文件僅由我的 IDE (PHPStorm) 使用。

1.創建一個單獨的alias.js文件（例如/webpack/alias.js）

const path = require('path');

const assets = path.join(__dirname,'..','resources','assets');

module.exports = {
    '@js'        : path.resolve(assets, 'js'),
    '@c'         : path.resolve(assets, 'js', 'components'),    
    '@errors'    : path.resolve(assets, 'js', 'errors'),
    '@utils'     : path.resolve(assets, 'js', 'utils'),
    '@store'     : path.resolve(assets, 'js', 'store'),
    '@api'       : path.resolve(assets, 'js', 'api'),
    '@less'      : path.resolve(assets, 'less')
}

2. 將alias.js文件引入webpack.mix.js

const mix  = require('laravel-mix');

mix.alias(require('./webpack/alias'))
   // ... The rest of your mix, e.g.
   .js('app.js')
   .vue()
   .less('app.less');

3. 為你的 IDE 創建偽造的 webpack 配置（例如 /webpack/ide.config.js）

在這里，導入 laravel-mix webpack 配置，加上您的別名，以及 IDE 可能需要幫助查找的任何其他配置。 還包括前綴 ~ 別名以將樣式導入 Vue 組件。

/*
 |--------------------------------------------------------------------------
 | A fake config file for PhpStorm to enable aliases
 |--------------------------------------------------------------------------
 |
 |   File > Settings... > Languages & Frameworks > Javascript > Webpack
 |
 |   Select "Manually" and set the configuration file to this
 |
*/
const path = require('path');
const mixConfig = require('./../node_modules/laravel-mix/setup/webpack.config')();

module.exports = {
    ...mixConfig,
    resolve: {
        alias: {
            ...require('./alias'),
            '~@less' : path.resolve('@less'), // <-- 
        },
        ...mixConfig.resolve
    }
}

4. 將您的 IDE 設置為使用webpack/ide.config.js作為您的 webpack 配置文件。