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 语句更改为相对的，它会完全起作用：

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

Because now I can't mark any of the directories underneath src as a test, resource, etc.

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

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

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

Answer 2

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

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

的依赖模块

另请注意，文件扩展名是可选的，通常不使用。

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