4.2.3.2 现代前端构建工具

这节我们要介绍现代前端的构建工具，给大家建立起对构建工具的直观认知。通过这个介绍，你以后去网上找 "vite+react+ts+eslint" 这类模板做代码填空的时候可以知道自己在干什么，出了问题大概应该找这里面哪个词对应的库。不要连去问别人问题都说不清楚用的哪个库出问题。

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

我们介绍我们将要使用的工具链。

Node.js 运行环境

Node.js 提供了一个独立于浏览器的运行环境 (runtime environment)，前端构建工具几乎都使用 Node.js 运行。

这里我们假设你已经按照 4.2.1.2 开发环境配置 配置了我们的开发环境。

NPM 包管理

npm 是 Node.js 项目的包管理器，最主要的功能是管理本地 Node.js 项目的依赖库。

可以根据 MDN: 软件包管理基础 这篇教程来学习。

MDN 会让你使用 Parcel 框架完成它的实验，你可以跟着他做一遍。而我们接下来会使用 Vite 框架，这是一个基于 rollupjs 的脚手架，和 Parcel 的功能差不多。用 Vite 只是因为国内用的人多方便出问题找人。

npm 的管理文件： package.json 。这个文件管理了它所在的文件夹的项目的信息。如果你认真阅读了前文提到的教程，那么你就会知道它大概是什么，可以在需要时阅读 npm Docs: package.json 获取帮助。

package-lock.json 记录实际上安装的库的具体版本。自动生成，无需更改.

Vite 脚手架

Vite 是一个轻量级的框架。

Vite 的配置文件是 vite.config.js ，如果有需要可以查阅 Vite 官方中文网文档：配置 Vite。

这里摘自 Vite 官方中文网文档：开始。我们推荐遇到有关 Vite 的问题可以查阅官方文档：

Vite（法语意为 "快速的"，发音 /vit/ ，发音同 "veet"）是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

• 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热替换（HMR）。

• 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

Vite 是一种具有明确建议的工具，具备合理的默认设置。您可以在 功能指南 中了解 Vite 的各种可能性。通过 插件，Vite 支持与其他框架或工具的集成。如有需要，您可以通过 配置部分 自定义适应你的项目。

Vite 还提供了强大的扩展性，可通过其 插件 API 和 JavaScript API 进行扩展，并提供完整的类型支持。

你可以在 为什么选 Vite 部分深入了解该项目的设计理念。

Eslint 代码检查

ESlint 是一个用来检查项目代码规范的自动化工具。一般来说了解即可很少要手动配置，模板会自己配置好。如果你们需要手动配置的时候自己也多半会了。

实操

可以跟着 MDN: 介绍完整的工具链（英文， 因为中文版过时了） 来学习工具链的部署。他们讲的很详细。

了解大概如何部署之后，就可以跟着我们的教程配置一个我们需要的环境了。

首先找个你想创建项目的文件夹，运行下面的命令，输入项目名称，选择 React TypeScript

$ npm create vite@latest

进入你新建的项目文件夹，在文件夹下运行命令：

$ npm install immer # 安装 immer, 我们下下节 RReact 那里会提到有什么用处

在 4.2.3.5 框架与库 - 组件资源与 CSS 处理 里面我们还要安装 Antd 和 Tailwind CSS，到时候不要忘记了问为什么用不了 Antd 。以及可以选择 4.2.3.6 框架与库 - 状态、路由与数据管理 中的库安装（推荐安装 Zustand）。