typescript - rollup-plugin-dts 留下剩余的 d.ts 文件

Question

看起来很微不足道的问题。我有一个使用 rollup-plugin-typescript 和 rollup-plugin-dts 的汇总 typescript 配置。我想将我所有的 d.ts 文件捆绑到一个 d.ts 文件中，而不是让它镜像我的项目结构。我遵循了一些教程，最终得到了下面的配置。
问题: dts() 正确捆绑文件，但保留原始构建结构。我的资源都没有解决这个问题。不应该删除现在过时的输入文件吗？我处理插件不好吗？
我从哪里开始:

dist/
├── index.js 
├─ dts //I compile my types into here, below is my mirrored project structure
    ├── components
    │   ├── Button.d.ts
    │   ├── index.d.ts
    ├── index.d.ts

我想要的是:

dist/
├── index.js 
├── index.d.ts //everything bundled here

不幸的是我得到了什么:

dist/
├── index.js 
├─ dts //All of this is still here, it shouldn't be
    ├── components
    │   ├── Button.d.ts
    │   ├── index.d.ts
    ├── index.d.ts
├── index.d.ts //It bundled correctly to this additional file though

配置文件

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "declaration": true,
    "declarationDir": "dts",
    "downlevelIteration": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "lib": ["dom", "dom.iterable", "esnext"],
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitAny": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "target": "es5",
    "strictFunctionTypes": true
  },
  "include": ["src/"],
  "exclude": ["node_modules", "build", "dist", "src/stories/**", "**/*.stories.ts", "**/*.test.ts", "**/*.test.tsx"]
}

汇总配置文件

import babel from 'rollup-plugin-babel';
import resolve from '@rollup/plugin-node-resolve';
import external from 'rollup-plugin-peer-deps-external';
import { terser } from 'rollup-plugin-terser';
import commonjs from '@rollup/plugin-commonjs';
import dts from 'rollup-plugin-dts';
import typescript from '@rollup/plugin-typescript';

export default [
    {
        input: './src/index.ts',
        output: [
            {
                file: 'dist/index.js',
                format: 'cjs',
            },
            {
                file: 'dist/index.es.js',
                format: 'es',
                exports: 'named',
            },
        ],
        plugins: [
            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()],
    },
];

Answer 1

我最近也遇到了类似的问题，并且能够想出一个漂亮的解决方案，并在配置文件中添加了一些内容。我只是在你的文件中添加东西。对于解决方案，我使用了 rollup-plugin-delete包裹。基本上我们必须删除 dts构建完成后的文件夹。

import babel from 'rollup-plugin-babel';
import resolve from '@rollup/plugin-node-resolve';
import external from 'rollup-plugin-peer-deps-external';
import { terser } from 'rollup-plugin-terser';
import commonjs from '@rollup/plugin-commonjs';
import dts from 'rollup-plugin-dts';
import typescript from '@rollup/plugin-typescript';

// Added this
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: [
            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(),
            del({ hook: "buildEnd", targets: "./dist/dts" }), //<------ New Addition
        ],
    },
];

在 tsconfig.json文件，它提到声明类型文件应该输出到 dts文件夹。取决于从 index.ts 导出的类型文件，类型将在 dts/index.d.ts 中声明和导出通过 typescript 转译过程。该文件夹可能还有其他文件。使用 rollup-plugin-dts ，它结合了来自 dts/index.d.ts 的所有导出和需要的类型到单个文件定义文件 index.d.ts在 dist文件夹。此过程完成后，我们要删除 dts文件。为此，我们使用 rollup-plugin-delete插件，让我们可以访问 rollup build hooks .这里我们要删除 dts构建过程完成后的文件夹；为此，我们使用 buildEnd Hook ，以及目标文件夹名称。这将确保 dts一旦汇总完成捆绑，文件夹将被删除。