react--添加环境变量

SunnyY
10,811 阅读3分钟

vue 和 react 项目 想要一套build之后的代码部署在不同的项目中，不同的项目请求的域名不一样，这个需求除了想到环境变量，还有什么解决思路吗

针对不同环境使用不同接口地址的适配问题,可通过添加react环境变量的方法实现。

react内置环境

create-react-app 创建的项目有内置的环境变量 NODE_ENV, 在 JavaScript 代码中可通过 process.env.NODE_ENV 读取它。

NODE_ENV 默认有三个可能的值，分别是 development, test 和 production, 对应开发，测试，生产环境。

运行 npm start, NODE_ENV 的值为 development; npm run test 则是 test; npm run build 则对应 prodution.

react自定义环境变量

通过process.env.REACT_APP_ENV获取，

设置自定义变量注意点：react 只读取 REACT_APP 开头的变量，其他的，表示不认识。比如简单写个 MY_ENV, 是会被 React 忽略的，而 REACT_APP_ENV 就会被读取。

添加环境变量的方法

建议安装react-app-rewired，可以扩展webpack配置，如关闭mapSource，加快打包速度

一、react自带的变量+react-app-rewired

"scripts": {
    "start": "REACT_APP_ENV=test react-app-rewired start",
    "build": "REACT_APP_ENV=production react-app-rewired --max_old_space_size=4096 build",
    "build:test": "REACT_APP_ENV=test react-app-rewired --max_old_space_size=4096 build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

二、cross-env+react-app-rewired

  1. 安装
npm i cross-env --save-dev

这里需要 cross-env, cross-env 设计是为了定义全平台兼容的环境变量命令，因为 Windows 在设置环境变量的命令会出现阻塞问题。

  1. 在package.json文件里添加代码
 "scripts": {
    "start": "react-scripts start",
    "start:stage": "cross-env REACT_APP_ENV=stage react-scripts start",
    "build": "react-scripts build",
    "build:stage": "cross-env REACT_APP_ENV=stage react-app-rewired build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
     "cross-env": "^7.0.2",
  }
  1. 运行
  • 本地开发 npm run start:stage，打印process.env如下:
{
  NODE_ENV: "development"
  PUBLIC_URL: ""
  REACT_APP_ENV: "stage"
}
  • build npm run start:build，打印process.env如下:
{
  NODE_ENV: "production"
  PUBLIC_URL: ""
  REACT_APP_ENV: "stage"
}

运行 npm run build:stage 打包之后，process.env.REACT_APP_ENV 的值即为 'stage'.

三、dotenv-cli+react-app-rewired

修改配置

安装 react-app-rewired] 包后，在根目录创建 config-overrides.js 自定义配置，最后修改 package.json 中的 scripts（替换react-scripts为react-app-rewired）,具体查看链接create-react-app扩展webpack配置

多环境配置

  1. 安装 dotenv-cli 包
npm i  dotenv-cli --save-dev
  1. 根据需求在根目录创建 .env 文件（注意：只能以 REACT_APP_ 开头），如创建 .env.development、.env.production，.env.test 内容如下：
// .env.development
REACT_APP_ENV=development

// .env.production
REACT_APP_ENV=production

// .env.test
REACT_APP_ENV=development
  1. 继续修改 package.json 中的 scripts 指定环境
"scripts": {
    "start": "react-app-rewired start",
    "build:dev": "dotenv -e .env.development react-app-rewired build",
    "build:prod": "dotenv -e .env.production react-app-rewired build",
    "build:test": "dotenv -e .env.test react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
},
"devDependencies": {
    "dotenv-cli": "^2.0.1",
    "react-app-rewired": "^2.1.3",
    "customize-cra": "^1.0.0",
}
  1. 运行
  • 开发环境 npm run build:dev，打印process.env如下:
{
  NODE_ENV: "production"
  PUBLIC_URL: ""
  REACT_APP_ENV: "development"
}
  • 测试环境 npm run build:test，打印process.env如下:
{
  NODE_ENV: "production"
  PUBLIC_URL: ""
  REACT_APP_ENV: "test"
}
  • 生产环境 npm run build:prod，打印process.env如下:
{
  NODE_ENV: "production"
  PUBLIC_URL: ""
  REACT_APP_ENV: "production"
}

create-react-app修改配置多环境打包

根据环境变量判断请求地址

export const ORIGIN_NAME = 
   process.env.REACT_APP_ENV == "production"
      ? 'xxxx.cloud.xx.cc'
      :  process.env.REACT_APP_ENV == "development" 
         ? 'xxxx.dev.xx.cc:58080' 
         :'xxxx.test.xx.cc:58080'
export const SUB_API_PATH = ''
export const API_PATH = location.protocol + '//' + ORIGIN_NAME + SUB_API_PATH

通过docker镜像动态获取配置

originName.js

***********APPID动态配置**************
import APPID from 'APPID'
import REDIRECTURL from 'REDIRECTURL'
import FLAG from 'FLAG'
import COMPONENT_APPID from 'COMPONENT_APPID'
export const APP_ID = APPID
export const REDIRECT_URL = REDIRECTURL
export const $FLAG = FLAG
export const $COMPONENT_APPID = COMPONENT_APPID

docker/run.sh

#!/bin/sh
# sed -i "s/APPID = '\(.*\)'/APPID = '$WX_APP_ID'/g" key.js
sed -i "s/\${APPID}/${APPID}/g" key.js
sed -i "s~\${REDIRECTURL}~${REDIRECTURL}~g" key.js
sed -i "s/\${FLAG}/${FLAG}/g" key.js
sed -i "s/\${COMPONENT_APPID}/${COMPONENT_APPID}/g" key.js
cp nginx.conf /etc/nginx/
nginx
avatar
文章
阅读
粉丝