WebStorm中导入的路径别名

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

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

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

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

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

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

[已弃用的答案。从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正确地解析和索引所有代码，链接到文件，自动完成等等。

您可以定义自定义路径，因此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。

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