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

本文转载自微信公众号「精益码农」，作者有态度的马甲。转载本文请联系精益码农公众号。

网站建设哪家好，找创新互联公司！专注于网页设计、网站建设、微信开发、小程序设计、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了滨江免费建站欢迎大家使用！

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

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

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

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

api-config.js

 
 
 
  
  
  let backendHost;   
  
  const apiVersion = 'v1';   
  
     
  
  const hostname = window && window.location && window.location.hostname;   
  
     
  
  if(hostname === 'realsite.com') {   
  
    backendHost = 'https://api.realsite.com';   
  
  } else if(hostname === 'staging.realsite.com') {   
  
    backendHost = 'https://staging.api.realsite.com';   
  
  } else if(/^qa/.test(hostname)) {   
  
    backendHost = `https://api.${hostname}`;   
  
  } else {   
  
    backendHost = process.env.REACT_APP_BACKEND_HOST || 'http://localhost:8080';   
  
  }   
  
     
  
  export const API_ROOT = `${backendHost}/api/${apiVersion}`;

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

 
 
 
  
  
  import {API_ROOT} from './api-config'   
  
  function getUsers() {   
  
     return  fetch('${API_ROOT}/users')   
  
        .then(res=> res.josn)   
  
        .then(json=> json.data.users)   
  
  }

终究不够优雅。

构建时变量织入

要提醒的概念是：

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

毕竟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.com yarn run build   
  
  # 将产生如下效果：   
  
  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业务配置。

文章标题：前端快闪三：多环境灵活配置React
文章起源：http://www.hantingmc.com/qtweb/news9/134409.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容