Vite对TypeScript的支持及其原理

唐皓晨大约 6 分钟

Vite 对 TypeScript 的支持及其原理

使用命令行创建使用 js 的 vite 项目

pnpm create vite

依次选择 Vanilla 项目和 JavaScript 语言

运行项目

cd test
pnpm install
pnpm run dev

在项目中添加 ts 文件

mkdir ts/math.ts

// ts/math.ts
export const sum = (a: number, b: number): number => {
  return a + b;
};

将 ts 定义的函数拿到入口文件中使用

// main.js
import { sum } from './ts/math';

console.log(sum(50, 50));
console.log(sum(200, 200));

Vite 对 TypeScript 是原生支持的，它会直接使用 esbuild 来完成编译，将 TypeScript 转译到 JavaScript，我们只需要直接导入 ts 文件即可。

查看浏览器请求信息

浏览器在向 Vite 搭建的本地服务器请求时，请求的还是刚刚编写的这个 ts 文件

Vite 会搭建一个本地服务器，浏览器在向这个服务器请求的可不是 js 文件，而是 ts 文件，但是，ts 文件显然不能直接交给浏览器解析，因为浏览器解析不了这两种文件类型的代码。

这时 Vite 内部会对请求进行拦截，然后将请求转发，最后请求到的其实是内部已经转换成了 ES6 的 JS 代码的文件，只不过文件名和文件后缀依然没变。所以浏览器最终执行的是这些 ES6 的 js 代码，之后在页面上显示对应的效果，控制台打印对应的结果。