WebStorm中导入的路径别名

JavaScript Webpack

泡芙神无伽罗

2020-03-23

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

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

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

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

第2852篇《WebStorm中导入的路径别名》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共6个回答

Gil伽罗 2020.03.23

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

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

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

村村AL 2020.03.23

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

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

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

猴子 2020.03.23

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

Stafan路易 2020.03.23

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

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

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

凯西里 2020.03.23

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

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

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

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