03 Vite 如何处理各种格式的文件

前端常见的文件类型

浏览器可识别的

1. javascript
2. css
3. htm
4. json
5. 资源类型：png，jpg，svg，mp4

浏览器不可识别的

1. typescript
2. vue
3. jsx
4. less
5. sass

Vite 处理方法

TypeScript的处理

1. 基于我们上一篇文章中搭建的简答项目，我们新建一个typescript类型的文件，如下
   
2. 查看浏览器成功输出了结果，如下
   
3. 观察上述两张图，先提出两个疑问

1. 1. 为什么浏览器可以识别加载.ts类型的文件
   2. 为什么浏览器加载的文件和我们本地的文件内容不一致

4. 对于ts类型文件的处理，vite借助的是esbuild，速度是tsc的20~30倍，且只执行转译为js文件，不检查类型，所以我们在浏览器中看到的是转移为js后的内容，而非原始内容
5. 当浏览器导入该文件时，vite服务器通过在响应头中添加content-type来声明.ts文件为js类型，因此浏览器可以加载并识别.ts结尾的文件

Jsx的处理

1. 同理，我们创建一个jsx类型的文件，如下
   
2. 浏览器查看运行结果，如下
   
3. 观察上述结果，我们发现，浏览器加载的jsx中内容被编译为React.createElement函数，控制台报错提示React未定义
4. 对于jsx类型文件，vite同样采用esbuild来转译，将jsx代码重写为渲染函数，同时设置响应头为js方便浏览器识别
5. 对于控制台的报错是重写后的内容调用了React实例的函数，但是没有导入React，所以我们手动安装并导入React即可，如下
   

Vue的处理

1. 同理创建.vue类型的文件，如下
   
2. 观察控制台发现报错了，根据提示，要求安装@vitejs/plugin-vue来处理.vue文件，说明对于Vue类型的文件vite并不是开箱即用的，需要借助插件实现vue转译为js文件，我们安装vue和插件，并新增vite.config.js文件来配置插件。如下
   
3. 观察我的配置文件你会发现，我采用的是cjs的模块化语法，因为这个配置文件是在服务端运行的。接着我们观察浏览器的运行效果，如下
   
4. 观察运行结果，你会发现，vue文件的内容也被重写为js了，同样响应头的内容类型也是js文件

Less/Sass的处理

1. 创建less类型文件，安装less依赖，在main.js中导入.less文件，less中我们给id为app的div设置了宽高和背景
   
2. 观察浏览器运行结果，查看less文件内容和控制台，如下
   
3. 分析可知，less文件中不是我们的原始内容，我们编写的样式被转译为字符串，同时赋值给_vite_css，并调用updateStyle函数。控制台中提示less文件没有提供默认导出
4. 思考一下，控制台提示说明了浏览器是将.less文件当作js文件来处理的，同时less内容确实被转译为了js。
5. 为了解决没有默认导出的问题，查看vite官网我们可以知道，借助less的模块化，将.less文件名改为less.module.less，即可实现模块化，如下
   
6. 浏览器运行结果如下
   
7. 本次浏览器成功运行了，但是我们less文件样式没有生效，页面中没有一个蓝色的盒子。

1. 1. 我们先分析一下less文件内容，发现改变less文件名后，less转译的文件中多了一个默认导出和分别导出语句，导出的变量是我们在less中定义的id名和一个随机值。
   2. 随机值是什么作用呢，注意观察_vite_css的样式字符串内容，会发现上次我们的样式字符串是原样复制的我们的less文件，而本次选择器名称被替换成了随机值，也就是如果我们再想使用这个样式就必须设置类名为新的随机值
   3. 控制台输出的我们导入的less文件是一个原始类名和对于随机值的一个映射。而非样式字符串，所以当我们要是有该样式时，需要获取导入的这个对象的原始类名对于的随机值才可生效
   4. 对于标签选择器，则是原样复制，不在演示，可自行实验
   5. 那这个转译后的样式字符串是如何生效的呢，答案就在图中，通过调用了updateStyle函数实现的，我们可以看一下这个函数的内部实现，如下
      
   6. 函数内部创建了style标签，将样式字符串追加进去，并将style标签添加到html文件的head中，我们可以看下element面板，看下最终的效果，如下
      

Svg的处理

1. 新建svg文件，如下
   
2. 浏览器运行结果如下
   
3. 观察运行结果可知，svg资源文件导出的是文件的路径，这个路径可以作为图片的src属性设置
4. 我们在创建一个webp文件并导入，查看结果如下
   

总结

1. 对于浏览器不可识别的内容转换为可识别的内容，借助esbuild进行转译
2. 对于浏览器可识别的内容进行兼容性处理，借助babel，postcss等
3. 对于资源文件将内容替换为js，将文件的路径导出
4. 即vite会将所有文件内容处理为js内容，默认导出部分值，并向浏览器声明为js文件。实现即使后缀不同仍然能识别，同时可以采用模块化语法导入