rollup-plugin-dts打包后残留零散d.ts中间文件如何解决？

问题原因 #

你当前的配置分两个构建任务执行：

1. 第一个任务调用@rollup/plugin-typescript，会自动生成零散的d.ts文件输出到dist/dts目录作为中间产物
2. 第二个任务读取dist/dts下的文件合并成单文件dist/index.d.ts
   rollup本身不会自动删除前序任务生成的中间产物，所以dts目录会残留。

解决方案 #

这里提供两种实现方式，可根据需求选择：

方案1：修改npm构建脚本（无需修改rollup配置，更简单）

1. 先安装跨平台删除工具rimraf：

npm i rimraf -D

2. 修改package.json中的构建命令：

{
  "scripts": {
    "build": "rimraf dist && rollup -c && rimraf dist/dts"
  }
}

逻辑是每次构建前先清空整个dist目录，打包完成后再删除中间产物dist/dts目录。

方案2：rollup配置内集成删除逻辑（更一体化）

1. 安装rollup删除插件：

npm i rollup-plugin-delete -D

2. 修改rollup.config.js配置：

// 顶部引入删除插件
import del from 'rollup-plugin-delete';

export default [
    {
        input: './src/index.ts',
        output: [
            {
                file: 'dist/index.js',
                format: 'cjs',
            },
            {
                file: 'dist/index.es.js',
                format: 'es',
                exports: 'named',
            },
        ],
        plugins: [
            // 可选：构建前清空dist目录，避免旧文件残留
            del({ targets: 'dist/*' }),
            typescript({
                tsconfig: './tsconfig.json',
            }),
            babel({
                exclude: 'node_modules/**',
                presets: ['@babel/preset-react'],
            }),
            resolve(),
            commonjs(),
            external(),
            terser(),
        ],
    },
    {
        input: './dist/dts/index.d.ts',
        output: [{ file: 'dist/index.d.ts', format: 'es' }],
        plugins: [
            dts(),
            // dts打包完成后删除中间目录
            del({
                targets: './dist/dts',
                hook: 'buildEnd' // 必须指定该钩子，确保打包完成后再删除
            })
        ],
    },
];

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