这是我参与「第五届青训营 」伴学笔记创作活动的第 14 天
一.为什么需要构建工具
前端工程的痛点
模块化：ESM、CommonJS、UMD 资源编译：高级语法的编译 产物质量：代码体积、代码性能 开发效率：热更新
前端构建工具的意义
模块化方案
- 提供模块加载方案
- 兼容不同模块规范
语法转译
- 高级语法转译
- 资源加载
产物质量
1.产物压缩 2.无用代码删除 3.语法降级
开发效率
热更新
二.新一代构建工具vite
vite是什么
vite是新一代前端构建工具 它有两大组成部分: 1.No-bundle 开发服务，源文件无需打包 2.生产环境基于Rollup的Bundler 这极大的简化了我们的开发流程 它的核心特征是: 1.高性能，dev启动速度和热更新快 2.简单易用，开发者体验好
原生ESM的优势
无需打包项目源代码 天然的按需加载 可以利用文件级的浏览器缓存
三.vite上手使用
# 全局安装pnpm包管理工具
npm install -g pnpm
# 创建vite项目
pnpm create vite
# 安装依赖
pnpm install
# 开发环境下运行vite项目
pnpm run dev
vite项目引入scss也十分便捷，并且无需额外配置，自动支持HMR。而且无需配置Tree shaking，vite项目初始化时已经配置好了。
四.vite整体架构
1.依赖预打包
避免node_modules过多的文件请求 将CommonJS格式转换为ESM格式
2.单文件编译
使用esbuild编译ts/jsx时可以将编译速度提升10到100倍，缺点就是不支持类型检测和语法降级。
3.代码压缩
使用压缩性能最高，效率最快的esbuild作为打包工具，极大的加快了打包速度，提高了开发效率。
4.插件机制
在开发阶段可以模拟rollup插件机制，生产阶段能直接使用rollup
五.vite进阶路线
在可以熟练使用vite后就可以对他的打包构建工具rollup和esbuild进行深入学习，再继续探索vite插件开发，可以在vite的开源社区里找到很多有用的插件借鉴学习。
