react / umi 配置自定义环境变量

前言：在我们开发一个项目时，有些情况需要我们根据不同环境执行不同的操作，而内置的 process.env 中的环境变量不足以满足需求时，我们就需要手动来配置自定义的环境变量了。

一、react（项目环境：create-react-app 脚手架）

方案一： 使用 cross-env 插件（推荐）

使用 cross-env 是一种比较常见的做法。
由于我这里是脚手架搭建的，后面的步骤需要执行 npm run eject 把 webpack 配置暴露出来，注意项目一旦执行 npm run eject 操作后不可逆。

项目基于 react 脚手架环境搭建，首先安装 cross-env 插件

npm install cross-env -D

安装完成之后，修改 package.json 文件中的 scripts

"scripts": {
   
    // cross-env PORT=8080 修改执行 npm start 启动时的端口号
	"start": "cross-env PORT=8080 node scripts/start.js",
    // cross-env  CUSTOM_ENV=custom 修改执行 npm run build:dev 时的 process.env.CUSTOM_ENV 环境变量
	"build": "cross-env CUSTOM_ENV=prod node scripts/build.js",
	"build:dev": "cross-env CUSTOM_ENV=dev node scripts/build.js",
	"test": "node scripts/test.js"
},

修改 package.json 文件之后还无法通过 process.env.CUSTOM_ENV 获取到环境变量，
还需要配置一下执行 npm run eject 之后暴露出来的 config 文件夹中的 env.js 文件：
在 getClientEnvironment 这个函数中修改，加入咱们自定义的环境变量 CUSTOM_ENV: process.env.CUSTOM_ENV 即可