javascript - 为什么使用Webpack别名的项目中VSCode的 “Go to definition”失败？

这是vscode issue #16320的后续 Activity ，vscode开发人员Matt Bierner建议我在这里询问。

VS Code的最新版本...

...具有Go to definition功能，可通过在符号上按F12来触发...

...并且还支持(通过jsconfig.json配置)webpack别名，这是一个webpack功能，它为更友好的导入启用了导入行的前缀(请参阅vscode documentation for Webpack aliases)。例如，将/src/api别名为*将使我键入import foo from */users而不是import foo from ../../../../src/api/users。

但是在某些用例中，它们会一起失败。我为用例构建了一个minimal broken test project (zip, 3kB)。任何人都可以看一下它，看看我做错了什么还是看起来像个错误？

解压缩zip并查看README.md:路径自动完成有效，但不能“窥视”或“转到定义”。

浏览js文件以检查我是否不要求您运行任何有害的操作。

npm install && npm run build && node dist/index.js→安装和构建均成功，表明Webpack满意。运行日志[1, 2, 3]。

现在，运行code /path/to/project并打开src/index.js在第5行，尝试按getLinks上的F12
→No definition found for 'getLinks'😢

我仍然在jsconfig.json中做错了什么，还是这是一个错误？ (也许是多种导出水平？)

最佳答案

如下更改src/index.js:

import { Links } from 'api/resources';

更改jsconfig.json文件路径，如下所示:

"paths": {
    "api/*": ["./src/api/*"]
}

在src/api/resourcers/index.js中更改您的导入导出，如下所示:

import * as Links from './links';

export {Links};

还安装此软件包并使用--save-dev选项

npm install --save-dev babel-plugin-module-resolver

在此之后，将该插件添加到babel plugins中的package.json中，我不知道您是否需要根前缀插件，但我将其删除了。

"plugins": [
  "transform-runtime",
  "transform-export-extensions",
  "transform-object-rest-spread",
  [
    "module-resolver", {
    "root": ["./src"],
    "alias": {
      "api": "./src/api"
    }
  }
]

您还可以将api更改为资源，但是在这种情况下，您需要像下面这样导入:

import {Links} from 'resources/index';

还请检查this和this.