多入口（exports）npm包导入路径自动补全失效问题排查

核心原因 #

TypeScript IDE（VS Code、WebStorm）需要明确的类型映射配置，才能识别package.json的exports字段定义的子路径，进而提供自动补全功能。仅配置exports里的types字段，不足以让IDE完整识别所有子路径的结构。

解决步骤 #

1. 在package.json中添加typesVersions配置 #

这个字段是TypeScript映射子路径类型的关键，直接告诉IDE每个子路径对应的类型文件位置。可以用通配符批量配置：

"typesVersions": {
  "*": {
    "components/*": ["./dist/components/*/index.d.ts"]
  }
}

如果部分组件路径特殊，也可以逐个精确配置：

"typesVersions": {
  "*": {
    "components/button": ["./dist/components/button/index.d.ts"],
    "components/checkbox": ["./dist/components/checkbox/index.d.ts"]
    // 其他组件依次添加
  }
}

2. 确保类型文件正确生成 #

• 检查tsup.config.ts，确认开启了类型生成：比如配置dts: true，或者指定entry包含所有组件的index.ts，保证dist目录下每个组件都生成对应的index.d.ts文件。
• 验证dist目录结构：确认dist/components/button/index.d.ts、dist/components/checkbox/index.d.ts等文件存在，且内容正确导出了组件的类型定义。

3. 检查tsconfig.json的类型生成配置 #

确保compilerOptions里的以下配置正确：

{
  "compilerOptions": {
    "declaration": true,
    "declarationDir": "./dist",
    "emitDeclarationOnly": false // 根据构建流程调整
  }
}

4. 清理IDE缓存 #

• VS Code：按下Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac），执行TypeScript: Restart TS Server。
• WebStorm：通过File -> Invalidate Caches...选择"Invalidate and Restart"，清除缓存后重启IDE。

5. 验证package.json的exports配置 #

确保每个子路径的types字段指向的路径和实际生成的.d.ts文件路径完全一致，比如：

"./components/button": {
  "import": "./dist/components/button/index.js",
  "require": "./dist/components/button/index.cjs",
  "types": "./dist/components/button/index.d.ts"
}

内容的提问来源于stack exchange，提问作者Saif