【vite】-【vite介绍】-【vite的基础应用】-【vite的高级应用】-【

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的各种功能

一、推荐使用css variable：简单来说就是在css文件中可以进行变量定义

:root代表命名空间，在:root下定义的所有变量在所有选择器中都可以使用，也可以对某一类标签进行样式的定义，那这些样式就只能在某一类标签中使用
二、postcss：vite已集成postcss，如果想用的话，新建postcss.config.js，在里面声明要用的postcss

该postcss用于在编译css文件时进行输出：

三、@import alias：引入文件时，通过@指向某个目录，在vite.config.js中进行如下配置：

在css中的import也可以使用：@import url("@styles/other.css")
四、css-modules：如果希望css的类名不根据我们写的类名，而是根据映射关系进行编译，这样类名就变成了无意义的，并且可以作为一个可以收缩的字符串，同时可以进行去重，对应到vite中，只用在创建css时，文件名写：css文件名.module.css

使用时：

<script>import classes from "@style/test.module.css";</script>
<div class={`${classes.moduleClass}`}>hello world</div>

五、css预处理器：安装yarn add less即可使用

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：

1. vite提供了很多内置对象，内置对象又有很多作用，比如可以通过import.meta.来引用环境变量等，这就需要ts认识meta类型， 在tsconfig.js中配置："types": ["vite/client"]即可使用vite的内置对象
   
   在ts中使用：
   
2. ts不认识png文件，配置了"types": ["vite/client"]之后，ts知道这是png文件，也知道import pngUrl from "./assets/logo.png"返回的是个字符串，在项目中可以直接使用

vite中处理静态资源的方法

一、直接使用import导入，然后使用

二、vite提供了几个参数让我们更方便的引入文件：

1. url：把文件放在某个地方，然后返回个url