这是我参与「第五届青训营 」伴学笔记创作活动的第 11 天

什么是Vite

Vite是一个现代化的前端构建工具，旨在提供快速的开发体验。它由尤雨溪（Evan You）创建，他也是Vue.js的创造者。

Vite主要的特点是快速的启动速度和即时更新，这是通过利用ES模块化的特性来实现的。在开发过程中，Vite不需要预先构建整个应用程序，而是在需要时动态编译代码，从而实现了更快的开发和热更新。

Vite支持多种前端框架和库，包括React、Vue.js和Svelte等。它还支持TypeScript和CSS预处理器等多种技术。

总的来说，Vite是一个非常灵活和高效的前端构建工具，适用于现代化的前端开发项目

如何使用Vite

使用Vite构建前端项目通常需要以下步骤：

1. 安装Node.js和npm或yarn，这是使用Vite的前提条件。
2. 创建一个新的项目目录并进入该目录。
3. 在命令行中使用npm或yarn安装Vite

npm install vite --save-dev
或
yarn add vite --dev

4. 在项目目录下创建一个index.html文件，这是入口文件。
5. 在入口文件中添加一个<script>标签，并设置其src属性为/src/main.js。这将是应用程序的主要入口点。
6. 在项目目录下创建一个src目录，并在其中创建一个main.js文件。这是应用程序的主要JavaScript文件。
7. 在main.js文件中编写你的应用程序代码。
8. 在命令行中使用vite命令启动Vite服务：

npm run dev
或
yarn dev

9. 打开浏览器并访问http://localhost:3000，即可看到你的应用程序。

使用Vite还可以在项目中使用预处理器，如TypeScript、Less、Sass等。此外，Vite还支持在开发过程中进行热更新，实时显示代码更改的结果，使得开发更加高效。

Vite整体架构

Vite的整体架构可以分为两部分：开发服务器和构建器。

开发服务器部分负责提供一个开发时的服务环境，以便在开发过程中快速响应代码更改和提供开发时的工具支持。其主要包含以下模块：

1. Koa：基于Node.js的Web框架，提供路由、中间件等功能。
2. Vite插件系统：提供了丰富的插件体系，例如Vue.js、React等框架的插件、HMR（热模块替换）插件、TypeScript、CSS预处理器等。
3. Rollup：一个 JavaScript 模块打包器，Vite 采用 Rollup 实现了 ES 模块的构建和打包。
4. Dev server：提供了开发服务器的核心逻辑，包括文件系统读取、构建、中间件等。

构建器部分负责将应用程序打包成生产环境可用的静态文件，包含以下模块：

1. Rollup：同样负责构建生产环境的代码，但和开发服务器中的 Rollup 不同，它在打包时进行了一些额外的优化和处理。
2. Build cache：Vite的构建器还引入了缓存机制，用于在下一次构建时提升构建速度。
3. 构建输出：生成最终的静态文件，包含 JS、CSS、图片等资源。

在整个架构中，开发服务器和构建器紧密结合，共享一些逻辑和插件，以提供高效的开发体验和生产构建。