基于Rollup实现组件库按组件拆分打包的配置方案问询

完全可以通过修改Rollup配置实现这种子路径导入的方式，这也是类似Material-UI这类组件库的标准最佳实践——既能兼容原有整体导入方式，又能支持单组件按需导入以优化打包体积。

核心实现思路 #

• 多入口配置：将每个组件作为独立编译入口，让Rollup分别处理各组件代码
• 结构化输出：每个组件编译后输出到对应名称的子目录，保持与源码一致的层级结构
• package.json路径映射：通过exports字段声明子路径导入规则，让Node.js和打包工具（Webpack/Rollup等）识别package-name/Button这类导入路径

具体Rollup配置步骤 #

1. 整理源码结构 #

假设你的源码目录结构如下：

src/
├── components/
│   ├── Button/
│   │   ├── index.js
│   │   └── Button.js
│   ├── Input/
│   │   ├── index.js
│   │   └── Input.js
│   └── ...
└── index.js // 根入口，统一导出所有组件

2. 编写Rollup配置文件 #

自动扫描所有组件作为入口，避免手动维护入口列表：

const fs = require('fs');
const path = require('path');
const resolve = require('@rollup/plugin-node-resolve');
const babel = require('@rollup/plugin-babel');
const terser = require('rollup-plugin-terser');

// 自动获取所有组件入口
const getComponentEntries = () => {
  const componentsDir = path.resolve(__dirname, 'src/components');
  return fs.readdirSync(componentsDir).reduce((entries, component) => {
    const componentPath = path.join(componentsDir, component);
    if (fs.statSync(componentPath).isDirectory()) {
      entries[component] = path.join(componentPath, 'index.js');
    }
    return entries;
  }, {});
};

// 根入口（兼容原有整体导入方式）
const rootEntry = {
  index: path.resolve(__dirname, 'src/index.js')
};

module.exports = {
  input: { ...getComponentEntries(), ...rootEntry },
  output: [
    // ES模块输出
    {
      dir: 'dist',
      format: 'esm',
      preserveModules: true, // 保留模块结构，不合并代码
      preserveModulesRoot: 'src', // 以src为根目录生成输出结构
      sourcemap: true
    },
    // CommonJS模块输出
    {
      dir: 'dist/cjs',
      format: 'cjs',
      preserveModules: true,
      preserveModulesRoot: 'src',
      sourcemap: true
    }
  ],
  plugins: [
    resolve(),
    babel({
      babelHelpers: 'bundled',
      exclude: 'node_modules/**'
    }),
    terser() // 可选，生产环境压缩代码
  ],
  external: ['react', 'react-dom'] // 排除外部依赖，避免打包进组件库
};

3. 配置package.json #

通过exports字段定义子路径导入规则，同时兼容不同模块系统：

{
  "name": "package-name",
  "main": "./dist/cjs/index.js",
  "module": "./dist/index.js",
  "types": "./dist/index.d.ts", // TypeScript项目需配置类型文件路径
  "exports": {
    ".": {
      "import": "./dist/index.js",
      "require": "./dist/cjs/index.js"
    },
    "./Button": {
      "import": "./dist/components/Button/index.js",
      "require": "./dist/cjs/components/Button/index.js",
      "types": "./dist/components/Button/index.d.ts"
    },
    "./Input": {
      "import": "./dist/components/Input/index.js",
      "require": "./dist/cjs/components/Input/index.js",
      "types": "./dist/components/Input/index.d.ts"
    },
    // Node.js 16+支持通配符，无需逐个配置组件
    "./components/*": {
      "import": "./dist/components/*/index.js",
      "require": "./dist/cjs/components/*/index.js",
      "types": "./dist/components/*/index.d.ts"
    }
  }
}

最佳实践要点 #

• 保持组件独立性：每个组件尽量减少对其他组件的强依赖，公共工具类单独抽离为src/utils/，让组件按需导入
• 兼容原有导入方式：保留根入口index.js，用户仍可通过import { Button } from 'package-name'导入组件
• 完善类型支持：TypeScript项目需开启tsconfig.json的declaration: true，让Rollup同步生成类型定义文件，配合package.json的types字段提供完整类型提示
• 测试验证：在测试项目中分别尝试整体导入和子路径导入，确认代码正常运行，且子路径导入仅打包对应组件的代码

内容的提问来源于stack exchange，提问作者Ramzi B.