[vite] 构建自动生成 .d.ts 声明文件

9,038 阅读1分钟

思路:直接使用 tsc 命令自动生成 .d.ts 声明文件

方案

步骤1:修改 tsconfig.json 的配置

"emitDeclarationOnly": true, // 只输出声明文件(ts 产物)
"declaration": true, // 自动生成声明文件
"declarationDir": "dist", // 声明文件生成的目录

步骤2:调整构建命令的顺序,先 build 再执行 tsc 的检测

// 原有的构建命令
{
  "scripts": "tsc && vite build"
}

// 修改后的构建命令
{
  "scripts": "vite build && tsc"
}

原因:

  1. vite build 命令生成的构建会重新覆盖原有的目录,如果在 tsc 命令后执行,则生成的 .d.ts 文件会被覆盖
  2. tsc 在构建过程的作用是类型检测,vite 可以直接将 Typescript 转译到 Javascript

Q: tsc 命令置后执行,会不会在构建完成后遗漏了类型检测?
A: 不会,即使 build 完成后,执行 tsc 遇到错误的编码,也会在终端报错从而退出命令的执行。如下图所示:

image.png

最终构建产物

源码地址:github.com/HopperDai/v…

参考