这是我参与「第四届青训营 」笔记创作活动的的第8天
今天学习的是vite入门,
什么是Vite
Vite 是一种新型的前端构建工具，能够显著提升前端开发体验，它主要由两部分组成： 一个开发服务器, 基于原生ES模块提供了非常丰富的内建功能，如速度快到惊人的模块热更新，一套构建指令，使用Rollup打包你的代码，并且是预配置的，可输出用于生产环境的高度优化过的静态资源。
# Vite的使用
前提： Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。
1、vite项目是基于create-vite-app脚手架搭建的，所以直接使用npm init命令：
npm init <脚手架名称> <项目名称>
注：npm init命令在执行时，如果对应<脚手架名称>的脚手架没有安装的话，就会自动安装对应的脚手架工具。
2、执行安装依赖： npm install
3、CD到项目路径下： 执行启动命令：npm run dev，即可启动项目
文件目录：
Vite工作原理
我们都知道，传统打包构建工具，在服务器启动之前，需要从入口文件完整解析构建整个应用。因此，有大量的时间都花在了依赖生成，构建编译上。
而vite主要遵循的是使用ESM(Es modules模块)的规范来执行代码，由于现代浏览器基本上都支持了ESM规范，所以在开发阶段并不需要将代码打包编译成es5模块即可在浏览器上运行。我们只需要从入口文件出发， 在遇到对应的 import 语句时，将对应的模块加载到浏览器中就可以了。因此，这种不需要打包的特性，也是vite的速度能够如此快速的原因。
同时ts/jsx等文件的转译工作也会借助了esbuild来提升速度。Vite在内部实现上，会启动一个dev server， 并接受独立模块的HTTP请求，并让浏览器自身去解析和处理模块加载。下面以官方提供的demo为例，可以看到运行后，在访问对应页面的时候，不是加载一整个的bundle.js文件，而是按模块去加载。
