vite-plugin-dts 0.9.5 → 0.9.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +180 -174
- package/README.zh-CN.md +179 -173
- package/dist/index.js +166 -276
- package/dist/index.mjs +166 -283
- package/package.json +11 -3
package/README.zh-CN.md
CHANGED
|
@@ -1,173 +1,179 @@
|
|
|
1
|
-
# vite-plugin-dts
|
|
2
|
-
|
|
3
|
-
**中文** | [English](./README.md)
|
|
4
|
-
|
|
5
|
-
一款用于从 `.ts` 或 `.vue` 源文件生成 `.d.ts` 文件的 Vite 插件。
|
|
6
|
-
|
|
7
|
-
## 安装
|
|
8
|
-
|
|
9
|
-
```sh
|
|
10
|
-
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
## 使用
|
|
14
|
-
|
|
15
|
-
在 `vite.config.ts`:
|
|
16
|
-
|
|
17
|
-
```ts
|
|
18
|
-
import { resolve } from 'path'
|
|
19
|
-
import { defineConfig } from 'vite'
|
|
20
|
-
import dts from 'vite-plugin-dts'
|
|
21
|
-
|
|
22
|
-
export default defineConfig({
|
|
23
|
-
build: {
|
|
24
|
-
lib: {
|
|
25
|
-
entry: resolve(__dirname, 'src/index.ts'),
|
|
26
|
-
name: 'MyLib',
|
|
27
|
-
formats: ['es'],
|
|
28
|
-
fileName: 'my-lib'
|
|
29
|
-
}
|
|
30
|
-
},
|
|
31
|
-
plugins: [dts()]
|
|
32
|
-
})
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
在你的组件中:
|
|
36
|
-
|
|
37
|
-
```vue
|
|
38
|
-
<template>
|
|
39
|
-
<div></div>
|
|
40
|
-
</template>
|
|
41
|
-
|
|
42
|
-
<script lang="ts">
|
|
43
|
-
// 使用 defineComponent 来进行类型推断
|
|
44
|
-
import { defineComponent } from 'vue'
|
|
45
|
-
|
|
46
|
-
export default defineComponent({
|
|
47
|
-
name: 'Component'
|
|
48
|
-
})
|
|
49
|
-
</script>
|
|
50
|
-
```
|
|
51
|
-
|
|
52
|
-
```vue
|
|
53
|
-
<script setup lang="ts">
|
|
54
|
-
// 尽管没有直接使用 props，你仍需要接收 defineProps 的返回值
|
|
55
|
-
const props = defineProps<{
|
|
56
|
-
color: 'blue' | 'red'
|
|
57
|
-
}>()
|
|
58
|
-
</script>
|
|
59
|
-
|
|
60
|
-
<template>
|
|
61
|
-
<div>{{ color }}</div>
|
|
62
|
-
</template>
|
|
63
|
-
```
|
|
64
|
-
|
|
65
|
-
## 选项
|
|
66
|
-
|
|
67
|
-
```ts
|
|
68
|
-
import type { ts, Diagnostic } from 'ts-morph'
|
|
69
|
-
|
|
70
|
-
interface TransformWriteFile {
|
|
71
|
-
filePath?: string
|
|
72
|
-
content?: string
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
export interface PluginOptions {
|
|
76
|
-
// 执行的根目录
|
|
77
|
-
// 默认基于 vite 配置的 root 选项
|
|
78
|
-
root?: string
|
|
79
|
-
|
|
80
|
-
// 声明文件的输出目录
|
|
81
|
-
// 默认基于 vite 配置的输出目录
|
|
82
|
-
outputDir?: string
|
|
83
|
-
|
|
84
|
-
// 提供给 ts-morph Project 初始化的 compilerOptions 选项
|
|
85
|
-
// 默认值: null
|
|
86
|
-
compilerOptions?: ts.CompilerOptions | null
|
|
87
|
-
|
|
88
|
-
// 提供给 ts-morph Project 初始化的 tsconfig.json 路径
|
|
89
|
-
// 插件也会读取 tsconfig.json 的 incldue 和 exclude 选项来解析文件
|
|
90
|
-
// 默认值: 'tsconfig.json'
|
|
91
|
-
tsConfigFilePath?: string
|
|
92
|
-
|
|
93
|
-
// 是否将 '.vue.d.ts' 文件名转换为 '.d.ts'
|
|
94
|
-
// 默认值: false
|
|
95
|
-
cleanVueFileName?: boolean
|
|
96
|
-
|
|
97
|
-
//是否将动态引入转换为静态
|
|
98
|
-
// eg. 'import('vue').DefineComponent' 转换为 'import { DefineComponent } from "vue"'
|
|
99
|
-
// 默认值: false
|
|
100
|
-
staticImport?: boolean
|
|
101
|
-
|
|
102
|
-
// 手动设置包含路径的 glob
|
|
103
|
-
// 默认基于 tsconfig.json 的 include 选项
|
|
104
|
-
include?: string | string[]
|
|
105
|
-
|
|
106
|
-
// 手动设置排除路径的 glob
|
|
107
|
-
// 默认基于 tsconfig.json 的 exclude 选线，未设置时为 'node_module/**'
|
|
108
|
-
exclude?: string | string[]
|
|
109
|
-
|
|
110
|
-
// 是否生成类型声明入口
|
|
111
|
-
// 当为 true 时会基于 package.json 的 tpyes 字段生成，或者 `${outputDir}/index.d.ts`
|
|
112
|
-
// 默认值: false
|
|
113
|
-
insertTypesEntry?: boolean
|
|
114
|
-
|
|
115
|
-
// 是否将源码里的 .d.ts 文件复制到 outputDir
|
|
116
|
-
// 默认值: true
|
|
117
|
-
copyDtsFiles?: boolean
|
|
118
|
-
|
|
119
|
-
// 出现类型诊断信息时不生成类型文件
|
|
120
|
-
// 默认值: false
|
|
121
|
-
noEmitOnError?: boolean
|
|
122
|
-
|
|
123
|
-
// 是否跳过类型诊断
|
|
124
|
-
// 跳过类型诊断意味着出现错误时不会中断打包进程的执行
|
|
125
|
-
// 但对于出现错误的源文件，将无法生成相应的类型文件
|
|
126
|
-
// 默认值: true
|
|
127
|
-
skipDiagnostics?: boolean
|
|
128
|
-
|
|
129
|
-
// 是否打印类型诊断信息
|
|
130
|
-
// 当跳过类型诊断时该属性将不会生效
|
|
131
|
-
// 默认值: false
|
|
132
|
-
logDiagnostics?: boolean
|
|
133
|
-
|
|
134
|
-
// 获取诊断信息后的钩子
|
|
135
|
-
// 可以根据参数 length 来判断有误类型错误
|
|
136
|
-
// 默认值: () => {}
|
|
137
|
-
afterDiagnostic?: (diagnostics: Diagnostic[]) => void | Promise<void>
|
|
138
|
-
|
|
139
|
-
// 类型声明文件被写入前的钩子
|
|
140
|
-
// 可以在钩子里转换文件路径和文件内容
|
|
141
|
-
// 默认值: () => {}
|
|
142
|
-
beforeWriteFile?: (filePath: string, content: string) => void | TransformWriteFile
|
|
143
|
-
|
|
144
|
-
// 构建后回调钩子
|
|
145
|
-
// 将会在所有类型文件被写入后调用
|
|
146
|
-
// 默认值: () => {}
|
|
147
|
-
afterBuild?: () => void | Promise<void>
|
|
148
|
-
}
|
|
149
|
-
```
|
|
150
|
-
|
|
151
|
-
## 示例
|
|
152
|
-
|
|
153
|
-
克隆项目然后执行下列命令：
|
|
154
|
-
|
|
155
|
-
```sh
|
|
156
|
-
|
|
157
|
-
```
|
|
158
|
-
|
|
159
|
-
然后检查 `example/types` 目录。
|
|
160
|
-
|
|
161
|
-
## 常见问题
|
|
162
|
-
|
|
163
|
-
此处将收录一些常见的问题并提供一些解决方案。
|
|
164
|
-
|
|
165
|
-
### 打包后出现类型文件缺失
|
|
166
|
-
|
|
167
|
-
默认情况下 `skipDiagnostics` 选项的值为 `true`，这意味着打包过程中将跳过类型检查（一些项目通常有 `vue-tsc` 等的类型检查工具），这时如果出现存在类型错误的文件，并且这是错误会中断打包过程，那么这些文件对应的类型文件将不会被生成。
|
|
168
|
-
|
|
169
|
-
如果您的项目没有依赖外部的类型检查工具，这时候可以您可以设置 `skipDiagnostics: false` 和 `logDiagnostics: true` 来打开插件的诊断与输出功能，这将帮助您检查打包过程中出现的类型错误并将错误信息输出至终端。
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
1
|
+
# vite-plugin-dts
|
|
2
|
+
|
|
3
|
+
**中文** | [English](./README.md)
|
|
4
|
+
|
|
5
|
+
一款用于从 `.ts` 或 `.vue` 源文件生成 `.d.ts` 文件的 Vite 插件。
|
|
6
|
+
|
|
7
|
+
## 安装
|
|
8
|
+
|
|
9
|
+
```sh
|
|
10
|
+
pnpm add vite-plugin-dts -D
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## 使用
|
|
14
|
+
|
|
15
|
+
在 `vite.config.ts`:
|
|
16
|
+
|
|
17
|
+
```ts
|
|
18
|
+
import { resolve } from 'path'
|
|
19
|
+
import { defineConfig } from 'vite'
|
|
20
|
+
import dts from 'vite-plugin-dts'
|
|
21
|
+
|
|
22
|
+
export default defineConfig({
|
|
23
|
+
build: {
|
|
24
|
+
lib: {
|
|
25
|
+
entry: resolve(__dirname, 'src/index.ts'),
|
|
26
|
+
name: 'MyLib',
|
|
27
|
+
formats: ['es'],
|
|
28
|
+
fileName: 'my-lib'
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
plugins: [dts()]
|
|
32
|
+
})
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
在你的组件中:
|
|
36
|
+
|
|
37
|
+
```vue
|
|
38
|
+
<template>
|
|
39
|
+
<div></div>
|
|
40
|
+
</template>
|
|
41
|
+
|
|
42
|
+
<script lang="ts">
|
|
43
|
+
// 使用 defineComponent 来进行类型推断
|
|
44
|
+
import { defineComponent } from 'vue'
|
|
45
|
+
|
|
46
|
+
export default defineComponent({
|
|
47
|
+
name: 'Component'
|
|
48
|
+
})
|
|
49
|
+
</script>
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
```vue
|
|
53
|
+
<script setup lang="ts">
|
|
54
|
+
// 尽管没有直接使用 props，你仍需要接收 defineProps 的返回值
|
|
55
|
+
const props = defineProps<{
|
|
56
|
+
color: 'blue' | 'red'
|
|
57
|
+
}>()
|
|
58
|
+
</script>
|
|
59
|
+
|
|
60
|
+
<template>
|
|
61
|
+
<div>{{ color }}</div>
|
|
62
|
+
</template>
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
## 选项
|
|
66
|
+
|
|
67
|
+
```ts
|
|
68
|
+
import type { ts, Diagnostic } from 'ts-morph'
|
|
69
|
+
|
|
70
|
+
interface TransformWriteFile {
|
|
71
|
+
filePath?: string
|
|
72
|
+
content?: string
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
export interface PluginOptions {
|
|
76
|
+
// 执行的根目录
|
|
77
|
+
// 默认基于 vite 配置的 root 选项
|
|
78
|
+
root?: string
|
|
79
|
+
|
|
80
|
+
// 声明文件的输出目录
|
|
81
|
+
// 默认基于 vite 配置的输出目录
|
|
82
|
+
outputDir?: string
|
|
83
|
+
|
|
84
|
+
// 提供给 ts-morph Project 初始化的 compilerOptions 选项
|
|
85
|
+
// 默认值: null
|
|
86
|
+
compilerOptions?: ts.CompilerOptions | null
|
|
87
|
+
|
|
88
|
+
// 提供给 ts-morph Project 初始化的 tsconfig.json 路径
|
|
89
|
+
// 插件也会读取 tsconfig.json 的 incldue 和 exclude 选项来解析文件
|
|
90
|
+
// 默认值: 'tsconfig.json'
|
|
91
|
+
tsConfigFilePath?: string
|
|
92
|
+
|
|
93
|
+
// 是否将 '.vue.d.ts' 文件名转换为 '.d.ts'
|
|
94
|
+
// 默认值: false
|
|
95
|
+
cleanVueFileName?: boolean
|
|
96
|
+
|
|
97
|
+
//是否将动态引入转换为静态
|
|
98
|
+
// eg. 'import('vue').DefineComponent' 转换为 'import { DefineComponent } from "vue"'
|
|
99
|
+
// 默认值: false
|
|
100
|
+
staticImport?: boolean
|
|
101
|
+
|
|
102
|
+
// 手动设置包含路径的 glob
|
|
103
|
+
// 默认基于 tsconfig.json 的 include 选项
|
|
104
|
+
include?: string | string[]
|
|
105
|
+
|
|
106
|
+
// 手动设置排除路径的 glob
|
|
107
|
+
// 默认基于 tsconfig.json 的 exclude 选线，未设置时为 'node_module/**'
|
|
108
|
+
exclude?: string | string[]
|
|
109
|
+
|
|
110
|
+
// 是否生成类型声明入口
|
|
111
|
+
// 当为 true 时会基于 package.json 的 tpyes 字段生成，或者 `${outputDir}/index.d.ts`
|
|
112
|
+
// 默认值: false
|
|
113
|
+
insertTypesEntry?: boolean
|
|
114
|
+
|
|
115
|
+
// 是否将源码里的 .d.ts 文件复制到 outputDir
|
|
116
|
+
// 默认值: true
|
|
117
|
+
copyDtsFiles?: boolean
|
|
118
|
+
|
|
119
|
+
// 出现类型诊断信息时不生成类型文件
|
|
120
|
+
// 默认值: false
|
|
121
|
+
noEmitOnError?: boolean
|
|
122
|
+
|
|
123
|
+
// 是否跳过类型诊断
|
|
124
|
+
// 跳过类型诊断意味着出现错误时不会中断打包进程的执行
|
|
125
|
+
// 但对于出现错误的源文件，将无法生成相应的类型文件
|
|
126
|
+
// 默认值: true
|
|
127
|
+
skipDiagnostics?: boolean
|
|
128
|
+
|
|
129
|
+
// 是否打印类型诊断信息
|
|
130
|
+
// 当跳过类型诊断时该属性将不会生效
|
|
131
|
+
// 默认值: false
|
|
132
|
+
logDiagnostics?: boolean
|
|
133
|
+
|
|
134
|
+
// 获取诊断信息后的钩子
|
|
135
|
+
// 可以根据参数 length 来判断有误类型错误
|
|
136
|
+
// 默认值: () => {}
|
|
137
|
+
afterDiagnostic?: (diagnostics: Diagnostic[]) => void | Promise<void>
|
|
138
|
+
|
|
139
|
+
// 类型声明文件被写入前的钩子
|
|
140
|
+
// 可以在钩子里转换文件路径和文件内容
|
|
141
|
+
// 默认值: () => {}
|
|
142
|
+
beforeWriteFile?: (filePath: string, content: string) => void | TransformWriteFile
|
|
143
|
+
|
|
144
|
+
// 构建后回调钩子
|
|
145
|
+
// 将会在所有类型文件被写入后调用
|
|
146
|
+
// 默认值: () => {}
|
|
147
|
+
afterBuild?: () => void | Promise<void>
|
|
148
|
+
}
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
## 示例
|
|
152
|
+
|
|
153
|
+
克隆项目然后执行下列命令：
|
|
154
|
+
|
|
155
|
+
```sh
|
|
156
|
+
pnpm run test:e2e
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
然后检查 `example/types` 目录。
|
|
160
|
+
|
|
161
|
+
## 常见问题
|
|
162
|
+
|
|
163
|
+
此处将收录一些常见的问题并提供一些解决方案。
|
|
164
|
+
|
|
165
|
+
### 打包后出现类型文件缺失
|
|
166
|
+
|
|
167
|
+
默认情况下 `skipDiagnostics` 选项的值为 `true`，这意味着打包过程中将跳过类型检查（一些项目通常有 `vue-tsc` 等的类型检查工具），这时如果出现存在类型错误的文件，并且这是错误会中断打包过程，那么这些文件对应的类型文件将不会被生成。
|
|
168
|
+
|
|
169
|
+
如果您的项目没有依赖外部的类型检查工具，这时候可以您可以设置 `skipDiagnostics: false` 和 `logDiagnostics: true` 来打开插件的诊断与输出功能，这将帮助您检查打包过程中出现的类型错误并将错误信息输出至终端。
|
|
170
|
+
|
|
171
|
+
### Vue 组件中同时使用了 `script` 和 `setup-script` 后出现类型错误
|
|
172
|
+
|
|
173
|
+
这通常是由于分别在 `script` 和 `setup-script` 中同时使用了 `defineComponent` 方法导致的。 `vue/compiler-sfc` 为这类文件编译时会将 `script` 中的默认导出结果合并到 `setup-script` 的 `defineComponent` 的参数定义中，而 `defineComponent` 的参数类型与结果类型并不兼容，这一行为将会导致类型错误。
|
|
174
|
+
|
|
175
|
+
这是一个简单的[示例](https://github.com/qmhc/vite-plugin-dts/blob/main/example/components/BothScripts.vue)，您应该将位于 `script` 中的 `defineComponent` 方法移除，直接导出一个原始的对象。
|
|
176
|
+
|
|
177
|
+
## 授权
|
|
178
|
+
|
|
179
|
+
MIT 授权。
|