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

vite功能之---TypeScript

article 2025/1/16 7:15:56

Vite 天然支持引入 `.ts` 文件

意思是不需要额外配置，vite内置了对.ts文件的转译

vite仅执行转译

请注意，Vite 仅执行 .ts 文件的转译工作，并不执行 任何类型检查。并假定类型检查已经被你的 IDE 或构建过程处理了。
Vite 之所以不把类型检查作为转换过程的一部分，是因为这两项工作在本质上是不同的。转译可以在每个文件的基础上进行，与 Vite 的按需编译模式完全吻合。相比之下，类型检查需要了解整个模块图。把类型检查塞进 Vite 的转换管道，将不可避免地损害 Vite 的速度优势。

vite如何对ts文件进行类型检查

在构建生产版本时，你可以在 Vite 的构建命令之外运行 tsc --noEmit。
在开发时，如果你需要更多的 IDE 提示，我们建议在一个单独的进程中运行 tsc --noEmit --watch，或者如果你喜欢在浏览器中直接看到上报的类型错误，可以使用 vite-plugin-checker。

TypeScript 编译器选项

tsconfig.json 是 TypeScript 项目的配置文件，用于指定 TypeScript 编译器的选项。它包含了一系列配置项，帮助开发者控制编译过程、输出内容以及编译的环境等

`tsconfig.json文件的基本结构`

{
  "compilerOptions": {
    // 编译器选项配置项
  },
  "include": [
    // 包含的文件或文件夹
  ],
  "exclude": [
    // 排除的文件或文件夹
  ],
  "files": [
    // 显式列出要包含的文件
  ],
  "extends": "./base.tsconfig.json",
  "references": [
    // 项目引用
  ]
}

compilerOptions: compilerOptions配置项详解-CSDN博客

include：include配置项详解-CSDN博客

exclude：exclude配置项详解-CSDN博客

files：files 配置项详解-CSDN博客

extends：files 配置项详解-CSDN博客

references：references配置项详解-CSDN博客

客户端类型的背景

在 vite.config.json 文件中，"客户端类型"（client type）通常是指针对不同的构建目标，Vite 如何处理和优化客户端代码的设置。Vite 是一个现代化的前端构建工具，它支持多种构建目标，包括不同的 JavaScript 环境。通过配置文件中的相关选项，开发者可以指定构建的客户端类型，以便 Vite 更好地进行优化。

客户端类型的背景

Vite 的构建目标通常是浏览器（客户端）或 Node.js（服务器端），不同的构建目标会影响 Vite 如何处理代码的转换、优化和构建输出。
客户端类型（通常指的是 target 或 build.target 配置项）决定了构建过程中代码的转译策略。Vite 会根据目标环境选择不同的编译选项，比如 JavaScript 的特性、Polyfill 和压缩等。