为什么使用 Webpack 别名的 VSCode "Go to definition"在我的项目上失败？

Question

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

---

最新版本的 VS 代码...

1. 。具有转到定义功能，通过在符号上按F12触发...
2. 。并且还支持(通过jsconfig.json配置(webpack 别名，这是一种 webpack 功能，为导入行启用前缀以实现更友好的导入(有关 Webpack 别名，请参阅 VSCODE 文档(。例如，将/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→安装和构建都成功了，表明 Webpack 很高兴。运行日志[1, 2, 3]。
• 现在，运行code /path/to/project并打开src/index.js在第 5 行，尝试在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

在此之后，将插件添加到babel pluginspackage.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';

---

也请检查这个和这个。