如何配置React私有组件库按文件夹结构实现指定导入路径规则？

你可以按照以下三步完成配置，即可实现预期的导入效果：

1. 补充目录聚合导出文件 #

在每个需要对外暴露的目录下新增index.js，统一导出该目录下的所有模块：

• components/index.js 内容：

// 导出表单类组件
export * from './form/BaseTextField'
export * from './form/BaseSelect'
// 导出弹窗类组件
export * from './dialogs/ResponseDialog'
export * from './dialogs/ConfirmationDialog'

• helpers/index.js 内容：

export * from './date'
export * from './string'

• 新增mui/core目录，在mui/core/index.js中导出封装后的MUI组件：

// 透传原MUI组件，或者导出你二次封装后的组件
export { Button } from '@mui/core'
// 示例：二次封装组件导出写法
// export { CustomChip } from './CustomChip'

注：需要把所有依赖的MUI相关包添加到私有仓库的dependencies字段中，业务项目安装你的私有包时会自动安装这些依赖，无需单独引入MUI

2. 配置package.json子路径导出规则 #

在私有仓库根目录的package.json中添加exports字段，声明子路径和入口文件的映射关系：

{
  "name": "@my-repo",
  "version": "1.0.0",
  "main": "index.js",
  "exports": {
    "./components": "./components/index.js",
    "./helpers": "./helpers/index.js",
    "./mui/core": "./mui/core/index.js"
  },
  "dependencies": {
    "@mui/core": "^对应的版本号",
    // 其他MUI相关依赖都声明在这里
  }
}

如果需要兼容webpack4等旧打包工具，可以额外添加files字段声明要发布的目录，避免发布时漏掉导出文件

3. （可选）适配Typescript类型提示 #

如果你的项目使用Typescript，只需要在每个导出目录下新增index.d.ts类型声明文件，同时在package.json的exports字段中补充类型映射即可：

{
  "exports": {
    "./components": {
      "import": "./components/index.js",
      "types": "./components/index.d.ts"
    },
    // 其他路径同理配置类型映射
  }
}

配置完成后发布私有包，业务项目安装后就可以按照你预期的语法导入模块。

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