4.2.3.0 现代前端技术栈导读

在前端开发的过程中，随着复杂度的提高，前端工具链开始高度工程化，从构建工具（如 Webpack、Vite）到包管理器（npm、Yarn），再到各种辅助工具（ESLint、Prettier），整个开发流程高度自动化。简单地说，一系列的负责一部分小功能的工具加在一起，在一个大框架的管理下面，组成了项目的工作流程。我们很快就能看到。

这张图比较夸张地展示了现代前端可能用的的各种工具，软件，框架，库和一些其他程序，前端开发者也一直受到这种碎片化的苦恼。我们的教程无力全部介绍这些软件，所以我主要选择介绍这些工具大致的类别，以及在每类工具中选择一个来构建我们的第一个工具链。

我们强烈建议阅读 MDN: 客户端工具概述 来获得基础的认知，因为这里还是有点难以理解的。

顺便提一下，如果有谁不知道命令行的基本使用，请阅读 MDN: 命令行速成课，我们后续会用到很多。

另外，我必须要说明一件事情：对于我在这个模块提到的东西，你只要记住原理即可，不要试图记住所有细节，如果你对某个框架有问题，你可以使用包括查官方文档，上网搜索，求助他人等方法，而且推荐在用到的时候再去查找 —— 再次重申不要试图记住所有细节，互联网可以帮助你的。有问题的话也可以随时回看这篇文章。

模块内容介绍

这里尽量每小段用一句话介绍我们本模块要提到的内容。

Git 与 Github

Git 是版本管理的工具，Github 是代码托管平台，可以把 Git 项目丢上去。我希望大家记住并理解这句话。

现代前端构建工具

这里提到的这些软件提供了我们的基本运行环境和构建工具。

框架和库

类型系统

TypeScript 的编译器可以将 TypeScript 代码转换为标准 JavaScript，现代前端框架会将这个编译器融入工具链。

React 框架

React 是一个开源 JavaScript 库，用于构建用户界面，主要用于单页应用程序。它由 Facebook 开发和维护，允许开发人员创建可重复使用的 UI 组件，这些组件可在数据更改时高效更新和渲染。

UI 组件库

CSS 处理

TailwindCSS: 实用工具优先的 CSS 框架，通过类名来快速构建布局和样式。

UI 组件库

AntDesign: 一个企业级的 UI 组件库，提供丰富的可复用 UI 组件。