📚 课程介绍
本课程全面讲解Vite的前端构建工具的使用,从基础到高级,包括插件系统、源码解析、实战案例等,适合前端开发者提升构建工具技能。
📋 学习前提
1. HTML/CSS基础(网页结构和样式语言) 2. JavaScript基础(网页交互编程语言)
📖 课程目录
第1章 Vite的概要介绍
1-1 关于课程你需要了解的都在这里
1-2 什么是Vite
1-3 Vite对比其他构建工具的优势
第2章 Vite的基础应用
2-1 Vite的优势
2-2 Vite创建Vue3项目
2-3 Vite创建Vue2的项目
2-4 Vite创建React的项目
2-5 Vite中使用CSS的各种功能
2-6 Vite中使用Typescript
2-7 Vite中处理静态资源的方法
2-8 Vite集成eslint和prettier
2-9 Vite中的env环境变量
第3章 Vite的高级应用
3-1 Vite中的HMR热更新功能
3-2 Vite的glob-import批量导入功能
3-3 Vite性能揭秘—预编译优化
3-4 在非Node服务中集成Vite
3-5 Nodejs集成Vite开发时的SSR
3-6 Node集成正式build的Vite应用的SSR
3-7 通过SSR功能实现静态站点导出
3-8 Vite配置项一览
第4章 Rollup系统学习
4-1 Rollup介绍
4-2 Rollup的命令行使用
4-3 Rollup配置文件使用
4-4 Rollup插件功能解析(上)
4-5 Rollup插件功能解析(下)
4-6 Rollup常用插件盘点
4-7 Esbuild的使用教程
4-8 Esbuild插件的开发方式
第5章 Vite插件系统详解
5-1 Vite插件开发概述
5-2 Vite插件的执行时机
5-3 Vite插件API详解
5-4 HMR-API详细解析(上)
5-5 HMR-API详细解析(下)
5-6 vite-vue3-jsx插件概览
5-7 vite-vue3-jsx插件源码解析之配置和产出
5-8 vite-vue3-jsx插件详解之HMR
5-9 vite-vue3-jsx插件解析之SSR
5-10 vite-vue3-jsx插件解析之SSR
第6章 实战Vite插件
6-1 MDX语法介绍和插件设计
6-2 MDX的使用以及mdx-loader的原理
6-3 MDX如何配合React使用
6-4 插件Vue版本基础实现
6-5 Vue3的mdx函数实现
6-6 Vite-mdx插件vue3联调
6-7 Vite-mdx插件集成react
6-8 Vite-mdx插件进一步完善
6-9 独立开发vite-mdx插件并发布到npm
6-10 解决发布vite-mdx插件的问题
第7章 Vite 源码解析
7-1 Vite源码解析-目录结构和构建
7-2 启动Vite 的 createServer
7-3 resolveConfig 解析配置过程解析(上)
7-4 resolveConfig 解析配置过程解析(下)
7-5 pluginContainer 作用和源码解析
7-6 JS 请求处理和模块图谱源码解析
7-7 vite-dev-server 中的 HMR 处理
7-8 vite 预编译优化源码解析
7-9 总结
7-10 【任务题】挑选vite的内部plugin,进行源码解析并分享
