当前位置：首页 > news >正文

vite | vite-plugin-dts 插件生成类型文件的安装和使用

news 2025/6/30 9:53:09

vite-plugin-dts 是一个用于 生成 TypeScript 类型声明文件的插件，适用于 Vite 项目。

库模式（lib{ }），默认不会生成任何类型文件——》解决：使用单独的 插件 vite-plugin-dts 来完成生成类型文件。

vite-plugin-dts 的安装和使用

① 安装：npm install vite-plugin-dts -D

② 配置：在 vite.config.ts中 引入 import dts from 'vite-plugin-dts'，plugins的数组中添加 dts()

若之前配置过

1. 删除文件 Remove-Item -Recurse -Force node_modules dist package-lock.json

2. 再重新 安装包 npm install

3. 打包 npm run build-only

这里的 build-only ，在包文件中配置了 "build-only": "vite build --config vite.config.ts",

当前打包出来的文件，有部分是不需要打包的。如 VNode.d.ts、main.d.ts 是在调试时使用的，不需要将其添加到生产环境中

dts 的配置选项

import { defineConfig } from 'vite'
import dts from 'vite-plugin-dts'export default defineConfig({plugins: [dts({// 插件配置选项tsconfigPath: './tsconfig.build.json',     // 配置文件路径rollupTypes: true,  // 支持 Rollup 的类型声明，可将所有的文件合并到一个文件中insertTypesEntry: true,  // 在 package.json 中插入 types 字段outDir: 'dist/types',    // 生成单独的文件夹})],
})

配置选项

insertTypesEntry：是否在 package.json 中插入 types 字段，指向生成的类型声明文件。

tsconfigPath：指定要使用的 tsconfig.json 文件路径。（tsconfigPath:'./tsconfig.xxx.json' ，添加 ts 配置文件 来限制打包的文件内容）

rollupTypes：如果使用 Rollup 构建，它会尝试自动生成类型声明文件。（rollupTypes: true; 将所有的文件合并到一个文件中）

exclude：可以通过该字段排除某些目录或文件不生成类型声明。

默认情况下，所有生成的定义文件和源文件生成的文件结构相同。

生成类型声明

在开发过程中，vite-plugin-dts 会自动生成类型声明文件并将其保存到输出目录，通常在 dist 目录中。如果要手动生成，可以通过以下命令运行：npm run build

然后在构建输出目录中，你会看到生成的 .d.ts 文件。

使用 dts 限制打包文件内容

可以在 dts 插件中，使用 tsconfigPath:'./tsconfig.xxx.json' ，来添加 ts 配置文件 来限制打包的文件内容

import { defineConfig } from 'vite'
import dts from 'vite-plugin-dts'export default defineConfig({plugins: [dts({// 插件配置选项tsconfigPath: './tsconfig.build.json',     // 配置文件路径rollupTypes: true,  // 支持 Rollup 的类型声明，可将所有的文件合并到一个文件中insertTypesEntry: true,  // 在 package.json 中插入 types 字段})],
})

tsconfig.build.json 配置文件中，在 include 选项中限制类型。

例子：通过新建一个文件tsconfig.build.json，复制 tsconfig.json 中的内容，并且在文件中修改配置"include":["src/index.ts", "src/components/**/*", "src/hooks/**/*"]，用于指名需要打包 index.ts、components下的文件、hooks下的文件。

注： * 匹配任意文件，** 匹配任意数量的子文件夹（不管几层）
// tsconfig.build.json 文件
{// 用于打包构建。注意事项：不要 include 输入外部的ts文件，避免污染dts输出；不要引用其他tsconfig文件"extends": "@vue/tsconfig/tsconfig.dom.json","include": ["src/index.ts", "src/components/**/*", "src/hooks/**/*"],"compilerOptions": {"baseUrl": ".","paths": {"@/*":["src/*"]},"types": ["vue-macros/macros-global" /* ... */],},"vueCompilerOptions": {"plugins": ["vue-macros/volar"]},"references": [{"path": "./tsconfig.node.json"}]}