react18 开发技巧之：判断代码环境、环境变量与端口设置

• react18 如何 判断当前环境是 开发版本还是生产版本
• react 中 如何使用 process.env.NODE_ENV
• vite 设置服务器端口为 80
• react 环境变量

react18 如何 判断当前环境是 开发版本还是生产版本

在 React 18 中，可以通过以下方式来判断当前环境是开发版本还是生产版本：

1. 使用 process.env.NODE_ENV 属性进行判断。

if (process.env.NODE_ENV === 'development') {
  console.log('当前环境是开发版本');
  // 在开发版本中执行的逻辑
} else {
  console.log('当前环境是生产版本');
  // 在生产版本中执行的逻辑
}

2. 使用 Webpack 或其他构建工具的 DefinePlugin 插件设置全局变量。

if (DEV) {
  console.log('当前环境是开发版本');
  // 在开发版本中执行的逻辑
} else {
  console.log('当前环境是生产版本');
  // 在生产版本中执行的逻辑
}

需要在 Webpack 的配置文件中定义全局变量 DEV，可以使用 DefinePlugin 插件将其设置为 true 或 false。

这两种方式都能够根据当前环境的不同执行相应的逻辑。

请根据你的项目配置选择适合的方式进行判断。

更多精彩内容，请微信搜索“前端爱好者“， 戳我 查看 。

react 中 如何使用 process.env.NODE_ENV

在 React 中，你可以使用 process.env.NODE_ENV 变量来获取当前的环境值。

在组件中，你可以直接在 JavaScript 代码中引用 process.env.NODE_ENV：

if (process.env.NODE_ENV === 'development') {
  // 在开发环境下执行的代码
} else if (process.env.NODE_ENV === 'production') {
  // 在生产环境下执行的代码
}

要注意的是，process.env.NODE_ENV 的值在构建项目时会根据配置进行设置。在开发环境下，通常是设置为 “development”，而在生产环境下则是设置为 “production”。如果你使用 Create React App 或其他类似的工具创建项目，它们通常会自动配置好这些环境变量。

另外，在项目根目录下的 .env 文件或者以 .env.development、.env.production 等命名格式的文件，你也可以定义环境变量，并在 process.env.NODE_ENV 之外使用其他自定义变量。例如，在 .env 文件中设置一个自定义变量：

REACT_APP_API_URL=http://example.com/api

然后在组件中可以这样使用：

console.log(process.env.REACT_APP_API_URL);

请注意，React 默认情况下只支持以 REACT_APP_ 开头的自定义环境变量，其他变量可能需要额外的配置才能生效。

记得在项目中遵循相应的安全规范和最佳实践，不要暴露敏感信息或涉及安全性的内容作为环境变量。

示例

import React, { useEffect } from "react";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { Button, Form, Input, Space ,message} from "antd";
import {  useNavigate } from "react-router-dom";

export default function Login() {
  useEffect(() => { 
    if (process.env.NODE_ENV === 'development') {
      console.log('当前环境是开发版本');
      // 在开发版本中执行的逻辑
    } else {
      console.log('当前环境是生产版本');
      // 在生产版本中执行的逻辑
    }
  }, [ ])
  
  const navigate = useNavigate(); 
}

运行结果

vite 设置服务器端口为 80

要将 Vite 设置服务器端口为 80，您可以按照以下步骤进行操作：

1. 确保您已经安装了 Vite，并且正在使用正确的版本。
2. 打开您的 Vite 项目的根目录。
3. 在根目录中找到名为 vite.config.js 的文件。如果没有，请创建一个新的文件，并将其命名为 vite.config.js。
4. 在 vite.config.js 文件中，添加以下代码来配置服务器端口为 80：

module.exports = {
  server: {
    port: 80
  }
}

5. 保存文件并关闭编辑器。
6. 启动 Vite 服务器，您将会看到服务器已经使用端口 80 运行。

请注意，以管理员或超级用户权限运行应用程序才能使用低于 1024 的端口（如端口 80）。如果您在本地开发环境中进行操作，通常不需要管理员权限。但是，如果要在生产环境中使用端口 80，请确保您具有适当的权限和必要的安全措施。

react 环境变量

1、在项目根目录与src同级创建.env文件
		.env为总环境配置							npm run build时读取
		.env.development为开发模式配置			npm start时读取
		.env.production为生产模式配置
		.env.test为测试模式配置
	
2、环境变量
	(1)自定义环境变量
		1、可以在其他文件访问的自定义环境变量必须以REACT_APP开头
			REACT_APP_xxx=x  x就是字符串,不需要添加引号
			
		2、可以设置其他任意自定义变量,只能在本文件访问,不区分大小写
		
	(2)使用其他环境变量
		REACT_APP_xxx=$xx   必须使用$,否则会认为是字符串
	
	(3)在tsx/js文件中使用
		{process.env.REACT_APP_NAME}
	
	(4)在index.html文件中使用
		<title>%REACT_APP_xxx%</title>
	
3、NODE_ENV特殊内置环境变量
	(1)读取
	 	process.env.NODE_ENV 中读取它。
	 	
	(2)规范
		 当你运行 npm start 时，它总是等于 'development' ，
		 当你运行 npm test 它总是等于 'test' ，
		 当你运行 npm run build 来生成一个生产 bundle(包) 时，它总是等于 'production' 。
		 无法手动覆盖NODE_ENV。 这可以防止开发人员意外地将慢速开发构建部署到生产环境中。

5、通过cross-env配置
	1、下载
		cnpm install --save-dev cross-env
	
	2、配置端口
		在package.json中
		"start": "cross-env PORT=端口号 react-scripts start",
	
6、配置完成后需要重启项目

参考文档

• https://blog.csdn.net/weixin_43294560/article/details/107565347