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

Question

这似乎是一个非常微不足道的问题。我有一个使用 rollup-plugin-typescript 和 rollup-plugin-dts 的汇总打字稿配置。我想将我所有的 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

tsconfig.json

{
  "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"]
}

rollup.config.js

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 中声明和导出。该文件夹可能还有其他文件。使用rollup-plugin-dts，它将所有从dts/index.d.ts 导出和需要的类型组合到dist 文件夹中的单个文件定义文件index.d.ts。此过程完成后，我们要删除 dts 文件。为此，我们使用rollup-plugin-delete 插件，它使我们能够访问rollup build hooks。在这里，我们要在构建过程完成后删除dts 文件夹；为此，我们使用buildEnd 挂钩以及目标文件夹名称。这将确保在汇总完成捆绑后删除 dts 文件夹。