React V6分环境打包

功能背景

例如想要在react也要实现不同环境使用不同的api接口地址这样的想法，那么就需要根据命令自动区分环境了。

代码实现

比如我这又三种环境，那么创建三个文件，如图：
分别是dev:开发环境，formal：UAT环境，prod：正式环境

env.dev

REACT_APP_BASE_URL=http://xxxxt/v1_0
REACT_APP_ENV=dev

env.formal

REACT_APP_BASE_URL=https://test.xxxxxx.com.cn
REACT_APP_ENV=formal

env.prod

REACT_APP_BASE_URL=https://prod.xxxxxx.com.cn
REACT_APP_ENV=prod

然后在package.json配置运行命令/打包命令

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "start:dev": "cross-env NODE_ENV=dev npm run start",
    "start:formal": "cross-env NODE_ENV=formal npm run start",
    "start:prod": "cross-env NODE_ENV=prod npm run start",
    "build:dev": "cross-env NODE_ENV=dev npm run build",
    "build:formal": "cross-env NODE_ENV=formal npm run build",
    "build:prod": "cross-env NODE_ENV=prod npm run build",
  },

运行项目之后，就可以打印以下

console.log('看看环境',process.env.REACT_APP_BASE_URL)，

比如目前我运行的是npm run start:formal

注意：对于如何分环境运行不同的打包配置文件，这个还没研究，日后再弄，如果各位有分享可以粘贴评论区，一起学习。谢谢，有问题欢迎指正。