package.json中Exports字段不生效，UI组件库无法省略build路径导入组件

问题原因 #

你遇到的问题主要是以下几个常见配置缺失或错误导致的：

1. exports字段写法错误：你当前的exports配置仅匹配目录路径本身，无法映射目录下的具体文件
2. 打包工具不支持exports字段：webpack 4及更早版本默认不识别package.json的exports字段，需要额外配置
3. 依赖缓存未更新：修改UI库配置后未同步到项目依赖，缓存导致配置未生效

解决方案 #

步骤1：修正exports写法 #

将my-ui-lib的package.json中exports字段改为带通配符*的匹配规则，才能映射目录下的所有文件：

"exports": {
  "./components/*": "./build/components/*",
  "./constants/*": "./build/constants/*",
  "./helpers/*": "./build/helpers/*",
  "./hooks/*": "./build/hooks/*",
  "./icons/*": "./build/icons/*"
},

步骤2：兼容低版本打包工具 #

如果你的my-app使用的是webpack 4（比如Create React App v4及以下版本、vue-cli v4等），需要在webpack配置中添加exports字段识别规则：

// webpack.config.js
module.exports = {
  resolve: {
    exportsFields: ['exports'],
  }
}

如果是未eject的CRA项目，可以用craco、customize-cra等工具修改webpack配置。如果使用webpack 5及以上版本，可跳过这一步，webpack 5默认支持exports字段。

步骤3：清除缓存重新安装依赖 #

修改UI库配置后需要同步到项目，避免缓存导致配置不生效：

1. 重新打包my-ui-lib，重新发布或者通过npm link/yarn link同步到本地my-app
2. 删除my-app下的node_modules文件夹和对应的lock文件（package-lock.json/yarn.lock/pnpm-lock.yaml）
3. 重新执行依赖安装命令：npm install/yarn install/pnpm install
4. 启动开发服务器时清除缓存，比如CRA项目执行npm start -- --reset-cache

备用方案（可选） #

如果不想调整打包工具配置，也可以在my-ui-lib打包完成后，将build目录下的components、constants等文件夹复制到包根目录，也可以实现短路径导入，不过这种方案不如exports字段规范。

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