Vite

目录

一、Vite是什么？

二、Vite在开发阶段

index入口与vite处理方式

Vite作为一个服务器 

三、Vite在构建阶段

NPM 依赖解析和预构建

模块热替换 

TypeScript 

客户端类型 

Vue

CSS

静态资源处理 

JSON 

Glob 导入 

动态导入 

WebAssembly 

---

一、Vite是什么？

vite是前端开发与构建工具

二、Vite在开发阶段

index入口与vite处理方式

• Vite 将 index.html 视为源码和模块图的一部分。
• Vite 解析引入type="module" 的script标签。
• Vite解析内联引入类型为type="module"的JavaScript标签。
• Vite解析引用 CSS 的link标签。
• Vite将index.html中的URL自动转换。

Vite作为一个服务器 

• Vite根目录即以当前工作目录作为根目录启动开发服务器
• Vite能够处理依赖管理，解析根目录之外位置的文件。

三、Vite在构建阶段

Vite 通过原生 ESM 导入提供了许多主要用于打包场景的增强功能。

NPM 依赖解析和预构建

• 预构建，esbuild
• 重新导入URL，避免浏览器引用执行错误。
• Vite 通过 HTTP 头来缓存请求得到的依赖。

模块热替换 

Vite 提供了一套原生 ESM 的 HMR API。 具有 HMR 功能的框架可以利用该 API 提供即时、准确的更新，而无需重新加载页面或清除应用程序状态。Vite 内置了 HMR 到 Vue 单文件组件（SFC） 和 React Fast Refresh 中。也通过 @prefresh/vite 对 Preact 实现了官方集成。

TypeScript 

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

Vite 仅执行 .ts 文件的转译工作，并 不 执行任何类型检查。并假设类型检查已经被你的 IDE 或构建过程接管了（你可以在构建脚本中运行 tsc --noEmit 或者安装 vue-tsc 然后运行 vue-tsc --noEmit 来对你的 *.vue 文件做类型检查）。 

客户端类型 

Vite 默认的类型定义是写给它的 Node.js API 的。

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

Vue

Vite 为 Vue 提供第一优先级支持

CSS

导入 .css 文件将会把内容插入到 <style> 标签中，同时也带有 HMR 支持。也能够以字符串的形式检索处理后的、作为其模块默认导出的 CSS。

静态资源处理 

导入一个静态资源会返回解析后的 URL：import imgUrl from './img.png' 

JSON 

JSON 可以被直接导入 —— 同样支持具名导入：

// 导入整个对象 import json from './example.json'

// 对一个根字段使用具名导入  import { field } from './example.json' 

Glob 导入 

Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块：

const modules = import.meta.glob('./dir/*.js') 

动态导入 

const module = await import(`./dir/${file}.js`) 

WebAssembly 

预编译的 .wasm 文件可以通过 ?init 来导入。默认导出一个初始化函数，返回值为所导出 wasm 实例对象的 Promise： 

这篇好文章是转载于：学新通技术网