theme: Chinese-red
在目前的前端生态中， Vite 正在成为下一代的前端工具链。相比于传统的 Webpack，它让前端开发者的开发效率有了质的提升。
一方面，它基于 Esbuild 以及浏览器 ES Module 的特性，让项目的启动和热更新速度明显加快，提升了前端开发者的幸福感；另一方面它兼容了 Rollup 的插件机制，在社区形成强大且丰富的生态。经过两年多的发展，Vite 的 star 数量已经达到 50 k，社区中也诞生了许多基于 Vite 的上层框架，产生了非常多的社区插件。因此，深入地学习和掌握 Vite 对于提升自身竞争力，拓宽技术发展道路来说都是一个非常好的选择。
这一点，神三元同学就非常有感触，他作为一名深耕在一线的前端工程师，近几年来一直从事前端工程化相关的工作，主要就是跟各种前端框架和构建工具打交道，Vite 就是他经常会用到的工具。
在 Vite 2.0 发布后的一段时间，神三元还给 Vite 贡献过一些比较有深度的 PR，作为 Vite 的 contributor，在 GitHub 上也写过一些开源项目，比如：
- Vite 拆包插件 webpack-inspector
- 基于 React 的 SSG 框架 《深入浅出 Vite》中详细讲解过了。这一次，神三元将以**「视频+文字」**讲解的形式，带大家基于 Vite 做一个完整的实际项目。
一个真实的，仍然在维护中的实战项目
简单来讲，这门课会带大家基于 Vite 和 React 手写一个
- 造轮子的过程涉及诸多工程化的环节，如开发阶段热更新、单元测试、E2E 测试、代码规范、持续集成和部署等，需要你对前端工具链和业界生态有足够多的积累；
- 在开发框架的过程中需要我们频繁地接触底层的构建工具，甚至要自行编写插件去自定义工具的行为，需要我们对构建工具本身有深入理解。
因此，三元同学将带大家从 0 到 1 实现一个真实的、仍在维护中的开源项目 islandjs.dev 访问官方站点。
官方站点也是采用 Island.js 搭建的，并且使用的是 Island.js 内置的一套默认 UI 主题。
举个例子，下图是一张文档详情页面，它包含了作为文档站的基本要素，有侧边栏、导航栏、正文内容和目录内容。
你可能会说，这么看好像也没什么特别的啊？事实上，这些模块都是通过框架自动生成的！在这里，用户只需要做一些简单的配置，专注于编写 Markdown 的内容，完整的页面就能自动出现了，是不是听起来非常酷？不光是文档详情页面，官网首页、API 页面也都能这样做出来。
跟上课程安排，实现类
首先是前期准备阶段，我们会开发出 MVP 版本，搭建好项目的开发工作流。
在 MVP 版本开发部分，我们会用最精简的教大家搭建起项目的 MVP 版本，实现传统的 SSR 同构架构，讲解 CSR 、SSR、 SSG 这些渲染模式的原理。
在工作流的搭建部分，我们会教大家从 0 搭建起项目所需要的基础设施，包括库构建工具、单元测试与 E2E(端到端) 测试环境，以及怎么接入代码规范工具。
接着就正式地进入到项目的核心功能开发阶段了。
在配置文件的解析开发环节，我们会带大家设计配置文件的结构，开发一个通用的配置解析器。
在构建核心层开发环节，我们会进行约定式路由的开发，带大家完成我们的第一个 Vite 插件，根据文件系统自动生成 React 组件的路由信息。
MDX 工具链 开发环节，我们将在这个环节系统地学习 Markdown 编译相关的生态以及工具链，接入一些常见的 Markdown 编译插件，当然也会较大家如何去自定义 Markdown 编译插件，从而完成一些定制化的功能需求。
主题 UI 的开发环节，我们将基于 React 完整地实现页面的核心 UI 模块，并完成页面的各种交互能力。当然了，在实战中，我们也不可避免地会遇到一些疑难杂症，比如组件热更新失效的问题，我们也会带你详细地拆解这些问题，一步步将它们解决掉。
然后，我们会来到整门课程难度最大的一章，也就是基于 Islands 架构的服务端渲染层开发。Islands 架构是业界比较新的一个 SSR 架构趋势，相比于传统的 SSR 同构方案，会带来非常深度的性能优化。我们将带大家仔细地剖析 Islands 架构的实现原理，带你一步步地搭建起整体的构建与运行时系统。 这也是目前社区非常稀缺的资料，相信学习完后能够对你的实战能力和技术视野有很大提升！
开发好基本功能后，我们还会带大家学习持续集成和部署，也就是做 CI、CD 的流程编排，最后安全地发布一个 NPM 包到社区。
总的来说，这门课程一方面可以让大家在实战中加深对 Vite 构建工具的理解，从真实的场景当中学习到 Vite 的使用技巧与注意事项，另一方面也是带大家通过项目来深入地学习前端工程化领域相关的知识，提升工程化的实战能力。
视频+文字，手把手带你造轮子
因为课程里面会涉及非常多的细节，所以这一次神三元将充分利用视频的优势，为你详细讲解关键代码的思路，以及有哪些潜在的问题，甚至会直接打断点带你分析代码的变量结构和执行状态，这会比直接看文字稿和代码注释更容易理解。
当然了，每段视频都有文字稿，如果你想快速的回顾小节的内容，或者纯粹喜欢文字的形式，那也可以直接阅读文字稿。
那需要什么样的基础才能学习这门课程呢？虽然课程是视频+文字讲解，但如果你没有学过 React 组件和 TypeScript，不了解常用 Node.js 的模块，如 fs、path，那我建议你先掌握一些基础语法之后再来学习。
早鸟特惠，直降 79 元
如果你正缺一个真正的 Vite 实战项目练手
如果你刚好想在前端工程化领域更进一步
如果你想要接触并掌握现代化的前端技术栈
千万别错过这次实战与交流的机会，和字节跳动工程师神三元一起提升你的技术能力吧！
现在购买，享受早鸟特惠，直降 79 元！
赶紧
点击下方图片或者扫描海报二维码，一起加入学习吧！
暂无评论内容