发布React组件到npm后如何简化引用路径？

当前你遇到的问题是直接从包名导入组件失败，必须写完整路径，核心原因是包的入口文件没有导出目标组件，下面是具体解决步骤：

1. 确保入口文件导出组件 #

在项目src目录下创建（或修改）index.ts（或.js）文件，将需要对外暴露的组件统一导出：

// src/index.ts
export { default as Obj } from './components/Obj';
// 如有其他组件，可一并导出
// export { default as OtherComponent } from './components/OtherComponent';

2. 检查TypeScript配置（tsconfig.json） #

确保编译配置正确，能生成对应入口文件：

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "outDir": "dist/esm", // 对应package.json的module字段
    "declaration": true, // 生成类型声明，方便使用者获取类型提示
    "jsx": "react-jsx",
    "strict": true,
    "moduleResolution": "NodeNext"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

注意：执行build:cjs脚本时，TypeScript会自动根据src/index.ts生成dist/cjs/index.js，需确保该文件包含Obj的导出语句。

3. 重新构建并发布包 #

执行构建命令：

npm run build

构建完成后，检查dist/esm/index.js和dist/cjs/index.js，确认存在Obj的导出代码。之后重新发布：

npm publish

可选：添加exports字段优化导入（推荐） #

若要支持更灵活的导入方式（如import { Obj } from 'anew-lib'或import Obj from 'anew-lib/Obj'），可在package.json中添加exports字段：

{
  "exports": {
    ".": {
      "import": "./dist/esm/index.js",
      "require": "./dist/cjs/index.js"
    },
    "./Obj": {
      "import": "./dist/esm/components/Obj.js",
      "require": "./dist/cjs/components/Obj.js"
    }
  }
}

完成以上操作后，用户即可通过import Obj from "anew-lib"或import { Obj } from "anew-lib"（取决于你的导出方式）直接导入组件。

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