VS代码：从根路径“找不到模块”

Question

我似乎无法用Visual Studio代码解决模块导入问题：

我设置了一个sample repo to illustrate这个问题，目录结构如下：

➜ tree -I node_modules
.
├── README.md
├── packages
│   ├── jsx
│   │   └── jsx.jsx
│   ├── tjs
│   │   └── tjs.js
│   ├── tscript
│   │   └── tscript.js
│   └── tsx
│       └── tsx.tsx
├── src
│   ├── entry.ts
│   └── localjs.js
└── tsconfig.json

我想让这个设置与babel-typescript一起工作，但我的调查表明问题似乎是VSCode固有的，所以我把它从样本中删除了。

我已经尝试过paths的tsconfig.json的所有排列，我已经看到了

    "paths": {
      "*": [
        "*",
        "packages/*",
        "packages/*/index.tsx",
        "packages/*/index.jsx",
        "packages/*/index.js"
      ],
      "$1": [
        "packages/$1/$1"
      ],
      "~/*": [
        "packages/*"
      ],
      "~/$1": [
        "packages/$1/$1"
      ],
      "*/$1": [
        "*/$1/$1",
        "packages/$1/$1",
        "*/packages/$1/$1"
      ]
    }

handbook没有提供太多的见解。

Answer 1

您已经有一个answer from Wex建议您重命名您的文件以使用基本名称index加上相应的扩展名并使用映射"*"*: ["*", "packages/*"]。您在评论中提到您宁愿避免重命名文件。除了避免重命名之外，我不喜欢将很多文件命名为index.<some_extension>。工作时，我的眼睛自然会被我正在处理的文件的基本名称或获得报告。必须通过目录来区分具有几乎相同的基本名称的文件，但是我需要更多的认知工作来远离基本名称和路径，或者在键盘上完成更多的工作。 （输入需要更长的时间。IDE只能提供很多帮助。）这很烦人。

首先，让我们来处理死胡同。我没有看到~和$1在paths特别对待的证据。我去检查tsc的代码，看不到任何处理这种模式的东西。可能是我错过了，但我认为它们并不特别。此外，暂时忽略扩展，您想要的映射是packages/<package_name>/<package_name>.ext包名称出现两次。所以设置像"*": ["packages/*/*.ext"]这样的映射很有吸引力，但是这样做是明确不允许的：Qazxswpoi会给你一个关于出现在所需映射中的两个星号的错误。所以这也不是一个选择。

Use tsc

您可以通过向package.json字段添加package.json来添加重命名问题，该字段指向您希望被视为程序包入口点的文件。例如，"main"可能包含：

packages/jsx/package.json

通过为所有其他包提供类似的文件，您可以将相关配置减少为：

{
  "main": "jsx.jsx"
}

或者您可以使用

"baseUrl": "",
"paths": {
  "*": ["packages/*", "*"]
},

指向您的包并完全省略"baseUrl"：

"paths"

确保你丢失了"baseUrl": "packages/", 文件，因为如果这些文件中存在任何语法错误，package.json将默默地忽略它们。

Add tsc Files that Reexport your Entry Module

另一种方法是使用索引文件，只需重新导出您希望成为包的入口点的所有文件。您当前拥有的文件将保留在那里，但将由适当设计的index文件引用。例如，index可能是：

packages/tsx/index.ts

如果您的所有软件包只提供默认导出，则它们都可以遵循上述模式。否则，如果包导出多个符号并且只想重新导出所有内容，则可以执行以下操作：

export { default } from "./tsx";

如果你对所有包执行此操作，则不需要重命名任何内容，但是您需要额外的export * from "./myModule"; 文件来满足index映射。

在评论中，您提到使用像Barrelsby这样的工具来生成"*": ["*", "packages/*"]文件。我会担心对发展的影响。作为发布项目的一部分，我可以看到生成一个充当外观的索引文件。因此，使用已发布项目的人处理由Barrelsby或其他工具生成的文件。但是，您的index文件在我看来是您项目的内部文件。因此，为了在开发索引文件时获得适当的IDE支持，在贡献者开始贡献之前必须已经存在。因此，贡献者必须在开始贡献之前运行生成索引文件的内容。您还可以生成与开发人员直接创建的文件并排生存的文件。我试图在我的项目中避免这种情况。

如果它是我的项目，我决定添加index文件以满足index映射，我的目标是构建我的项目，以便tsconfig.json文件归结为上述两种情况之一，并跳过使用代码生成器。 （实际上，我的目标是上述两种情况中的第二种，因为我更愿意避免违约出口。有关默认出口问题的讨论，请参阅index。）

Individually Map The Packages

如果其他解决方案对您的特定项目有问题，您可以为每个包提供一个映射：

here

这意味着每次添加新包时都会添加映射。这是否可行取决于您的具体项目。你也可以使用

"paths": {
  "jsx": ["packages/jsx/jsx.jsx"],
  "tjs": ["packages/tjs/tjs.js"],
  "tscript": ["packages/tscript/tscript.js"],
  "tsx": ["packages/tsx/tsx.tsx"],
},

设置为baseUrl并从上面的所有路径中删除"packages/"：

packages/

尽管你仍然需要为每个包提供一个映射，但这使整个事情变得不那么冗长。

Answer 2

"baseUrl": "packages/",
"paths": {
  "jsx": ["jsx/jsx.jsx"],
  "tjs": ["tjs/tjs.js"],
  "tscript": ["tscript/tscript.js"],
  "tsx": ["tsx/tsx.tsx"],
},

的部分问题在于您使用的是current tsconfig.json，因此您的配置实际上不会匹配任何代码！

我找不到任何使用include: []模式的例子，就像你在样本配置中使用它一样，我也不认为你想要做的是基于一些研究（参见：$1）。你能将#5039重命名为{package}/{package}.jsx吗？然后你的路径配置可以简单地改为：

{package}/index.jsx