93

我使用 webpack 路径别名来加载 ES6 模块。

例如，如果我定义一个别名utils而不是类似的东西
import Foo from "../../../utils/foo"，我可以做
import Foo from "utils/foo"

问题是，一旦我开始使用别名，WebStorm 就会失去对导入的跟踪，留下警告并且没有自动完成功能。

有没有办法指示 WebStorm 使用这样的别名？

4

12 回答 12

138

就在这里。

事实上，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 正确解析和索引所有代码、链接到文件、自动完成等等......

于 2016-05-10T09:54:52.403 回答
72

我设法在 webpack 中为 WebStorm 2017.2 设置别名，如下所示：

在此处输入图像描述

于 2017-08-28T08:38:42.987 回答
41

作为记录：在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

于 2018-05-03T16:02:59.573 回答
38

您可以定义自定义路径，以便 WebStorm/PhpStorm 可以理解您的别名。但请确保它们与您的别名相同。在您的根目录中创建文件，然后将其命名为：（webStorm.config.js任何js文件都可以）。然后在里面配置你的路径：

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

WebStorm/PhpStorm 将识别System为它自己的模块并将此文件视为配置。

于 2019-12-17T06:56:55.680 回答
9

这在评论中得到了回答，但为了避免人们深入评论和链接信息，这里是：

从 WS2017.2 开始，这将自动完成。信息在这里。

据此，webstorm 将自动解析webpack.config项目根目录中包含的别名。如果您有自定义结构并且您webpack.config不在根文件夹中，请转到Settings | Languages & Frameworks | JavaScript | Webpack并将选项设置为您需要的配置。

注意：大多数设置都有一个base配置，然后调用一个dev或prod版本。为了使其正常工作，您需要告诉 webstorm 使用 dev one。

于 2017-12-01T21:24:18.917 回答
7

不是现在，我们还在我们的 react 项目中为文件使用路径别名。导入名称更短，但我们在 webstorm 的静态检查和完成功能方面损失了很多。

后来我们决定将代码的深度减少到只有 3 个级别，以及公共部分的一个级别。webstom 的路径补全功能(ctrl + space)甚至有助于减少打字开销。生产版本不使用更长的名称，因此最终代码几乎没有任何区别。

我建议请重新考虑您对别名的决定。您失去了来自 node_modules 和您自己的代码的模块的语义含义，以及一次又一次地引用别名文件以理解您的代码，这是一个更大的开销。

于 2016-01-23T13:30:17.660 回答
3

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

我的修复涉及使用主要设置的“目录”部分。我只需将别名引用的每个文件夹标记为源根目录，然后单击每个文件夹的属性下拉菜单并将别名指定为“包前缀”。这使我的一切都联系起来了。

不确定 WebStorm 中是否存在 Directories 部分，但如果存在，这似乎是让导入别名工作的一种万无一失的方法。

于 2017-08-10T16:59:19.930 回答
2

添加jsconfig.js到您的项目根目录

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["./src/*"]
    }
  }
}
于 2020-11-26T00:42:44.473 回答
2

module.exports如果返回函数，Webstorm 无法读取 webpack.config 。例如

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

检查您的配置文件，也许这会导致您出现问题。

于 2019-01-13T09:29:00.360 回答
2

对于任何挣扎的人：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')
}
于 2018-04-28T12:41:22.280 回答
0

这里有很多关于 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 配置文件。

于 2022-01-06T12:44:50.030 回答
0

在 Jetstream 的新 Laravel 项目中遇到了同样的问题。webpack.config.js存在且正确。但是 PHPStorm 仍然无法将该@符号识别为资源根。

打开 webpack 配置后，我收到了一条通知：

PHPStorm 通知

单击Trust project 并运行后，该@符号被识别。

我知道这不是每个人的解决方案或用例。但我仍然发现这篇文章值得注意，因为它在我的情况下帮助了我。

使用

  • laravel/framework:8.77.1
  • npm:8.3.0
  • node:v14.18.1
于 2022-01-04T10:04:45.697 回答