当前位置：首页 > article >正文

React项目设置不同模式（开发development与生产production）——cross-env与env-cmd详解

article 2025/2/21 20:22:12

在React中使用Create React App（CRA）构建项目时，可以通过以下步骤来开启生产模式：

一、安装Create React App（如尚未安装）

确保已经安装了Node.js和npm。Node.js通常自带npm包管理器。
全局安装Create React App：

npm install -g create-react-app

二、创建React项目

使用Create React App创建一个新的React项目。例如，创建一个名为my-app的项目：

npx create-react-app my-app

或者（如果你全局安装了create-react-app）：

create-react-app my-app

cd my-app

三、开发过程中

使用以下命令启动开发服务器，这将在开发模式下运行应用：

npm start

开发服务器通常会在本地运行，并自动打开浏览器访问应用。

四、构建生产模式的应用

当你的应用开发完成后，使用以下命令来构建生产模式的应用：

npm run build

此命令会创建一个build目录，其中包含了你的应用的静态文件。这些文件已经被优化（如代码压缩、移除不必要的代码等），可以直接部署到生产环境。

五、部署生产模式的应用

将build目录中的文件部署到你的服务器，或者使用静态站点托管服务（如Vercel、Netlify等）。

六、划分生产和开发版本（可选）

为了更好地区分和管理生产和开发环境，可以创建环境变量文件并配置相应的环境变量。

在项目根目录下创建两个环境变量文件：.env.production和.env.development。
在.env.production文件中，设置NODE_ENV为production。
在.env.development文件中，设置NODE_ENV为development。
修改package.json文件中的scripts字段，使用cross-env包来设置环境变量（确保先安装cross-env包）：

"scripts": {
  "start": "cross-env NODE_ENV=development react-scripts start",
  "build": "cross-env NODE_ENV=production react-scripts build",
  "test": "cross-env NODE_ENV=development react-scripts test",
  "eject": "react-scripts eject"
}

在代码中，可以使用process.env.NODE_ENV来获取当前环境变量的值，并根据环境的不同加载不同的配置文件或执行不同的逻辑。

通过以上步骤，你就可以在Create React App中创建React项目，并开启生产模式进行构建和部署了。

cross-env详解

cross-env是一个运行跨平台设置和使用环境变量的脚本工具。它能够简化在Windows和类Unix系统（如Linux和macOS）上设置环境变量的过程。

安装：
- 使用npm安装cross-env作为开发依赖：
```
npm install --save-dev cross-env
```
使用：
- 在package.json的scripts字段中使用cross-env来设置环境变量。例如：
```
"scripts": {
  "start": "cross-env NODE_ENV=development react-scripts start",
  "build": "cross-env NODE_ENV=production react-scripts build"
}
```
- 这样，当运行npm start时，NODE_ENV会被设置为development；当运行npm run build时，NODE_ENV会被设置为production。
优势：
- 跨平台：无需担心不同操作系统之间的环境变量设置差异。
- 简洁：在package.json中集中管理脚本和环境变量。

env-cmd详解

env-cmd是一个Node.js程序，它允许从.env文件中加载和使用环境变量。这使得管理不同环境下的配置变量变得更加简单和高效。

安装：
- 使用npm安装env-cmd作为开发依赖：
```
npm install env-cmd --save-dev
```
使用：
- 创建.env文件或在项目根目录下创建多个.env文件（如.env.development、.env.production等）来存储不同环境下的环境变量。
- 在package.json的scripts字段中使用env-cmd来指定要使用的环境文件。例如：
```
"scripts": {
  "start:dev": "env-cmd -f .env.development react-scripts start",
  "start:prod": "env-cmd -f .env.production react-scripts start",
  "build": "env-cmd -f .env.production react-scripts build"
}
```
- 这样，当运行npm run start:dev时，会使用.env.development文件中的环境变量；当运行npm run start:prod或npm run build时，会使用.env.production文件中的环境变量。
优势：
- 集中管理：环境变量集中存储在.env文件中，易于管理和修改。
- 多环境支持：可以创建多个.env文件来存储不同环境下的环境变量。
- 灵活性：支持从命令行参数中覆盖环境变量值。
- 扩展性：支持.env.json和.env.js等格式的环境文件。