React 开发环境搭建

安装 nvm

nvm 是运行 Node.js 的流行方式。它允许你轻松切换 Node.js 版本，并安装新版本以尝试在出现问题时轻松回滚，它适用于任何符合 POSIX 的 shell 环境。因此在 Windows 中，最好是使用 WSL 来进行开发。

安装 nvm 非常简单，可以直接通过如下的命令来进行安装。

bash 复制代码

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.2/install.sh | bash

具体的 nvm 版本，你可以在 https://github.com/nvm-sh/nvm 中进行查看，以安装最新的 nvm 版本。

安装 Node.js

当你安装好了 nvm 之后，就可以安装 Node.js 了。

要下载安装最新版本的 node，请执行以下命令：

复制代码

nvm install node

要安装特定版本的 node，请执行以下作：

复制代码

nvm install 14.7.0

要设置别名：

复制代码

nvm alias my_alias v14.4.0

安装的第一个版本将成为默认 nodejs 版本。新打开的 shell 环境中的也将是默认版本。

可以使用以下方法列出所有可用的 nodejs 版本

复制代码

nvm ls-remote

上述命令列出的 nodejs 版本中会包含 LTS 版本，一般而言，推荐安装 nodejs 的 LTS 版本，即长期支持版本。

如果要查看已安装的版本, 可以执行以下命令：

复制代码

nvm ls

切换 nodejs 版本，可以执行以下命令，即可切换到指定的版本：

复制代码

nvm use 16

npm介绍

npm 是 Node.js 的包管理工具，它允许你安装和运行 Node.js 的第三方模块。它的使用非常简单，我们可以通过 npm install xxx 来安装指定的软件包，默认情况下软件包会被安装到当前文件树中的 node_modules 子文件夹下。在这种情况下，npm 还会在当前文件夹中存在的 package.json 文件的 dependencies 属性中添加 xxx 条目。

安装包：

复制代码

npm install <package-name>@<version>

可以只指定包名称，不指定版本，版本是可选项，默认会安装最新的版本。

卸载软件包：

复制代码

npm uninstall <package-name>

更新指定的包：

复制代码

npm update <package-name>

更新所有包：

复制代码

npm update

更新所有包的时候，npm 将检查所有包是否有满足你的版本控制约束的更新版本。推荐在项目下使用 npm update 命令，这样 npm 会检查当前项目下所有依赖的包是否有更新版本。

查看所有已安装的 npm 软件包

复制代码

npm list

查看软件包在 npm 仓库上最新的可用版本：

复制代码

npm view [package_name] version

列出软件包所有的以前的版本：

复制代码

npm view react versions

package.json介绍

package.json 文件是项目的清单。其中包含了项目的依赖项，比如 Node.js 的版本，依赖项，开发依赖项，脚本等。其中比较重要的字段有以下部分。

version 表明了当前的版本。
name 设置了应用程序/软件包的名称。
description 是应用程序/软件包的简短描述。
main 设置了应用程序的入口点。
private 如果设置为 true，则可以防止应用程序/软件包被意外地发布到 npm。
scripts 定义了一组可以运行的 node 脚本。
dependencies 设置了作为依赖安装的 npm 软件包的列表。
devDependencies 设置了作为开发依赖安装的 npm 软件包的列表。
engines 设置了此软件包/应用程序在哪个版本的 Node.js 上运行。
browserslist 用于告知要支持哪些浏览器（及其版本）。

package-lock.json介绍

在 npm 5.0.0 版本后，npm 引入了 package-lock.json 文件，该文件旨在跟踪被安装的每个软件包的确切版本，以便产品可以以相同的方式被 100％复制（即使软件包的维护者更新了软件包）。

确保依赖版本的一致性（Version Locking）

package.json 允许使用版本范围（如 ^1.2.3 或 ~1.2.3），这样不同环境（比如开发环境和生产环境）可能会安装到不同的依赖版本，导致 "它在我电脑上可以跑" 这种经典问题。

package-lock.json 记录了每个安装的确切版本，确保所有开发者、CI/CD、生产环境安装的都是同一个版本，避免版本漂移问题。

提高安装速度（Performance Optimization）

package-lock.json 记录了依赖的完整解析信息（包括 resolved URL 和 integrity 哈希值），这样 npm 可以直接使用这些信息下载依赖，跳过解析 package.json 的过程，提高安装速度。

防止间接依赖变化

package.json 只管理直接依赖，但实际安装的模块可能还有间接依赖（transitive dependencies）。

package-lock.json 记录了所有直接 + 间接依赖的版本，确保即使某个间接依赖发布了新版本，也不会影响现有项目。

npx介绍

npx 是一个非常强大的命令，从 npm 的 5.2 版本（发布于 2017 年 7 月）开始可用。npx 可以运行使用 Node.js 构建并通过 npm 仓库发布的代码。

Node.js 开发者过去通常将大多数可执行命令发布为全局的软件包，以使它们处于路径中且可被立即地执行。这很痛苦，因为无法真正地安装同一命令的不同版本。

npx 的另一个重要的特性是，无需先安装命令即可运行命令，这非常有用，主要是因为：

不需要安装任何东西。
可以使用 @version 语法运行同一命令的不同版本。

例如，可以直接使用 create-react-app 创建新的 React 应用：npx create-react-app my-react-app

创建React项目

创建 React 项目最简单的方法是使用 npx 命令。

复制代码

npx create-react-app my-app

这样就可以创建一个名为 my-app 的 React 项目了。