refactor: 更改d.ts文件生成方式, 改为vue-tsc生成

README.md

@@ -146,3 +146,4 @@
 - components.d.ts: unplugin-vue-components 组件自动生成/修改的文件，从该文件中可以得知，哪些组件被自动全局按需引入了
 - vite-env.d.ts: vite 相关的 ts 配置文件。如需配置全局属性的 ts 声明或.env 文件的属性/类型声明，则在此文件中完成
 - src/routes/index.ts: vue-router 配置文件，路由和路由守卫的入口文件
+- dts-tsconfig.json 用于对lib目录生成d.ts文件，build-dts脚本会使用到该文件

dts-tsconfig.json

+{
+  "compilerOptions": {
+    // 指定 ECMAScript 目标版本: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    // 指定生成代码模块的标准: 'commonjs', 'amd', 'system', 'umd' or 'es2015'
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "strict": true,
+    // 指定 jsx 代码的生成: 'preserve', 'react-native', or 'react'
+    "jsx": "preserve",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    /* 注意：如果未指定--lib，则会注入默认的librares列表。注入的默认库为：
+         对于 --target ES5: DOM,ES5,ScriptHost
+         对于 --target ES6: DOM,ES6,DOM.Iterable,ScriptHost
+         TS 绝不会在您的代码中注入polyfill,所以需要你自己制定编译lib */
+    "lib": ["ESNext", "DOM"],
+    // allowJs: 是否允许编写和使用js(包括js,jsx). 默认:false, 可以设置为true, 减少引入非ts模块时提示没有类型声明的问题
+    // "allowJs": true,
+    // 是否生成类型声明文件。如果设为true，编译每个ts文件之后会生成一个js文件和一个声明文件
+    "declaration": true,
+    // 是否删除注释
+    "removeComments": false,
+    // 生成的类型声明文件的输出路径. ./types表示生成在项目根目录下的 types 文件夹
+    "declarationDir": "./dist",
+    "emitDeclarationOnly": true,
+    "skipLibCheck": true,
+    // 不生成编译文件
+    "noEmit": false,
+    "importHelpers": true, // 不让同样的辅助函数重复的出现在多个文件中
+    "allowSyntheticDefaultImports": true, // 允许对不包含默认导出的模块使用默认导入。
+    // types用来指定需要包含的模块，只有在这里列出的模块的声明文件才会被加载进来
+    "types": ["vite/client", "jest", "pinia-plugin-persist"],
+    "baseUrl": ".", // 非相对模块的导入可以相对于baseUrl或通过下文会讲到的路径映射来进行解析
+    "paths": {
+      // 定义路径别名. 这里的定义是让ts识别路径别名, vite.config.ts中的是让vite识别路径别名
+      "@/*": ["src/*"],
+      "lib/*": ["lib/*"]
+    }
+  },
+  // 定义扫描路径. 会扫描这些路径下的代码
+  "include": ["lib/**/*"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package.json

@@ -17,8 +17,9 @@
     "./dist/style.css": "./dist/style.css"
   },
   "scripts": {
+    "build-dts": "vue-tsc -p ./dts-tsconfig.json",
     "dev": "vite",
-    "build": "rimraf -rf ./dist && vue-tsc && vite build",
+    "build": "rimraf -rf ./dist && vue-tsc && vite build && pnpm run build-dts",
     "format": "prettier --loglevel warn --write \"**/*.{ts,tsx,css,md,vue}\"",
     "eslint-fix": "eslint --ext .ts,.js,.vue src/ --cache --fix",
     "lint-staged": "lint-staged",
@@ -84,7 +85,6 @@
     "unplugin-auto-import": "^0.12.1",
     "unplugin-vue-components": "^0.22.9",
     "vite": "^3.2.5",
-    "vite-plugin-dts": "^1.7.1",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-inspect": "^0.7.8",
     "vite-plugin-mock": "^2.9.6",

vite.config.ts

@@ -14,7 +14,6 @@ import eslintPlugin from 'vite-plugin-eslint'
 import { visualizer } from 'rollup-plugin-visualizer'
 import Inspect from 'vite-plugin-inspect'
 import { viteMockServe } from 'vite-plugin-mock'
-import dts from 'vite-plugin-dts'
 import rollupDelete from 'rollup-plugin-delete'
 import { viteStaticCopy } from 'vite-plugin-static-copy'
 import removeConsole from 'vite-plugin-remove-console'
@@ -123,13 +122,6 @@ export default ({ command, mode }: ConfigEnv): UserConfigExport => {
         resolvers: [ElementPlusResolver()],
         dts: './src/components.d.ts',
       }),
-      // 用于生成类型声明文件
-      dts({
-        outputDir: 'dist', // 指定生成的.d.ts文件的输出目录
-        include: './lib', // 指定扫描的目录. 如果不指定，则扫描的整个项目, 因为我们的组件代码是写在lib目录的，所以这里只要指定lib即可
-        staticImport: true,
-        insertTypesEntry: true,
-      }),
       /*
       该组件用于删除一些不必要的资源文件. 
       比如：public文件夹的内容不会直接放入最终的打包目录，里面的文件可能是我们不需要的，因此可以使用这个组件来删除