一、前言
使用vue3+vite+ts实现一个UI组件库，为了生成类型文件便于其他项目引用该组件库。根据推荐使用了vite-plugin-dts插件进行ts文件的生成
二、版本
| 组件 | 版本 |
| vue | ^3.5.12 |
| vite | ^5.4.10 |
| vite-plugin-dts | ^4.3.0 |
| typescript | ~5.6.2 |
三、问题描述
使用vite+vite-plugin-dts编译的组件库文件中d.ts文件只有一个并且是空的，导致在其他vue项目中无法导入使用
如图：
四、当前配置
1、vitest.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import dts from 'vite-plugin-dts'
// https://vite.dev/config/
export default defineConfig({
resolve: {},
build: {
lib: {
entry: 'src/index.ts',
name: 'c-ui', //对外暴露的组件名称
formats: ['cjs', 'es', 'umd'],//cjs (CommonJS): 通常用于 Node.js 环境，使用 require 语句来导入模块。es (ES Module): 这是现代 JavaScript 的模块标准，使用 import 语句来导入模块。
fileName: (format)=> `c-ui-${format}.js` //umd（require导入方式） es(import导入方式)
},
rollupOptions: {
external: ['vue'],
output: {
//针对于umd模式下为外部化依赖提供一个全局的变量
globals: {
vue: 'Vue' //对应exter里的vue， 对于UMD模式导入后，可以使用Vue.xxx
},
}
}
},
plugins: [
vue({
// 包括哪些文件
include: [/\.vue$/]
}),
dts({
insertTypesEntry: true,
copyDtsFiles: true,
// 指定需要为哪些文件生成类型定义
include: ['src/**/*.d.ts', 'src/**/*.vue', 'src/**/*.ts'] }),
]
})
2、tsconfig.json
{
"files": [],
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" }
]
}
注：由于我们是运行在浏览器中的UI组件，所以只需要关心tsconfig.app.json文件。
3、tsconfig.app.json
{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"target": "ES2020",
"useDefineForClassFields": true,
"module": "ESNext",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "Bundler",
"allowImportingTsExtensions": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
"jsx": "preserve",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}
五、问题原因
原因：vite-plugin-dts组件默认取的是tsconfig.json配置，但是vite创建的项目中tsconfig.json被拆分成2个文件，所以tsconfig.json中的include配置项未生效。如下图：
六、解决方案
vite-plugin-dts组件支持配置tsconfig文件的路径，如下：
dts({
// 重要 重要 重要 配置实际的tsconfig配置文件路径
tsconfigPath: 'tsconfig.app.json',
insertTypesEntry: true,
copyDtsFiles: true,
// 指定需要为哪些文件生成类型定义
include: ['src/**/*.d.ts', 'src/**/*.vue', 'src/**/*.ts']
}),
