基于Vite的SSG框架开发实战,从0到1实现类VitePress框架,手把手带你造轮子

你会学到什么?

  1. 7 大模块,拆解复杂项目搭建全流程;
  2. 场景驱动,基于 Vite 定制底层构建系统;
  3. 视频讲解,实战 SSG 框架开发与优化;
  4. 前沿视角,解读现代化前端技术栈。

课程简介

在目前的前端生态中,Vite 正在成为下一代的前端工具链。 相比于传统的 Webpack,它让前端开发者的开发效率有了质的提升

经过两年多的发展,Vite 的 star 数量已经达到 50 k,社区中也因此诞生了许多基于 Vite 的上层框架,产生了非常多的社区插件。因此,深入地学习和掌握 Vite 对于提升自身竞争力,拓宽技术发展道路来说都是一个非常好的选择。

基于此,本课程将带你深度应用 Vite,手把手教你从 0 搭建一个类 VitePress 的框架,搞懂 SSG 框架的内部实现奥秘,让你在深入掌握这类框架实现原理的同时,也能从造轮子的过程中全方位提升自己的工程化能力和编程水平!

此外,本课程还同时具备如下优势。

  • 内容稀缺,市面上一般只是简单教你如何使用框架的教程,缺乏有深度的实战资料。
  • 全程视频实战,从工程搭建到各个模块的设计和实现,每一小节内容都有实际可运行的代码分支,同时搭配视频实操讲解+文字梳理,满足多种需求。
  • 技术栈前沿,课程中所使用的各种技术栈都是业界比较前沿或者已经成为业界趋势的技术,给你现代化的技术视角。
  • 理论先行,所谓”磨刀不误砍柴工”,对于一些重要的技术点,如HydrationIslands架构等等 ,会专门给大家提前打好基础,保证课程的可实操性。
基于Vite的SSG框架开发实战,从0到1实现类VitePress框架,手把手带你造轮子

具体来说,课程的内容分为七大模块。

  • 原型开发篇:用最少的代码完成 CLI 工具、DevServer 等核心流程的开发,搭建 Demo 版本。
  • 工作流搭建篇:搭建项目构建方案、规范工具工具链和单元测试/E2E 测试环境。
  • 配置解析篇:设计项目的整体配置,完成 TypeScript 配置文件解析的逻辑。
  • 主题 UI 开发篇:基于 React 和 Unocss 开发各个主题 UI 模块。
  • 构建层开发篇:完成约定式路由、MDX 编译插件、开发阶段热更新以及生产环境构建等能力。
  • 服务端渲染篇:基于 Islands 架构完成服务端渲染能力,产出完整的 SSG 产物。
  • 持续集成和部署篇:完成 CI、CD 的流程编排,并发布安全和规范的 NPM 包

在这门课程中,你不仅能掌握诸多现代前端工程化解决方案,拥有搭建大型项目工作流的能力,还能深度应用构建工具 Vite,开发相对复杂的插件来自定义构建流程,理解现代前端 SSR/SSG 框架的实现原理,并拥有从零造轮子的实战经验,全方位提升你的技术能力!

课程目录

开篇:项目介绍及课程安排
框架初体验:环境搭建和功能概览
MVP 版本开发(一): CLI 脚手架、Dev Server 搭建
MVP 版本开发(二):主题组件渲染实现
MVP 版本开发(三):CSR、SSR、SSG 渲染模式原理
MVP 版本开发(四):SSG 核心流程开发
库构建:如何为我们的工具包接入构建方案?
代码规范: 集成项目的编程规范工具链
前端测试:搭建单元测试和 E2E 测试环境
配置解析器:通用配置文件解析逻辑开发
数据整合:整理配置内容、生成站点数据
约定式路由(一):前端路由设计和 Demo 实现
约定式路由(二):Vite 构建插件开发
MDX 编译:整体工具链及生态介绍
MDX 插件集成:常用 remark/rehype 插件集成
rehype 插件实战(一):实现 preWrapper 插件
rehype 插件实战(二): 实现代码高亮插件
remark 插件实战: 实现 TOC 解析插件
热更新:开发阶段 MDX 模块热更新实现
多路由打包:生产环境 SSG 构建功能完善
原子化 CSS:为什么要选择 UnoCSS 开发?
页面数据流:通过 React Context 共享编译时信息
公共导航栏(一):基本结构梳理和 UI 实现
公共导航栏(二):深色模式实现
Home 页面:根据数据自动组装首页内容
侧边栏模块:如何实现自动化的侧边栏生成?
正文页面:核心内容区渲染
TOC 模块:实现丝滑的内容大纲体验
交互逻辑:TOC 相关交互开发
TOC 热更新问题:使用自定义 HMR 事件
Islands 架构:基本实现原理和运行流程
Babel 插件:开发 babel-plugin-island 定制模块编译时
自定义 JSX Runtime:运行时拦截 React 的 JSX Runtime 逻辑
Islands 打包:构造虚拟模块,打包 Islands 组件代码
模板拼接:注入 Islands 组件 bundle 和数据信息
React 多实例:使用 Import Map 和预打包解决多实例问题
自定义 head 实现: 接入 react-helmet-async
生产预览:支持本地预览生产环境产物
持续集成与部署:项目的 CI 部署及 NPM 发包规范
结束语: 如何保持对技术的热爱?

讲师介绍

神三元,字节跳动前端工程师。目前深耕前端工程化构建领域,拥有大量的 Vite 工程化实战和性能优化经验,曾将 Vite 落地到抖音直播 PC 端等公司大型业务中,也是 Vite Contributor。同时也是掘金小册《深入浅出 Vite》和《React Hooks 与 Immutable 数据流实战》的作者。

Like (0)
Previous 2023年3月6日 下午9:42
Next 2023年3月6日 下午10:00

相关推荐

发表回复

Please Login to Comment