如何配置Rollup实现React组件库的直接导入？

要支持import Alert from 'package-name/components/Alert'或import { Alert } from 'package-name/components'这类导入方式，需要同时调整Rollup打包配置和package.json映射规则，以下是具体步骤：

一、调整Rollup配置：多入口+保留目录结构 #

当前Rollup仅打包了根入口src/index.ts，需要改成多入口打包，同时保留源码的目录结构，确保每个组件/模块都能单独导出。

修改你的Rollup配置文件：

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import terser from '@rollup/plugin-terser';

import copy from "rollup-plugin-copy-assets";
import dts from 'rollup-plugin-dts';
import postcss from 'rollup-plugin-postcss';

import svgr from '@svgr/rollup';

import packageJson from './package.json' assert { type: "json" };

/**
 * @type {import('rollup').RollupOptions}
 */
const config = [
  {
    // 多入口配置：覆盖根入口、components入口、单个组件入口、utils入口
    input: {
      'index': 'src/index.ts',
      'components/index': 'src/components/index.tsx',
      'components/Alert/index': 'src/components/Alert/index.tsx',
      'components/Button/index': 'src/components/Button/index.tsx',
      'utils/index': 'src/utils/index.ts' // 如果utils有入口文件的话
    },
    output: [
      {
        dir: 'dist/esm', // 用dir替代file，自动根据入口路径生成文件结构
        format: 'esm',
        preserveModules: true, // 保留原目录结构，不合并文件
        preserveModulesRoot: 'src' // 以src为根目录，输出时去掉src前缀
      },
    ],
    plugins: [
      copy({
        assets: [
          "src/assets",
        ],
        outputDir: 'dist/esm' // 确保assets复制到dist/esm下
      }),
      resolve(),
      commonjs(),
      typescript({
        tsconfig: './tsconfig.build.json',
        declaration: true,
        declarationDir: 'dist/esm', // 声明文件生成到对应目录，和JS文件同路径
        rootDir: 'src' // 配合preserveModulesRoot，确保类型文件路径正确
      }),
      postcss(),
      svgr({ exportType: 'named', jsxRuntime: 'automatic' }),
      terser(),
    ],
    external: ['react', 'react-dom', 'react-select', 'styled-components'],
  },
  {
    // 生成子路径的类型定义文件
    input: [
      'dist/esm/index.d.ts',
      'dist/esm/components/index.d.ts',
      'dist/esm/components/Alert/index.d.ts',
      'dist/esm/components/Button/index.d.ts',
      'dist/esm/utils/index.d.ts'
    ],
    output: [{ 
      dir: 'dist/esm', // 输出到对应目录，保持结构
      format: "esm",
      preserveModules: true
    }],
    external: [/\.(css|less|scss)$/],
    plugins: [dts()],
  },
];

export default config;

二、修改package.json：完善路径映射与类型支持 #

需要在exports字段添加子路径的映射规则，同时配置typesVersions确保TypeScript能识别子路径的类型定义。

更新后的package.json相关配置：

"files": [
  "dist"
],
"main": "dist/esm/index.js",
"module": "dist/esm/index.js",
"type": "module",
"exports": {
  ".": {
    "types": "./dist/esm/index.d.ts",
    "import": "./dist/esm/index.js"
  },
  "./components": {
    "types": "./dist/esm/components/index.d.ts",
    "import": "./dist/esm/components/index.js"
  },
  "./components/*": {
    "types": "./dist/esm/components/*/index.d.ts",
    "import": "./dist/esm/components/*/index.js"
  },
  "./assets": "./dist/esm/assets",
  "./utils": {
    "types": "./dist/esm/utils/index.d.ts",
    "import": "./dist/esm/utils/index.js"
  }
},
"typesVersions": {
  "*": {
    "components": ["dist/esm/components/index.d.ts"],
    "components/*": ["dist/esm/components/*/index.d.ts"],
    "utils": ["dist/esm/utils/index.d.ts"]
  }
}

三、确保源码导出规范 #

1. src/components/index.tsx：导出所有组件，支持import { Alert } from 'package-name/components'

export { default as Alert } from './Alert';
export { default as Button } from './Button';

2. 单个组件的index.tsx（比如src/components/Alert/index.tsx）：导出组件默认值，支持import Alert from 'package-name/components/Alert'

export { default } from './Alert';
// 如果有命名导出，也可以加上：
// export * from './Alert';

四、验证打包结果 #

执行Rollup打包后，dist/esm目录结构应与src对应：

dist/esm
├── assets
│   ├── fonts
│   └── icons
├── components
│   ├── Alert
│   │   ├── Alert.js
│   │   ├── index.js
│   │   ├── Alert.d.ts
│   │   └── index.d.ts
│   ├── Button
│   │   ├── Button.js
│   │   ├── index.js
│   │   ├── Button.d.ts
│   │   └── index.d.ts
│   └── index.js
│   └── index.d.ts
├── utils
│   ├── index.js
│   └── index.d.ts
├── index.js
└── index.d.ts

此时即可使用你想要的两种导入方式：

// 方式1：导入单个组件
import Alert from 'package-name/components/Alert';

// 方式2：从components入口导入多个组件
import { Alert, Button } from 'package-name/components';

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