如何在React组件库中按原子/分子等分组导出模块？

要实现按原子、分子、生物（Organism）分组导出组件，同时保留组件原有名称并打包成可发布的npm库，我推荐以下步骤：

1. 整理项目结构 #

首先把你的React组件按分类移动到对应的目录下，完全保留组件原有文件名（比如ButtonAtom.jsx），参考目录结构如下：

ux/
├── atoms/
│   ├── ButtonAtom.jsx
│   ├── InputAtom.jsx
│   └── index.js
├── molecules/
│   ├── SearchBarMolecule.jsx
│   └── index.js
├── organisms/
│   ├── HeaderOrganism.jsx
│   └── index.js
└── package.json

2. 为每个分组创建导出入口 #

在每个分组目录下的index.js（或index.ts，如果用TypeScript）中，统一导出该目录下的所有组件，严格保留原组件名称：
比如ux/atoms/index.js的写法：

// 若组件是默认导出
export { default as ButtonAtom } from './ButtonAtom';
export { default as InputAtom } from './InputAtom';

// 若组件是命名导出，直接导出即可
// export { ButtonAtom } from './ButtonAtom';

通过这个入口文件，每个分组就能对外统一暴露本组的所有组件。

3. 配置package.json实现路径别名导入 #

这是实现import { ButtonAtom } from 'ux/atoms'的核心步骤，在项目根目录的package.json中添加exports字段，指定每个分组的导入路径映射：

{
  "name": "ux",
  "version": "1.0.0",
  "type": "module", // 若使用ES模块，根据项目实际情况调整
  "exports": {
    "./atoms": "./atoms/index.js",
    "./molecules": "./molecules/index.js",
    "./organisms": "./organisms/index.js",
    ".": "./index.js" // 可选配置：支持从根路径导入所有组件（如import * as UX from 'ux'）
  },
  // 指定npm发布时需要包含的文件，避免分组目录被遗漏
  "files": [
    "atoms/",
    "molecules/",
    "organisms/",
    "index.js"
  ],
  // 其他常规配置：main、module、scripts等按需添加
}

4. 打包优化（可选但推荐） #

如果你的组件库需要兼容不同环境（如CommonJS和ES模块），可以用Rollup或Vite进行打包，输出多格式产物。以Rollup为例：

• 配置rollup.config.js，将每个分组的代码打包到dist目录下
• 调整package.json的exports字段指向打包后的文件：

"exports": {
  "./atoms": {
    "import": "./dist/atoms.esm.js",
    "require": "./dist/atoms.cjs.js"
  },
  "./molecules": {
    "import": "./dist/molecules.esm.js",
    "require": "./dist/molecules.cjs.js"
  },
  // organisms分组同理配置
}

5. TypeScript支持（若使用） #

如果是TypeScript组件库，确保每个分组的index.ts导出组件类型，并在package.json中配置类型入口：

"exports": {
  "./atoms": {
    "import": "./dist/atoms.esm.js",
    "require": "./dist/atoms.cjs.js",
    "types": "./dist/atoms.d.ts"
  }
}

最后发布npm库 #

完成上述配置后，登录你的npm账号，运行npm publish即可发布组件库。用户安装后，就能直接通过分组路径导入组件：

import { ButtonAtom } from 'ux/atoms';
import { SearchBarMolecule } from 'ux/molecules';

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