特征

在最基本的层次上，使用Vite进行开发与使用静态文件服务器没有太大区别。但是，Vite对本机ESM导入提供了许多增强功能，以支持通常在基于捆绑程序的设置中常见的各种功能。

NPM依赖关系解析和预捆绑

原生ES导入不支持如下所示的裸模块导入:

import { someMethod } from 'my-dep'

上面的操作将在浏览器中抛出一个错误。Vite将在所有服务的源文件中检测此类裸模块导入，并执行以下操作:

• 预捆绑它们以提高页面加载速度，并将CommonJS / UMD模块转换为ESM。预绑定步骤是用esbuild执行的，这使得Vite的冷启动时间比任何基于javascript的绑定程序都要快得多。

• 重写导入到有效的url，如/node_modules/.vite/my- depj .js?v=f3sf2ebd，以便浏览器能正确导入。

依赖项被强缓存

Vite通过HTTP头缓存依赖请求，所以如果你想在本地编辑/调试依赖，请遵循这里的步骤。

热模块替换

Vite通过本地ESM提供了HMR API。具有HMR功能的框架可以利用API提供即时、准确的更新，而无需重新加载页面或删除应用程序状态。Vite为Vue单文件组件提供第一方HMR集成，并快速响应刷新。还有通过@prefresh/vite对Preact的官方集成。

注意，您不需要手动设置这些-当您通过@vitejs/create-app创建应用程序时，所选模板将为您预先配置这些。

TypeScript

Vite支持直接导入.ts文件。

Vite只对.ts文件执行翻译，不执行类型检查。它假设类型检查由IDE和构建过程负责(可以在构建脚本中运行tsc——noEmit)。

Vite使用esbuild将TypeScript转换为JavaScript，比普通tsc快20~30倍，HMR更新可以在50毫秒内反映到浏览器中。

请注意，因为esbuild只执行不带类型信息的转换，所以它不支持某些特性，如const enum和隐式的纯类型导入。你必须在tsconfig中设置"isolatedModules": true。这样TS就会对那些不能与单独的翻译一起工作的特性发出警告。

客户端类型

Vite的默认类型是Node.js API。要在Vite应用程序中缓冲客户端代码环境，请添加Vite/client到compilerOptions.tsconfig的类型:

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

这将提供以下类型的垫片:

• 资产导入(例如导入.svg文件)

• import.meta.env上导入的env变量的类型

• import.meta.hot上的HMR API的类型

Vue

Vite提供一流的Vue支持:

• 通过@vitejs/plugin-vue支持Vue 3 SFC

• 通过@vitejs/plugin-vue-jsx支持Vue 3 JSX

• 通过underfin/vite-plugin-vue2支持Vue 2

JSX

.jsx和.tsx文件也支持开箱即用。JSX编译也通过ESBuild处理，默认使用React 16风格。这里跟踪ESBuild中React 17风格的JSX支持。

Vue用户应该使用官方的@vitejs/plugin- Vue -jsx插件，该插件提供了Vue 3特有的特性，包括HMR、全局组件解析、指令和插槽。

如果没有将JSX与React或Vue一起使用，可以使用esbuild选项配置自定义jsxFactory和jsxFragment。例如Preact:

// vite.config.js
export default {
  esbuild: {
    jsxFactory: 'h',
    jsxFragment: 'Fragment'
  }
}

更多细节在ESBuild文档中。

你可以使用jsxInject(这是唯一的vite选项)注入JSX helper，以避免手动导入:

// vite.config.js
export default {
  esbuild: {
    jsxInject: `import React from 'react'`
  }
}

CSS

导入.css文件将通过带有HMR支持的