从0开始配置 React 开发环境-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_29780089/article/details/146533052

1. 安装 nvm（Node Version Manager）

1.1 为什么要使用 nvm？

nvm 是一个 Node.js 版本管理工具，可以让你轻松切换不同版本的 Node.js。
不同项目可能需要不同的 Node.js 版本，使用 nvm 可以避免版本冲突。

1.2 安装 nvm

根据你的操作系统选择安装方式：

macOS/Linux 用户：

运行以下命令安装 nvm：

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

安装完成后，重新加载终端或运行以下命令：

source ~/.bashrc
# 或者如果你使用的是 zsh：
source ~/.zshrc

验证安装是否成功：

nvm --version

Windows 用户：

Windows 用户可以使用 nvm-windows：

前往 nvm-windows GitHub 下载最新版本的安装程序。
按照提示完成安装。

验证安装是否成功：

nvm version

1.3 使用 nvm 安装 Node.js

通过 nvm 安装 Node.js 的 LTS（长期支持版）：

nvm install --lts

切换到刚刚安装的版本：

nvm use --lts

验证安装是否成功：

node -v npm -v

2. 配置国内镜像

由于 npm 默认使用国外的官方仓库，国内用户可能会遇到下载缓慢或超时的问题。可以通过以下方法切换到国内镜像。

2.1 使用淘宝 npm 镜像

淘宝提供了一个国内的 npm 镜像，地址是：https://npm.taobao.org/。

临时使用淘宝镜像：

npm install --registry=https://registry.npmmirror.com

全局配置淘宝镜像：

npm config set registry https://registry.npmmirror.com

验证是否成功切换：

npm config get registry

2.2 使用 nrm 管理镜像源

nrm 是一个 npm 镜像管理工具，可以方便地切换不同的镜像源。

安装 nrm：
```
npm install -g nrm
```
查看可用的镜像源：
```
nrm ls
```
切换到淘宝镜像：
```
nrm use taobao
```
验证当前镜像源：
```
nrm current
```

3. 使用 Yarn 或 cnpm

3.1 使用 Yarn

Yarn 是 Facebook 提供的一个更快、更稳定的包管理工具。

安装 Yarn：
```
npm install -g yarn
```
验证安装是否成功：
```
yarn -v
```

配置 Yarn 使用国内镜像：

yarn config set registry https://registry.npmmirror.com

在 React 项目中使用 Yarn：
- 安装依赖：
```
yarn install
```
- 启动开发服务器：
```
yarn start
```

3.2 使用 cnpm

cnpm 是淘宝团队提供的一个 npm 客户端，内置了淘宝镜像源。

安装 cnpm：

npm install -g cnpm --registry=https://registry.npmmirror.com

在 React 项目中使用 cnpm：
- 安装依赖：
```
cnpm install
```
  2.启动开发服务器：
```
cnpm start
```

4. 创建和启动一个新的 React 项目

4.1 使用 Create React App 创建项目

运行以下命令创建一个新的 React 项目：

npx create-react-app my-app

进入项目文件夹：

cd my-app

4.2 安装依赖

在项目文件夹中运行以下命令安装依赖：

npm install

如果你使用的是 yarn 或 cnpm，可以分别运行：

yarn install
# 或
cnpm install

4.3 启动开发服务器

运行以下命令启动开发服务器：

npm start

如果你使用的是 yarn 或 cnpm，可以分别运行：

yarn start
# 或 
cnpm start

开发服务器会在浏览器中自动打开默认页面（通常是 http://localhost:3000）。
如果没有自动打开，可以手动在浏览器中访问 http://localhost:3000。

5. 导入已有 React 项目

如果你已经有一个 React 项目（例如从 Git 仓库克隆的项目），可以按照以下步骤导入并运行它。

5.1 克隆项目

假设你已经有一个 Git 仓库地址，可以通过以下命令克隆项目：

git clone <repository-url>

例如：

git clone https://github.com/example/react-project.git

进入项目文件夹：

cd react-project

5.2 安装依赖

React 项目的依赖通常记录在 package.json 文件中。你需要先安装这些依赖。

运行以下命令安装依赖：

npm install

如果你使用的是 yarn 或 cnpm，可以分别运行：

yarn install # 或 cnpm install

5.3 检查环境配置

有些项目可能需要额外的环境变量或配置文件。常见的检查点包括：

.env 文件：某些项目可能需要 .env 文件来存储环境变量。如果项目根目录下有 .env.example 文件，可以将其复制为 .env：
```
yarn install # 或 cnpm install
```
然后根据项目文档填写必要的配置。
Node.js 版本：某些项目可能对 Node.js 版本有要求。可以在 package.json 中查看 engines 字段，或者直接询问项目维护者。如果需要切换 Node.js 版本，可以使用 nvm：
```
nvm install <version> nvm use <version>
```

5.4 启动项目

安装完依赖后，运行以下命令启动项目：

npm start

如果你使用的是 yarn 或 cnpm，可以分别运行：

yarn start # 或 cnpm start

如果一切正常，项目会在浏览器中自动打开。
如果遇到错误，请根据终端输出的错误信息进行排查（例如缺少依赖、环境变量未配置等）。

6. 常见问题及解决方法

6.1 网络超时

如果在安装依赖时遇到网络超时问题，可以尝试以下方法：

切换到国内镜像（如淘宝镜像）。
使用科学上网工具（仅限合法用途）。
增加超时时间：
```
npm config set timeout 60000
```

6.2 权限问题

如果在安装全局包时遇到权限问题，可以尝试以下方法：

使用 sudo 提升权限（仅适用于 macOS/Linux）：
```
sudo npm install -g <package-name>
```

更改 npm 的全局安装路径：

mkdir ~/.npm-global
npm config set prefix '~/.npm-global'
export PATH=~/.npm-global/bin:$PATH
source ~/.bashrc

6.3 缺少依赖

如果运行 npm start 时提示缺少某些依赖，可以尝试重新安装依赖：

rm -rf node_modules package-lock.json
npm install