如何使用Rollup.js构建支持类似MaterialUI子目录导出的npm组件库

解决方案 #

你需要调整rollup与tsconfig配置，保留源码目录结构，同时配置根导出，具体修改步骤如下：

1. 安装依赖glob用于自动匹配所有入口文件：

npm install glob -D

2. 修改rollup配置：

import glob from 'glob'
// 其余引入保持不变
export default {
  // 替换原有的固定input，自动匹配所有组件入口与根index
  input: glob.sync('src/**/index.{ts,tsx}', {
    ignore: ['src/**/*.stories.tsx', 'src/**/*.test.tsx']
  }),
  output: [
    {
      dir: 'dist/esm',
      format: 'esm',
      sourcemap: true,
      exports: 'named',
      strict: false,
      plugins: [terser()],
      // 新增以下两个配置，保留源码目录结构
      preserveModules: true,
      preserveModulesRoot: 'src'
    }
  ],
  // 其余plugins、external配置保持不变
}

3. 修改tsconfig.json配置，将类型文件与js文件输出路径对齐：

{
  "compilerOptions": {
    // 把原来的declarationDir、outDir修改为以下值
    "declarationDir": "dist/esm",
    "outDir": "dist/esm",
    // 其余配置保持不变
  }
}

4. 确认根入口导出规则
   确保src/index.ts中已经导出所有组件，示例如下：

export { default as TestComponent } from './TestComponent'
// 其余组件按同样规则导出

5. 可选优化：在package.json中新增入口配置，提升导入体验与类型兼容性：

{
  "module": "dist/esm/index.js",
  "types": "dist/esm/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/esm/index.js",
      "types": "./dist/esm/index.d.ts"
    },
    "./esm/*": {
      "import": "./dist/esm/*/index.js",
      "types": "./dist/esm/*/index.d.ts"
    }
  }
}

修改完成后重新构建，即可得到目标目录结构，同时支持两种导入方式。

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