Vite 从入门到精通，玩转新时代前端构建法则

第1章 Vite 的概要介绍 5 节 | 25分钟

本章将向大家介绍什么是 Vite、Vite 的特色，并辅以介绍前端构建工具的发展历史进行对比，帮助同学们对 Vite 有个初步的印象。

1-1 关于课程你需要了解的都在这里 (08:44)

1-2 什么是 Vite (07:15)

1-3 Vite 对比其他构建工具的优势 (08:52)

1-4 [拓展知识]前端构建工具发展史

第2章 Vite 的基础应用 9 节 | 111分钟

本章中我们会学习，如何使用 Vite 搭建不同前端框架的项目，如何配置一些常见的功能比如 CSS、静态文件等来达到日常使用的目的。

2-1 Vite 的优势 (10:22)

2-2 Vite 创建 Vue3 项目 (12:22)

2-3 Vite 创建 Vue2 的项目 (08:30)

2-4 Vite 创建 React 的项目 (07:21)

2-5 Vite 中使用 CSS 的各种功能 (15:47)

2-6 Vite 中使用 Typescript (21:19)

2-7 Vite 中处理静态资源的方法 (09:44)

2-8 Vite 集成 eslint 和 prettier (12:38)

2-9 Vite 中得 env 环境变量 (12:21)

第3章 Vite 的高级应用 10 节 | 118分钟

本章讲解 Vite 的一些高级功能，比如热更新，服务端渲染，集成到 node 服务中等，让同学们在遇到一些特殊情况时也能够得心应手。

3-1 [知识拓展]什么是热更新

3-2 Vite 中的 HMR 热更新功能 (14:02)

3-3 Vite 的 glob-import 批量导入功能 (10:18)

3-4 Vite 性能揭秘—预编译优化 (11:35)

3-5 在非 Node 服务中集成 Vite (18:17)

3-6 Nodejs 集成 Vite 开发时的 SSR (16:39)

3-7 Node 集成正式 build 的 Vite 应用的 SSR (15:12)

3-8 通过 SSR 功能实现静态站点导出 (11:54)

3-9 Vite 配置项一览 (19:55)

第4章 Rollup 系统学习 11 节 | 137分钟

Vite 的内核是围绕 Rollup 进行构建，因此，想要更好得理解 Vite 学习 Rollup 是必须的。本章将一起学习 Rollup 的核心应用。

4-1 Rollup 介绍 (10:36)

4-2 [知识拓展]ES Module详解

4-3 Rollup 的命令行使用 (19:37)

4-4 Rollup 配置文件使用 (18:38)

4-5 Rollup 插件功能解析（上） (14:59)

4-6 Rollup 插件功能解析（下） (19:28)

4-7 Rollup 常用插件盘点 (13:32)

4-8 Esbuild 的使用教程 (19:03)

4-9 Esbuild 插件的开发方式 (20:43)

第5章 Vite 插件系统详解9 节 | 123分钟

本章详细介绍 Vite 的插件系统，包括插件能做什么、如何实现的、并通过讲解官方的Vite-Vue3-jsx 插件的源码来讲解 Vite 插件的实现原理。

5-1 Vite 插件开发概述 (08:58)

5-2 Vite 插件的执行时机 (09:22)

5-3 Vite 插件 API 详解 (15:22)

5-4 HMR-API 详细解析（上） (14:57)

5-5 HMR-API 详细解析（下） (17:50)

5-6 vite-vue3-jsx 插件概览 (09:49)

5-7 vite-vue3-jsx 插件源码解析之配置和产出 (17:44)

5-8 vite-vue3-jsx 插件详解之 HMR (18:18)

5-9 vite-vue3-jsx 插件解析之 SSR (10:20)

第6章 实战 Vite 插件 11 节 | 135分钟

本章将带领同学们实现一个真实可用的 Vite 插件。应用该插件，可以轻松实现用 MDX语法来写页面，并且可实现主题切换内置组件等功能，让你快速搞定静态页面。

6-1 [拓展知识]Ast语法树介绍

6-2 MDX 语法介绍和插件设计 (08:05)

6-3 MDX 的使用以及 mdx-loader 的原理 (16:07)

6-4 MDX 如何配合 React 使用 (15:55)

6-5 插件 Vue 版本基础实现 (13:45)

6-6 Vue3 的 mdx 函数实现 (24:46)

6-7 Vite-mdx 插件 vue3 联调 (10:08)

6-8 Vite-mdx 插件集成 react (13:59)

6-9 Vite-mdx 插件进一步完善 (08:14)

6-10 独立开发 vite-mdx 插件并发布到 npm (17:52)

6-11 解决发布 vite-mdx 插件的问题 (05:15)