IntelliJ/Webstorm 找不到导入参考

Question

我的项目结构如下：

• 根
  • 源
    • 脚本
      • main.js
      • foo.js

在我的main.js 文件中，我正在导入foo.js，如下所示：

import 'src/scripts/foo.js'

当我单击上面的导入语句并转到 Navigate -> Declaration 时，我收到一条非常有用的消息，上面写着 Cannot find declaration to go。

这使得使用它非常令人沮丧，因为编辑器基本上不知道哪些文件导入了其他文件。这意味着在移动文件、查找用法等时，我无法使用 IDE 的有用功能，例如 搜索参考。

如果我将导入语句更改为相对，它完全可以工作：

import './foo.js'

但是，我们正在努力实现绝对导入，a habit we picked up from writing python apps。

我遇到了Webstorm: "Cannot Resolve Directory"，这让我想到了将mark 我的src 目录作为Sources Root。之后，我可以将 main.js 中的导入语句更改为

import '/scripts/foo.js' //notice the leading forward slash

嗯，这有点好，因为现在我至少可以Navigate -> Declaration，但这并不理想，因为现在我无法将src 下的任何目录标记为测试、资源等。

那么为什么 IntelliJ/webstorm 让这件事变得如此困难？

Answer 1

因为现在我无法将 src 下的任何目录标记为测试、资源等。

是的，你可以。无法在项目视图中标记已标记文件夹的子文件夹。但是您可以在项目结构中执行此操作（Ctrl + Shift + Alt + S）。转到Modules，选择您的模块并切换到Sources 选项卡。现在您可以将src 文件夹标记为Sources（您已经这样做了）并将src/test 标记为Tests 等。

根据Web Help，在WebStorm 中，此设置隐藏在Settings > Directories 而不是项目结构中。

这是另一个仅使用项目视图的解决方案：取消标记您的源文件夹，标记您的测试/资源子文件夹，然后再次标记（父）源文件夹。我不确定，为什么反过来就不行。

Answer 2

我强烈建议不要在 JavaScript 代码中使用这种导入方式。虽然可能可行，但相对路径是所有 NodeJS 代码中的事实标准，并且基本上已经扩展到所有使用模块系统的 JS 代码。

在当前系统中，任何以. 开头的路径都是相对路径，任何以/ 开头的路径都是绝对路径，任何其他路径都被解析为模块。按照这种逻辑，import 'src/scripts/foo.js' 将被解析为 ./scripts/foo.js，相对于名为 src 的依赖模块。

另请注意，文件扩展名是可选的，通常被省略。

如果你想使用这种风格并且你的模块加载器支持它，你当然可以这样做，但我想强调的是，使用非标准方法可能会给自己带来痛苦。