Vite从入门到精通，玩转新时代前端构建法则
wen 2022/4/21 天下无鱼
源链接：https://coding.imooc.com/class/523.html (opens new window)
行业抢先推出的系统实战课，尽早掌握下一代前端核心工具
Jokcy：Vite 因为其跨前端框架的能力和极其优越的性能，被称为下一代前端构建工具。如果你想在未来几年有更好的发展空间，那么最好尽早学会 Vite。 我们将从如何配置使用入手，深入到 Vite 的场景、插件以及源码，帮助大家系统掌握 Vite，全面提升对前端构建的认知，更能自行构建项目，为进阶前端架构师打下坚实的基础。
# 1. Vite 的概要介绍
- Vite 特点：开发时效率极高、开箱即用功能完备、社区丰富兼容 rollup、超高速热重载、预设应用和类库打包模式、前端类库无关。
- 课程目标：掌握 Vite 使用、理解 Vite 原理、对于前端构建的认知。构建是现在前端逃不开的话题，前端框架时代、前端应用越来越复杂、学习构建就是提升自己的重要过程。
- 课程内容：Vite 的使用、Vite 插件开发和实战、Vite 源码解析。
# 什么是 Vite
- 构建工具的高阶封装，内部使用的是其它构建工具（rollup、esbuild），最核心的是 rollup。
- 框架无关。
- 目标：使用简单、快、便于扩展。
- 类似产品：Snowpack、WMR、@web/dev-server。
# Vite 对比其他构建工具的优势
- 区别：High Level API、不包含自己编译能力、完全基于 ESM 加载方式的开发。
- Webpack 更全面、rollup 更专一、Vite 更好用 -- Vite 是为项目而生的，而不是为构建而生的，减少了很多配置量。
- 减少的工作：dev server、各类 loader、build 命令。
# 【拓展知识】前端构建工具发展史
# 【讨论题】谈谈你对于构建工具的认识
- 用过哪些构建工具，觉得哪个更好用：自己配置过的构建工具，直接用 vue-cli / create-react-app 不算，需要知道底层工具，并且进行过配置，搭配命令启动或者脚本启动。
# 2. Vite 的基础应用
# Vite 的优势
- 优势：上手非常简单、开发效率极高（esbuild）、社区成本低（兼容 rollup 插件）、没有复杂晦涩的配置。
- 更合理的类比：vue-cli / create-react-app（修改配置时还是要碰 webpack）。【1】vue-cli：configureWebpack 和 chainWebpack；【2】create-react-app：eject。
- Vite 有自身的插件系统。
- 生态：兼容 rollup 插件。
# Vite 创建 Vue3 项目
# Vite 创建 Vue2 项目
# Vite 创建 React 项目
- react 热更新工具：
react-hot-loader-->FastRefresh。 - FastRefresh 优势：解决了很多 react-hot-loader 无法解决的问题；速度更快；支持局部更新。
