使用 rollup 进行 Svelte 和 .d.ts 生成

Question

我正在尝试将一个用 svelte/ts 编写的库与 rollup 捆绑在一起。我的目的当然是生成一个

.js

（几个用于 es/umd/...）和一个

.d.ts

文件。

作为输入（源代码）我有：

• .ts 文件
• .svelte 文件（使用

  <script lang="ts">

  标签）
• .d.ts 文件

我尝试了几个 .d.ts 捆绑器，但都暂时失败了。我尝试在我的主汇总配置中使用它们作为插件，在单独的配置中使用它，甚至作为汇总旁边的第二个命令，附加了一些示例（并非详尽无遗）。

有人已经成功完成此捆绑了吗？

没什么

仅不使用插件但在

"declaration": true

中指定

tsconfig.json

不会引发任何错误，但会创建 .d.ts who

• 不包含我的来源 .d.ts 的声明
• 在输出文件夹中生成一些

  export { something } from "./my-source.svelte";

  ，其中仅包含生成的

  .js

  文件。

svelte-dts

引发异常，因为在分析

.d.ts

文件时，文件分析的

declaration

属性为 ....

undefined

rollup-插件-dts

会在

Export '...' is not defined (Note that you need plugins to import files that are not JavaScript)

 上提出 

export class ...

dts 捆绑生成器

尝试将

dts-bundle-generator

作为单独的命令运行：我找不到一种方法让它考虑我的源

.d.ts

文件，因此它抱怨未定义的类型

Answer 1

我设法使用以下方法让它工作：

• svelte2tsx 创建

  .d.ts

  文件树（类似于

  tsc

  ，但具有 svelte 支持）
• rollup-plugin-dts 将声明捆绑到单个

  .d.ts

  文件中进行发布
  • 对我们来说至关重要的是，这还允许我们使用别名插件来转换导入路径

样品

rollup.config.ts

:

import path from 'path';
import dts from 'rollup-plugin-dts';
import alias from '@rollup/plugin-alias';

export default {
    input: './types/src/index.d.ts',
    output: [{ file: 'dist/index.d.ts', format: 'es' }],
    plugins: [
        alias({
            entries: [
                { find: '$src', replacement: path.resolve('./src') },
            ],
        }),
        dts(),
    ],
};

请注意，我们仅在

.d.ts

生成中使用 rollup，实际的 JS 包是由 vite 或 esbuild 创建的，但如果您也使用 rollup 来创建 JS 包，则可以轻松调整上述内容。