关于 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.jsoncompilerOptions 下的一些配置项需要特别注意。

isolatedModules

应该设置为 true

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

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

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

useDefineForClassFields

从 Vite v2.5.0 开始,如果 TypeScript 的 target 是 ESNextES2022 及更新版本,此选项默认值则为 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" />
    

你可能感兴趣的:(学习,typescript,Vite)