这是我参与「第四届青训营 」笔记创作活动的第二天
why vite & 上手使用
浏览器原生ESM支持：
在script标签内引入模块，浏览器在发现这个import语句后发起请求，请求foo.js模块，解析出它的foo字段导出
使用ESM模块导入导出语法是在script标签内和js脚本中
基于原生ESM的开发服务优势：
基于浏览器的功能，vite开发了一套dev server，让浏览器最终能拿到的是能识别的js代码。dev server 把浏览器的请求进行承接、编译，把浏览器能识别的语法响应给浏览器。
现在模块的密度已经达到文件级别，当文件变更时不会导致bundle失效，只会导致当前的请求缓存失效，可以达到更细密度的浏览器缓存。
基于原生的语言编写工具——Esbuild
vite默认集成度很高，vite对常见的web开发需求进行了一个封装，内置了一些默认的最佳实现。
scripts里的三个命令：
dev——在开发阶段启动vite的dev server
build——在生产环境下进行项目的打包（tsc编译，进行类型检查，因为vite提供的esbuild并没有提供ts支持；vite build生产环境打包），底层roll-up
preview——通过生产模式打出产物后怎么预览产物的内容
Sass/Scss & CSS Modules & 使用静态资源 & HMR & Tree Shaking
.modules.scss结尾的文件会默认当做css modules文件来处理
scss可以进行样式上的嵌套，提高开发效率。
HMR在进行代码改动后仍保留原本组件状态
关闭代码压缩功能：（minify:false）
pnpm run build 生产环境打包
vite整体架构
开发阶段内容：
生产环境内容：
vite插件机制：两种环境共用
！ （单文件编译）用Esbuild需要注意的点是，不支持类型检查，所以在生产环境构建时，要调用一次tsc。
！ （插件）不是所有的rollup插件都适用于vite
为什么需要插件 之 抽离核心逻辑 解释：
把dev-server抽离出来，把构建相关的功能封装成一个个插件，达到一个解耦的效果，就是构建和dev逻辑分开了，更利用维护。
vite插件钩子：
重点掌握config、resolveId、load、transform
ESM规范走向大一统趋势，有必要了解。
esm的原生加载（node、浏览器 都支持了）
\
