vite介绍

一、特点：

1. 开发时效率极高
2. 开箱即用，功能完备
3. 摄取丰富，兼容rollup
4. 超高速热重载
5. 预设应用和类库打包模块
6. 前端类库无关

二、vite是构建工具的高阶封装，内部使用的是其他的工具，最核心的是rollup
三、vite的目标：

1. 使用简单：配置项少，把能封装的配置都封装好了，不会让你非常深度的接触一些配置；内部集成devServe，不需要像使用web pack那样再加入devServe再配置再使用；
2. 快：得益于他的底层架构设计
3. 便于扩展：兼容rollup插件rollup比webpack发布早，使用率高，社区成熟，插件多

四、和传统构建工具的区别：high level api；不包含自己编译能力（vite底层的编译能力源自rollup、esbuild，vite本身不参与编译，他只是集成了rollup的功能，启动了deserve，vite帮我们做一个串联，去管理模块的图谱，监听文件的更新来进行推送）；完全基于esm加载方式的开发式

1. webpack：他希望他可以把所有能考虑的东西都考虑进去，同时他希望他的核心功能能够帮助其他的功能实现，比如可以通过webpack实现webpack dev serve
2. rollup：诞生就是为了build esm的module，同时他专注于build javascript，而不考虑平台

webpack编译出来的代码中会有很多webpack的工具函数，来帮助我们加载模块，比如在浏览器中我们要import另外的模块，我们通过script标签引入这个js，然后在js加载完后执行回调函数来将模块加载完成，webpack提供了各种帮助函数来帮助我们做这个事，但rollup不会有自己专有的函数，他遵循esm标准，他build出来的代码符合commonjs、umd标准，这是因为rollup更多是为了让工具类库来使用，他的初衷不是为前端项目服务。而vite的目标是工程，是项目开发，而webpack和rollup他们是工具，他们想执行的是构建，vite更上层，更high level
vite是为项目而生，不是为构建而生，他减少了很多配置量，主要减少在于：

1. dev server：如果使用webpack配置一个项目，一定要配置dev serve，但是通过vite的命令生成的项目会自动集成dev serve，或者说vite的核心就是dev serve，vite中很大一部分是dev serve
2. 各类loader：在webpack中需要配置css-loader、post-css-loader、ts-loader等，而vite已经通过插件的形式内置了这些内容，开箱即用
3. build命令：内置了build命令，通过vite build可以build类库，也可以build项目，对于webpack而言需要自己写命令，开发时的配置和生产的配置可能又不一样，又需要做一些处理

五、vite优势：上手简单、开发效率高、社区成本低（兼容rollup插件）、没有复杂晦涩的配置
六、

vite的基础应用

vite创建项目

vite创建vue3项目

vite创建vue2项目

vite创建react项目

vite中使用css的各种功能

vite中使用ts

一、vite天生支持ts，因为vite使用esbuild，esbuild支持ts语法，值得注意的是，vite值编译，不做校验，也就是说，他只是把ts语法编译成js，让其可在浏览器中运行，但他不会做ts校验，如果需要校验，需要手动使用tsc --noEmit来校验语法但不输出，如果是在vue项目中，应该写："build": "vue-tsc --noEmit && tsc --noEmit && vite build（记得先yarn add vue-tsc）

VScode支持ts语法校验，所以就算你写错了，VScode会给你标出来，可以不用

二、isolatedModules：

1. vite提供的ts编译只针对单文件的语法编译，而ts是可以关联不同文件之间的模块信息，比如a文件export了一个类型，在b文件import了这个类型是可以直接用的，但是vite编译ts的时候不会读其他文件的相关信息，就会导致一些ts的功能无法使用。在tsconfig.js中配置："isolatedModules": true用于告诉ts当前环境不支持模块间关联的类型校验的，在开发时就会得到vite编译时的错误提醒
   
2. ts中，对于const enum会在使用时直接替换成常量，也就是说，编译出来的js中，第10行代码应为：age: 0，而对于vite的esbuild提供ts语法编译，他不认识const enum这种语法，编译时会直接去掉，也就是说，编译出来的js中，第3-6行代码直接没有了，但是第10行还在使用，所以第10行会报错。配置了"isolatedModules": true，在开发时就会得到vite编译时的错误提醒
   
3. 文件必须有模块相关的代码：配置了"isolatedModules": true后，ts强制要求我们在每个文件中做export或import

三、client types：
vite提供了很多内置对象，内置对象又有很多作用，