服务器之家:专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - 编程技术 - 前端快闪三:多环境灵活配置React

前端快闪三:多环境灵活配置React

2021-09-29 23:06精益码农 有态度的马甲 编程技术

一般会使用npm run build或者yarn build构建出静态资源, 由web服务器承载。你会体验到:多环境:test、staging、prod,他们都是独立服务器、不同的主机名,需要打不同的包。

前端快闪三:多环境灵活配置React

你已经使用Create React App[1] 脚手架搭建了React应用,现在该部署了。

一般会使用npm run build或者yarn build构建出静态资源, 由web服务器承载。

你会体验到:多环境:test、staging、prod,他们都是独立服务器、不同的主机名,需要打不同的包。

前端快闪三:多环境灵活配置React

或者你会这样手写 if/else来配置不同环境的后端API基地址:

api-config.js

  1. letbackendHost;
  2. constapiVersion='v1';
  3. consthostname=window&&window.location&&window.location.hostname;
  4. if(hostname==='realsite.com'){
  5. backendHost='https://api.realsite.com';
  6. }elseif(hostname==='staging.realsite.com'){
  7. backendHost='https://staging.api.realsite.com';
  8. }elseif(/^qa/.test(hostname)){
  9. backendHost=`https://api.${hostname}`;
  10. }else{
  11. backendHost=process.env.REACT_APP_BACKEND_HOST||'http://localhost:8080';
  12. }
  13. exportconstAPI_ROOT=`${backendHost}/api/${apiVersion}`;

然后在你的应用文件api.js, 导入这个配置

  1. import{API_ROOT}from'./api-config'
  2. functiongetUsers(){
  3. returnfetch('${API_ROOT}/users')
  4. .then(res=>res.josn)
  5. .then(json=>json.data.users)
  6. }

终究不够优雅。

快闪三:react工程化:通过环境变量灵活配置react

构建时变量织入

要提醒的概念是:

环境变量是在构建阶段被织入,一旦完成构建过程,构建的产出物中变量值就被固定了(不论产出物被放置到哪个服务进程、哪个环境)。

毕竟React应用是作为静态资源运行在浏览器上,而到了浏览器, 就no sense with环境变量。

Case1. 通过环境变量配置后端基地址

Create React APP脚手架创建了react应用,可通过全局的process.env来获取环境变量。

1.process.env.NODE_ENV在构建时被设置为production。

2. 还可以使用REACT_APP_开头的环境变量来配置proces.env.

  1. REACT_APP_API_HOST=example.comyarnrunbuild
  2. #将产生如下效果:
  3. process.env.REACT_APP_API_HOST="example.com"
  4. process.env.NODE_ENV="production"

怎么设置环境变量?

windows: set/setx命令; linux: export命令,这里不赘述。

Case2 .env文件

临时环境变量可以影响全局process.env的下级变量值, 但是不够方便,Create React App支持使用.env文件来固定存储环境变量值。

创建.env文件,内容如下;

  1. REACT_APP_SPECIAL_FEATURE=true
  2. 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

延伸 · 阅读

精彩推荐