使用 Node、npm 和 Vite 构建 React 前端

从 Python 工具链转向 React 项目时，通常会先遇到一个简单的问题：哪些工具可以替代 venv、pip 和 requirements.txt？

Python 通过虚拟环境隔离包，并在需求文件中指定这些包的版本。而 React 前端则使用不同的技术栈——Node.js 提供运行时环境，npm 用于安装包，Vite 则负责搭建快速的本地应用框架。以下步骤将帮助你在空文件夹中构建 React 加 Vite 的开发环境。

1. 安装 Node.js

React 工具链需要 Node.js，它附带了 npm（Node 包管理器）。从适用于你操作系统的官方渠道安装 Node 后，可在终端中确认这两个程序的存在：

node --version
npm --version

npm的作用与pip类似：它负责下载库文件并记录项目的版本信息。在这种工作流程中无需创建独立的Python风格虚拟环境，Node以及项目内的node_modules目录即可实现隔离。

2. 创建GitHub仓库

为该网站创建一个新的GitHub仓库。在其中添加适合前端开发的README.md文件和.gitignore文件。至少，忽略列表中应包含以下内容：

node_modules/
dist/
.env
.env.*

绝不要将node_modules目录提交到版本控制中。这些包只是本地生成的文件，任何克隆该仓库的人都可以通过npm install根据package.json重新生成它们。同时也要避免将敏感信息放入Git中：.env及.env.*文件应被列入忽略列表，这样API密钥就不会出现在版本历史记录中。

3. 在本地克隆或打开项目

克隆该仓库或在磁盘上创建相应文件夹，然后在VS Code（或其他编辑器）中打开它。在該目录下进行操作可以确保 Vite 的脚手架结构以及后续的 npm 命令都位于正确位置。

4. 使用 Vite 初始化 React

Vite 为现代前端应用提供了快速启动方式以及响应式的开发服务器。在项目根目录下运行：

npm create vite@latest .

末尾的 . 表示让脚手架将文件直接放在当前目录中，而非创建嵌套文件夹。出现提示时请选择：

Framework: React
Variant: JavaScript

某些版本还会询问是否需要安装代码检查工具。选择安装有助于尽早发现语法和样式问题，之后可再调整相关规则。

5. 安装依赖项

如果脚手架没有自动安装包，请运行：

npm install

npm会读取package.json，创建node_modules目录，并安装其中列出的所有依赖项。该目录体积较大且因机器环境不同而有所差异，因此不会被纳入版本控制。

6. 启动开发服务器

可通过以下命令启动本地服务器：

npm run dev

Vite会输出一个本地URL，通常为：

http://localhost:5173/

在浏览器中打开该地址。在开发过程中，编辑并保存React源代码后，页面会通过Vite的热更新功能自动刷新，这样你无需每次都手动完全重新加载即可看到界面变化。

Python与React：对我有帮助的区别

消除混淆的对应关系如下。典型的Python项目流程为：

Python → venv → pip → requirements.txt

React结合Vite的项目流程则为：

Node.js → npm → package.json → node_modules

React 项目组合不需要Python 的 venv 环境。Node.js 是运行时环境，npm 负责安装，package.json 用于记录项目配置，而 node_modules 中则存放已安装的包。将这些功能区分开，可以避免将 Python 的使用习惯带入 JavaScript 前端。

总结

如果来自 Python 或数据科学领域，最初可能会觉得以 Node 为中心的架构不够直观，直到明白每个工具的具体作用。一旦掌握了 Node.js、npm、React 和 Vite 的用法，后续开发就会变得简单：

Create repository
        ↓
Open project in VS Code
        ↓
Initialize React + Vite
        ↓
Install dependencies
        ↓
npm run dev
        ↓
Build!

一旦这套工具链搭建完成，React 前端环境就准备好用于项目展示以及通过 npm 添加更多库了。