为什么 VSCode 的“转到定义”在我使用 Webpack 别名的项目上失败？

Question

这是vscode 问题 #16320的后续，vscode dev Matt Bierner 建议我在这里问。

---

VS Code 的最新版本...

1. ...具有转到定义功能，通过在符号上按F12触发...
2. ... 并且还支持（通过jsconfig.json配置）webpack 别名，这是一个 webpack 特性，为更友好的导入启用导入行的前缀（请参阅vscode 文档以获取 Webpack 别名）。 例如，别名/src/api到*会让我输入import foo from */users而不是import foo from ../../../../src/api/users 。

但在某些用例中，它们一起失败。 我为我的用例构建了一个最小的损坏测试项目（zip，3kB） 。 任何人都可以看看它，看看我是否做错了什么，或者它看起来像一个错误吗？

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

• 浏览 js 文件以检查我并没有要求您运行任何邪恶的东西。
• npm install && npm run build && node dist/index.js → Install & build 都成功了，说明Webpack很开心。 运行日志[1, 2, 3] 。
• 现在，运行code /path/to/project并打开src/index.js在第 5 行，尝试在getLinks上getLinks F12 → No definition found for 'getLinks' 😢

我的jsconfig.json仍然做错了什么，还是这是一个错误？ （可能是多个级别的出口？）

Answer 1

接受的答案是正确的，除了我的解决方案很简单：

import something from '~/something';

jsconfig.json看起来像这样：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"]
    }
  }
}

Answer 2

如下更改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

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

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

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

import {Links} from 'resources/index';

---

也请检查这个和这个。