如何让TSUP生成的.d.ts文件与组件保持相同目录结构？

你的问题核心在于当前配置中bundle: true会让tsup默认将所有类型合并为单个.d.ts文件，而非为每个组件生成对应单独的类型文件，因此无法和输出的组件JS文件处于同一目录。

只需修改dts配置项，从布尔值改为配置对象，禁用类型打包并开启类型解析，即可实现.d.ts与组件同目录：

import type { Options } from 'tsup';

const tsup: Options = {
    splitting: true,
    clean: true,
    // 修改dts为配置对象
    dts: {
        bundle: false, // 禁用类型文件打包，生成单个文件对应的.d.ts
        resolve: true, // 正确解析类型依赖
        outDir: 'dist' // 确保输出目录与JS文件一致
    },
    format: ['esm'],
    minify: true,
    bundle: true,
    skipNodeModulesBundle: true,
    target: 'es2020',
    outDir: 'dist',
    entry: ['src/**/*.tsx'],
    esbuildOptions(options) {
        // 保持原目录结构输出
        options.outbase = "./";
    },
};

export default tsup

关键修改说明 #

• dts.bundle: false：关闭类型文件的打包逻辑，让tsup为每个源.tsx文件生成对应的.d.ts文件，而非合并为单个文件
• dts.resolve: true：确保组件之间的类型依赖被正确解析，避免类型错误
• 配合原有的outDir和esbuildOptions.outbase配置，最终.d.ts文件会和对应的JS文件保持完全一致的目录结构输出到dist目录下

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