关于 Vite 的浅显学习 - 功能 - TypeScript

大部分内容来源于vite官网，部分内容来自于 自己测试和总结
Vite 官方中文文档

对非常基础的使用来说，使用 Vite 开发和使用一个静态文件服务器并没有太大区别。然而，Vite 还通过原生 ESM 导入提供了许多主要用于打包场景的增强功能。

NPM 依赖解析和预构建

原生 ES 导入不支持下面这样的裸模块导入：

import { someMethod } from 'my-dep'

上面的代码会在浏览器中抛出一个错误。Vite 将会检测到所有被加载的源文件中的此类裸模块导入，并执行以下操作：

1. 预构建 它们可以提高页面加载速度，并将 CommonJS / UMD 转换为 ESM 格式。预构建这一步由 esbuild 执行，这使得 Vite 的冷启动时间比任何基于 JavaScript 的打包器都要快得多。
2. 重写导入为合法的 URL，例如 /node_modules/.vite/deps/my-dep.js?v=f3sf2ebd 以便浏览器能够正确导入它们。

依赖是强缓存的

Vite 通过 HTTP 头来缓存请求得到的依赖。

模块热替换

Vite 提供了一套原生 ESM 的 HMR API。具有 HMR 功能的框架可以利用该 API 提供即时、准确的更新，而无需重新加载页面或清除应用程序状态。Vite 内置了 HMR 到 Vue 单文件组件（SFC）
和 React Fast Refresh 中。也通过 @prefresh/vite 对 Preact 实现了官方集成。
注意，你不需要手动设置这些 —— 当你通过 create-vite 创建应用程序时，所选模版已经为你预先配置了这些。

TypeScript

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

仅执行转译

请注意，Vite 仅执行 .ts 文件的转译工作，并不执行 任何类型检查。并假定类型检查已经被你的 IDE 或构建过程处理了。

Vite 之所以不把类型检查作为转换过程的一部分，是因为这两项工作在本质上是不同的。转译可以在每个文件的基础上进行，与 Vite 的按需编译模式完全吻合。相比之下，类型检查需要了解整个模块图。把类型检查塞进 Vite 的转换管道，将不可避免地损害 Vite 的速度优势。

Vite 的工作是尽可能快地将源模块转化为可以在浏览器中运行的形式。为此，我们建议将静态分析检查与 Vite 的转换管道分开。这一原则也适用于其他静态分析检查，例如 ESLint。

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

Vite 使用 esbuild 将 TypeScript 转译到 JavaScript ，约是 tsc 速度的 20~ 30 倍，同时 HMR 更新反映到浏览器的时间小于 50ms。

使用 仅含类型的导入和导出 形式的语法可以避免潜在的“仅含类型的导入被不正确打包”的问题，写法示例如下：

import type { T } from 'only/types'
export type { T }

TypeScript 编译器选项

tsconfig.json 中 compilerOptions 下的一些配置项需要特别注意。

isolatedModules

应该设置为 true。

这是因为 esbuild 只执行没有类型信息的转译，它并不支持某些特性，如 const enum 和隐式类型导入。

你必须在 tsconfig.json 中的 compilerOptions 下设置 "isolatedModules": true。如此做，TS 会警告你不要使用隔离（isolated）转译的功能。

然而，一些库（如：vue）不能很好地与 "isolatedModules": true 共同工作。你可以在上游仓库修复后之前暂时使用 "skipLibCheck": true 来缓解这个错误。

useDefineForClassFields

从 Vite v2.5.0 开始，如果 TypeScript 的 target 是 ESNext 或 ES2022 及更新版本，此选项默认值则为 true 。这与 tsc v4.3.2及以后版本的行为 一致。这也是标准的 ECMAScript 的运行时行为。

但对于那些习惯其他编程语言或旧版本 TypeScript 的开发者来说，这可能是违反直觉的。你可以参阅 TypeScript 3.7发布日志 中了解更多关于如何兼容的信息。

如果你正在使用一个严重依赖 class fields 的库，请注意该库对比选项的预期设置。

大多数库都希望 "useDefineForClassFields": true ，如 Mobx。

但是有几个库还没有兼容这个新的默认值，其中包括 lit-element 。如果遇到这种情况，请将 useDefineForClassFields 设置为 false 。

影响构建结果的其他编译器选项

• extends
• importsNotUsedAsValues
• preserveValueImports
• jsxFactory
• jsxFragmentFactory

如果你的代码库很难迁移到 "isolatedModules": true ，或许你可以尝试通过第三方插件来解决，比如 rollup-plugin-friendly-type-imports 。但是，这种方式不被 Vite 官方支持。

客户端类型

Vite 默认的类型定义是写给它的 Node.js Api 的。要将其补充到一个 Vite 应用的客户端代码环境中，请添加一个 d.ts 声明文件：

/// <reference types="vite/client" />

或者，你也可以将 vite/client 添加到 tsconfig.json 中的 compilerOptions.types 下：

{
  "compilerOptions": {
    "types": ["vite/client"]
  }
}

这将会提供以下类型定义补充：

• 资源导入 (例如：导入一个 .svg 文件)
• import.meta.env 上 Vite 注入的环境变量的类型定义
• import.meta.hot 上的 HMR API 类型定义

TIP

要覆盖默认的类型定义，请添加一个包含你所定义类型的文件，请在三斜线注释 reference vite/client 前添加定义。
例如，要为 React 组件中的 *.svg 文件定义类型：

• vite-env-override.d.ts (the file that contains your typings):

  declare module '*.svg' {
    const content: React.FC<React.SVGProps<SVGElement>>
    export default content
  }
  

• The file containing the reference to vite/client:

  /// <reference types="./vite-env-override.d.ts" />
  /// <reference types="vite/client" />