如何直接导入组件而非根index文件？包导入异常及配置咨询

1. 模块找不到的报错原因 #

你配置的package.json里exports字段只有{".": "./lib/index.js"}，这相当于给你的包设置了唯一合法的导入入口——只有从包根路径（比如@privateComponents/react-components）导入才会被Node.js、Webpack这类模块解析工具认可。

至于能跳转定义却报错，是因为TypeScript的类型查找是基于文件系统和你的tsconfig.json配置（比如declarationDir生成的.d.ts文件），它不会严格遵循package.json的exports规则；但实际运行/打包时，模块解析工具完全按照exports来走，所以就出现了“能找着类型但找不到实际模块”的矛盾。

2. 实现组件单独导入+禁止从/Grids导入的配置方案 #

步骤1：修改package.json的核心配置 #

要给每个单独的组件配置子路径导出，同时刻意不配置/Grids这个路径的导出，这样就能直接禁止从/Grids文件夹导入。示例配置如下：

{
  "name": "@privateComponents/react-components",
  "exports": {
    ".": "./lib/index.js",
    "./Grids/UniversalGrid": "./lib/Grids/UniversalGrid/index.js",
    "./Grids/Grid1": "./lib/Grids/Grid1/index.js"
    // 其他组件按此格式逐一添加，不要加"./Grids": "./lib/Grids/index.js"这一行
  },
  // 同步配置类型导出，让TypeScript能识别子路径的类型定义
  "typesVersions": {
    "*": {
      "Grids/UniversalGrid": ["lib/Grids/UniversalGrid/index.d.ts"],
      "Grids/Grid1": ["lib/Grids/Grid1/index.d.ts"]
    }
  }
}

配置完成后，用户可以正常写import { UniversalGrid } from '@privateComponents/react-components/Grids/UniversalGrid'，但如果尝试import { UniversalGrid } from '@privateComponents/react-components/Grids'，会因为exports里未配置该路径而直接报错。

步骤2：确保编译产物结构匹配 #

你的TypeScript编译后，lib目录的结构要和源码严格对应：

• lib/index.js + index.d.ts（对应根目录的index.ts）
• lib/Grids/UniversalGrid/index.js + index.d.ts
• lib/Grids/Grid1/index.js + index.d.ts

可以在tsconfig.json里设置"declaration": true自动生成类型文件，"outDir": "./lib"指定编译输出目录，保证产物结构正确。

可选：用ESLint强化限制 #

如果担心有人通过相对路径绕开exports限制，可添加ESLint规则禁止导入@privateComponents/react-components/Grids这类路径：

{
  "rules": {
    "no-restricted-imports": [
      "error",
      {
        "patterns": ["@privateComponents/react-components/Grids"]
      }
    ]
  }
}

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