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 组件库

Ant Design 是阿里开源的一个组件库。

CSS 处理

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

UI 组件库

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