vite-plugin-dts

vite-plugin-dts 是一个 Vite 插件，它帮助在 TypeScript 项目中自动生成类型声明文件（.d.ts）。它主要用于库开发，能让你在编写库时自动生成类型声明文件，避免手动管理这些文件。

安装 vite-plugin-dts

首先，你需要安装 vite-plugin-dts 插件。你可以通过以下命令进行安装：

npm install vite-plugin-dts --save-dev

或者，如果你使用的是 Yarn：

yarn add vite-plugin-dts --dev

在 Vite 配置文件中使用插件

接下来，在你的 vite.config.ts 或 vite.config.js 配置文件中引入并使用这个插件。

示例：vite.config.ts

import { defineConfig } from 'vite';
import dts from 'vite-plugin-dts';

export default defineConfig({
  plugins: [dts()],
});

插件选项配置

vite-plugin-dts 插件提供了一些配置选项来定制生成的类型声明文件。你可以在插件的配置中指定这些选项。

可用的配置选项

dts({
  insertTypesEntry: true,   // 是否在 package.json 中自动添加 "types" 字段
  tsConfigFilePath: './tsconfig.json',  // TypeScript 配置文件的路径
  outputDir: 'dist/types', // 类型声明文件的输出目录
  beforeWriteFile: (filePath, content) => { // 在写入文件之前的处理
    return content;
  },
  skipDiagnostics: false,  // 是否跳过 TypeScript 类型检查
  respectExternal: true,   // 是否遵循 `package.json` 的 `peerDependencies` 设置
  staticImport: false,     // 是否将动态 `import()` 转换为静态的 `import` 语法
});

• insertTypesEntry: 如果设置为 true，则会自动将 types 字段插入到 package.json 文件中，指向生成的 .d.ts 文件。
• tsConfigFilePath: 用于指定 TypeScript 配置文件的路径，默认是当前目录下的 tsconfig.json。
• outputDir: 用于设置生成类型声明文件的输出目录。
• beforeWriteFile: 一个钩子函数，在生成的类型文件写入磁盘之前可以修改其内容。
• skipDiagnostics: 是否跳过 TypeScript 类型检查。默认值为 false。
• respectExternal: 是否遵循 peerDependencies 的外部依赖设置。
• staticImport: 是否使用静态 import，如果设置为 true，插件会将所有的动态 import() 转换为静态 import。

完整示例

假设你有一个 Vite + TypeScript 项目，你希望在构建时自动生成类型声明文件。

1. 安装 vite-plugin-dts：

npm install vite-plugin-dts --save-dev

2. 配置 vite.config.ts：

import { defineConfig } from 'vite';
import dts from 'vite-plugin-dts';

export default defineConfig({
  plugins: [
    dts({
      insertTypesEntry: true,       // 插入 types 字段到 package.json
      outputDir: 'dist/types',      // 设置输出目录
      skipDiagnostics: false,       // 启用类型检查
    }),
  ],
});

3. 运行 Vite 构建：

npm run build

4. 在 dist/types 目录中，插件会自动生成 .d.ts 类型声明文件。

高级用法

使用 beforeWriteFile 修改生成的类型声明

如果你想要在类型声明文件生成之前对其进行修改（例如：替换某些内容或添加注释），可以使用 beforeWriteFile 选项：

dts({
  beforeWriteFile(filePath, content) {
    // 比如你可以在类型文件中添加版权信息
    const header = `// Generated by vite-plugin-dts\n\n`;
    return header + content;
  }
});

异常问题

如果类型文件中没有输出任何类型 可以有如下几种排除方法尝试

1. 检查 dts 中 tsConfigFilePath 是否配置正确
2. 检查 tsconfig.json 中 include 字段配置是否正确
3. 在 dts中 尝试使用 exclude 排除无关的目录
4. 查看类型是不是写在了d.ts文件中,修改为.ts文件

export default defineConfig({
  build: {
    lib: {
      entry: './lib/main.ts',
      name: 'webTalkView',
      formats: ['es'],
      fileName: 'index',
    },
  },
  plugins: [
    vue(),
    vueJsx(),
    dts({ tsconfigPath: './tsconfig.app.json', rollupTypes: true,exclude: ['src/**/*'] }),]
	}
                           )

总结

vite-plugin-dts 是一个非常实用的插件，帮助在 Vite + TypeScript 项目中自动生成类型声明文件，特别适用于库的开发。它极大地简化了类型声明文件的管理，避免了手动维护和更新声明文件的繁琐工作。