工具管理

Vite开发服务器搭建原理以及如何识别.vue 文件

1 .node 拉起一个服务，返回所有请求的数据
2 .比如index.html
3 .比如app.vue
4 .本质上都是fs模块读取文件，然后根据路径设置content-type

1 .ctx.response.set('Content-type','text/javascript')
2 .如果是app.vue 这种文件，是会做一个字符串替换，类似于webpack的loader，先把.vue文件处理，然后在返回js文件

vite 处理css文件

1 .vite天生支持对css文件的处理
2 .直接用fs模块去读取css文件中的内容
3 .直接创建一个style标签，将css文件内容直接copy进入style标签里
4 .将style标签插入到index.html里面
5 .将css文件的内容直接替换为js脚本，方便热更新或者css模块同时设置content-type为js，让浏览器以js脚本的形式来执行该css后缀的文件
6 .css module

1 .基于node
2 .开启css module 之后，会把css文件先导出为一个对象，将所有类名进行一定规则的替换
3 .比如讲footer 替换为footer_123
4 .同时创建一个映射对象，{footer:footer_123}
5 .将替换后的内容塞进style标签里面然后放入到head里面

7 .开始的css样式

/* post.css */
.article {
  font-size: 16px;
}

.title {
  font-weight: 24px;
}

8 .编译之后的样式

.xkpka {
  font-size: 16px;
}

.xkpkb {
  font-size: 24px;
}

9 .被打碎的css文件会生成一个json配置

`{  "article":  "xkpka",  "title":  "xkpkb"  }  `

10 .https://postcss.org/
11 .我们直接使用的是上面生成的json的value值，所以不会出现重复
12 .less,sass也是可以用postcss来实现的，但是现在这俩都停止维护了.less自己插件一旦发生更新，postcss-less 也是需要更新的

post-css-module

1 .保证css在执行起来是万无一失的，原生的新css语法，能否兼容
2 .less 是不支持这些东西的，有点类似于babel
3 .前缀补全。

preprocessorOptions

1 .用来配置css预处理的一些全局参数
2 .less 文档里面的options里面的配置这里都可以穿进去

preprocessorOptions:{
  less:{
  math:"always"
//padding:(100px/2):这种写法可以转成50px
},
sass:{
  
}
}

devSourceMap:true

1 .文件之间的索引
2 .true。chrome控制台会跳转到源css文件

vite 配置文件中css配置流程

1 .postcss 不会编译全局变量，--globalcolor:red;
2 .postcss是单个解析css文件的。当在后面的css类里面遇到--globalcolor的时候，他是不会记着全面的变量的
3 .所以这些全局的css变量，写在variable.css 里面.我们使用的一些未来的css特性是不需要经过less,sass的预处理器进行编译的，我们只能交给postcss来处理

postcssPresetEnv(
          {importFrom:path.resolve(__dirname,'./variable.css')}
        ),