WebStorm中导入的路径别名

我将webpack路径别名用于ES6模块加载。

例如，如果我为utils而不是定义别名，则
import Foo from "../../../utils/foo"可以
import Foo from "utils/foo"

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

有没有一种方法可以指示WebStorm使用此类别名？

[已弃用的答案。从WS2017.2开始，Webstorm会自动解析并应用Webpack配置（请参阅@anstarovoyt注释）]

就在这里。

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

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

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

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

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

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

这是在评论中回答的，但是为了避免人们只关注评论并仅链接信息，这里是：

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

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

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

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

后来，我们决定将代码的深度减少到3个级别，并将通用部分减少到一个级别。webstom的路径完成功能(ctrl + space)甚至可以帮助减少键入开销。生产版本不使用更长的名称，因此最终代码几乎没有任何区别。

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

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

我的解决方法涉及使用主要设置的“目录”部分。我只需要将别名引用的每个文件夹标记为源根，然后单击每个属性的下拉列表并将别名指定为“包前缀”。这使一切都对我有用。

不确定WebStorm中是否存在目录部分，但是如果存在，这似乎是使导入别名正常工作的可靠方法。

对于任何苦苦挣扎的人：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')
}

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

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

检查您的配置文件，可能这是您的问题。