你已经使用Create React App[1] 脚手架搭建了React应用，现在该部署了。
一般会使用npm run build或者yarn build构建出静态资源， 由web服务器承载。
你会体验到：多环境：test、staging、prod,他们都是独立服务器、不同的主机名，需要打不同的包。
或者你会这样手写 if/else来配置不同环境的后端API基地址：
api-config.js
- letbackendHost;
- constapiVersion='v1';
- consthostname=window&&window.location&&window.location.hostname;
- if(hostname==='realsite.com'){
- backendHost='https://api.realsite.com';
- }elseif(hostname==='staging.realsite.com'){
- backendHost='https://staging.api.realsite.com';
- }elseif(/^qa/.test(hostname)){
- backendHost=`https://api.${hostname}`;
- }else{
- backendHost=process.env.REACT_APP_BACKEND_HOST||'http://localhost:8080';
- }
- exportconstAPI_ROOT=`${backendHost}/api/${apiVersion}`;
然后在你的应用文件api.js， 导入这个配置
- import{API_ROOT}from'./api-config'
- functiongetUsers(){
- returnfetch('${API_ROOT}/users')
- .then(res=>res.josn)
- .then(json=>json.data.users)
- }
终究不够优雅。
快闪三：react工程化：通过环境变量灵活配置react
构建时变量织入
要提醒的概念是：
环境变量是在构建阶段被织入，一旦完成构建过程，构建的产出物中变量值就被固定了(不论产出物被放置到哪个服务进程、哪个环境)。
毕竟React应用是作为静态资源运行在浏览器上，而到了浏览器， 就no sense with环境变量。
Case1. 通过环境变量配置后端基地址
Create React APP脚手架创建了react应用，可通过全局的process.env来获取环境变量。
1.process.env.NODE_ENV在构建时被设置为production。
2. 还可以使用REACT_APP_开头的环境变量来配置proces.env.
故
- REACT_APP_API_HOST=example.comyarnrunbuild
- #将产生如下效果：
- process.env.REACT_APP_API_HOST="example.com"
- process.env.NODE_ENV="production"
怎么设置环境变量?
windows: set/setx命令; linux: export命令，这里不赘述。
Case2 .env文件
临时环境变量可以影响全局process.env的下级变量值， 但是不够方便，Create React App支持使用.env文件来固定存储环境变量值。
创建.env文件，内容如下;
- REACT_APP_SPECIAL_FEATURE=true
- REACT_APP_API_HOST=default-host.com
上面的环境变量打包后将会在development、test、production生效。
如果你要为不同环境设置变量，可放置.env.development、env.test、.env.production 文件。
再提醒一句：环境变量不仅可以用来配置后端基地址，还可以灵活的作为react app业务配置。
原文链接：https://mp.weixin.qq.com/s/NWCGQcWkUuqdhyFCyWRx2g
