快速开发工具 Vite

快速开发工具 vite

---

摘要：

**概念：**Vite 是一种新型前端构建工具，能够显著提升前端开发体验

**构造：**Vite 主要由一个开发服务器和一套构建指令组成。

Vite底层的服务器转换和转发：以处理ts文件为例

1-读取 format.ts 原文件

2-通过 ESBuild 转换 format.ts 代码为 js 代码

3-当浏览器请求 format.ts 文件时，vite中的服务器Connect转发请求，获取以上ts转换后为js的代码

---

Vite使用：

1-优化模块化支持

浏览器原生支持模块化，不过具有以下问题：

• 文件必须明确写上后缀名。
• 如果某一个模块，加载很多其他的js文件，那么这些js文件都需要依次被加载。
• 如果代码中有ts/jsx/vue代码，那么浏览器是不识别的。

采用 Vite 之后：

• 文件不用加后缀名
• 自动寻找包的入口文件，并合并需要加载的文件
• 通过 ESBuild 来转换ts等为js

2-直接支持css、ts等

3-Vite提供脚手架

---

ESBuild：

概念：js打包和构建工具

特点：超快的构建速度，并且不需要缓存。

---

---

---

概念

**官方的定位：**下一代前端开发与构建工具。

**概念：**Vite (法语意为 “快速的”，发音 /vit/) 是一种新型前端构建工具，能够显著提升前端开发体验

如何定义下一代开发和构建工具呢？

我们知道在实际开发中，我们编写的代码往往是不能被浏览器直接识别的，比如ES6、TypeScript、Vue文件等等，所以我们必须通过构建工具来对代码进行转换、编译，类似的工具有webpack、rollup、parcel。但是随着项目越来越大，需要处理的JavaScript呈指数级增长，模块越来越多，构建工具需要很长的时间才能开启服务器，HMR也需要几秒钟才能在浏览器反应出来。所以也有这样的说法：天下苦webpack久矣。

---

---

Vite 构造

Vite 主要由两部分组成：

• 一个开发服务器，它基于原生ES模块提供了丰富的内建功能，HMR的速度非常快速
• 一套构建指令，它使用rollup打开我们的代码，并且它是预配置的，可以输出生成环境的优化过的静态资源。

在浏览器支持 ES 模块之前，JavaScript 并没有提供原生机制让开发者以模块化的方式进行开发。

这也正是我们对 “打包” 这个概念熟悉的原因：使用工具抓取、处理并将我们的源码模块串联成可以在浏览器中运行的文件。 时过境迁，我们见证了诸如 webpack、Rollup 和 Parcel 等工具的变迁，它们极大地改善了前端开发者的开发体验。 然而，当我们开始构建越来越大型的应用时，需要处理的 JavaScript 代码量也呈指数级增长。包含数千个模块的大型项目相当普遍。 基于 JavaScript 开发的工具就会开始遇到性能瓶颈：通常需要很长时间（甚至是几分钟！）才能启动开发服务器，即使使用 模块热替换（HMR），文件修改后的效果也需要几秒钟才能在浏览器中反映出来。

Vite 旨在利用生态系统中的新进展解决上述问题：

浏览器开始原生支持 ES 模块，且越来越多 JavaScript 工具使用编译型语言编写。

原版：the rise of JavaScript tools written in compile-to-native languages.

理解：现在很多JS工具直接使用原生JS（如ES6），而非转换后的JS（ES5）

---

---

浏览器原生支持模块化

如果我们不借助于其他工具，直接使用ES Module来开发有什么问题呢？

• 文件必须明确写上后缀名。
• 如果某一个模块，加载很多其他的js文件，那么这些js文件都需要依次被加载。
• 如果代码中有ts/jsx/vue代码，那么浏览器是不识别的。

事实上，vite就帮助我们解决了上面的所有问题。

**Case：**浏览器原生支持模块化问题

问题：

首先，我们会发现在使用loadash时，加载了上百个模块的js代码，对于浏览器发送请求是巨大的消耗。 其次，我们的代码中如果有TypeScript、less、vue等代码时，浏