如何配置React NPM包，无需带dist路径即可直接导入组件

你可以根据你的包要兼容的工具版本，选择以下两种方案之一：

方案1：新增package.json的exports字段配置（无需修改现有发布脚本，推荐） #

这是Node.js及近3年主流构建工具（Webpack 5+、Vite、Rollup等）原生支持的路径映射能力，直接在包根目录的package.json中新增对应配置即可：

{
  "name": "owaiz-test",
  "version": "你的版本号",
  // 保留你原有的其他配置
  "exports": {
    // 单组件映射写法，有多少组件加多少条
    "./Card": "./dist/Card.js",
    // 批量通配写法，一次性适配所有dist下的文件导入
    "./*": "./dist/*"
  },
  // 可选：兼容旧工具的入口配置
  "main": "./dist/index.js",
  "module": "./dist/index.esm.js",
  // 确保dist目录会被发到NPM
  "files": [
    "dist"
  ]
}

如果你的包提供TypeScript类型定义，可以额外新增typesVersions配置兼容类型导入：

{
  "typesVersions": {
    "*": {
      "*": ["./dist/*"]
    }
  }
}

方案2：修改发布脚本，把构建产物直接输出到包根（兼容旧构建工具） #

如果你的包需要兼容Webpack 4、CRA v4等不支持exports字段的旧工具，可以调整发布命令，直接把编译后的文件输出到包根目录而非dist目录。
把你原有的发布命令：
"publish:npm": "rm -rf dist && mkdir dist && babel ./src/components -d dist --copy-files"
修改为：
"publish:npm": "rm -rf *.js *.d.ts components && babel ./src/components -d ./ --copy-files"
注意：使用该方案需要在.gitignore中添加编译产物的忽略规则，避免把构建生成的文件提交到Git仓库，同时调整package.json的files字段，把编译后的组件文件加入发布列表。

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