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

Question

看起来非常微不足道的问题。我有一个使用 rollup-plugin-typescript 和 rollup-plugin-dts 的汇总打字稿配置。我想将所有 d.ts 文件捆绑到一个 d.ts 文件中，而不是让它镜像我的项目结构。我遵循了一些教程并最终得到了下面的配置。

\n

问题： dts() 正确捆绑文件，但保留原始构建结构不变。我的资源都没有解决这个问题。现在已经过时的输入文件不应该被删除吗？我是否对插件处理不当？

\n

我从哪里开始：

\n

dist/\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.js \n\xe2\x94\x9c\xe2\x94\x80 dts //I compile my types into here, below is my mirrored project structure\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 components\n    \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 Button.d.ts\n    \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.d.ts\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.d.ts\n

\n

我想要的是：

\n

dist/\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.js \n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.d.ts //everything bundled here\n

\n

不幸的是我得到的是：

\n

dist/\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.js \n\xe2\x94\x9c\xe2\x94\x80 dts //All of this is still here, it shouldn't be\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 components\n    \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 Button.d.ts\n    \xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.d.ts\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.d.ts\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.d.ts //It bundled correctly to this additional file though\n

\n

tsconfig.json

\n

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

\n

rollup.config.js

\n

import babel from 'rollup-plugin-babel';\nimport resolve from '@rollup/plugin-node-resolve';\nimport external from 'rollup-plugin-peer-deps-external';\nimport { terser } from 'rollup-plugin-terser';\nimport commonjs from '@rollup/plugin-commonjs';\nimport dts from 'rollup-plugin-dts';\nimport typescript from '@rollup/plugin-typescript';\n\nexport default [\n    {\n        input: './src/index.ts',\n        output: [\n            {\n                file: 'dist/index.js',\n                format: 'cjs',\n            },\n            {\n                file: 'dist/index.es.js',\n                format: 'es',\n                exports: 'named',\n            },\n        ],\n        plugins: [\n            typescript({\n                tsconfig: './tsconfig.json',\n            }),\n            babel({\n                exclude: 'node_modules/**',\n                presets: ['@babel/preset-react'],\n            }),\n            resolve(),\n            commonjs(),\n            external(),\n            terser(),\n        ],\n    },\n    {\n        input: './dist/dts/index.d.ts',\n        output: [{ file: 'dist/index.d.ts', format: 'es' }],\n        plugins: [dts()],\n    },\n];\n

\n

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单个文件定义文件中。此过程完成后，我们要删除该文件。为此，我们使用插件，它使我们能够访问rollup build hooks。在这里，我们要在构建过程完成后删除文件夹；为此，我们使用buildEnd挂钩以及目标文件夹名称。这将确保在汇总完成捆绑后删除该文件夹。index.d.tsdistdtsrollup-plugin-deletedtsdts