如何在tsup/TypeScript中将components下文件输出到dist根目录？

我正在使用TypeScript搭配tsup构建工具进行代码打包，需要将src/components目录下的所有文件夹及文件直接输出到dist根目录。当前生成的dist目录结构会保留components层级，为了更便于导入（支持tree-shaking），希望将card、carousel等组件目录直接放在dist根目录下。

项目目录结构 #

src/
   components/
        card/
            card.tsx
            index.ts
        carousel/
            carousel.tsx
            index.ts
        ...other components...
   index.ts

当前输出目录结构 #

dist/
    components
        card
            card.d.ts
            card.js
            index.d.ts
            index.js
        carousel
            carousel.d.ts
            carousel.js
            index.d.ts
            index.js
        ...

期望输出目录结构 #

dist/
    card
       card.d.ts
       card.js
       index.d.ts
       index.js
    carousel
       carousel.d.ts
       carousel.js
       index.d.ts
       index.js
    ...

当前tsup配置 #

export default defineConfig((options: Options) => ({
   treeshake: true,
   splitting: true,
   entry: ['src/**/*.{ts,tsx}'],
   format: ['cjs', 'esm'],
   dts: true,
   ...options,
}));

解决方案1：通过配置entry和outBase调整输出路径 #

修改tsup配置，明确指定组件目录的入口，并设置outBase去掉src/components的层级：

import path from 'path';
import { defineConfig } from 'tsup';

export default defineConfig((options) => ({
  treeshake: true,
  splitting: true,
  // 分别处理组件目录和根index.ts
  entry: [
    'src/components/**/*.{ts,tsx}',
    'src/index.ts'
  ],
  // 设置基础输入目录为src/components，输出时自动去掉该路径前缀
  outBase: 'src/components',
  format: ['cjs', 'esm'],
  dts: true,
  // 单独指定根index.ts的输出路径，避免被outBase影响
  entryNames: {
    'src/index.ts': '[name]'
  },
  ...options,
}));

解决方案2：用onSuccess钩子在打包后移动文件 #

如果方案1无法适配你的场景，可以通过onSuccess钩子在打包完成后，手动调整目录结构：

import fs from 'fs/promises';
import path from 'path';
import { defineConfig } from 'tsup';

export default defineConfig((options) => ({
  treeshake: true,
  splitting: true,
  entry: ['src/**/*.{ts,tsx}'],
  format: ['cjs', 'esm'],
  dts: true,
  onSuccess: async () => {
    const componentsDistDir = path.resolve(__dirname, 'dist/components');
    const distRootDir = path.resolve(__dirname, 'dist');

    try {
      // 检查components打包目录是否存在
      await fs.access(componentsDistDir);
      // 获取components下的所有子组件目录
      const items = await fs.readdir(componentsDistDir, { withFileTypes: true });

      for (const item of items) {
        if (item.isDirectory()) {
          const srcPath = path.join(componentsDistDir, item.name);
          const destPath = path.join(distRootDir, item.name);
          // 移动组件目录到dist根目录
          await fs.rename(srcPath, destPath);
        }
      }
      // 删除原components空目录
      await fs.rm(componentsDistDir, { recursive: true });
    } catch (err) {
      // 若components目录不存在，直接跳过
      console.log('components打包目录不存在，无需调整结构');
    }
  },
  ...options,
}));

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