如何优雅的在项目中设置多个环境变量

machinist

总所周知项目完成以后代码都会统一打包上线,有些时候我们需要同时上线不同环境,对于不同的环境我们所展示页面、功能有时会有很大变化,那么我们如何应对这样的变化呢?

问题

我发现有些琐碎的事情有些琐碎并且很难做,而在Web应用程序内部却是如此。这些事情之一是处理不同的环境变量。

当您仍在开发应用程序时,通常只有一个环境是正常的,但是当其他一些用户开始对其进行测试或要发布它时,您可能希望对API使用不同的URL,例如该API的开发版本。可以访问新端点或更全面的记录器以及生产就绪版本的API,这些API经过了良好的测试,并具有发行版本的生产数据库。
有时您需要两个以上的环境,例如:

  • 开发:这是您开发应用程序所有新功能的地方;该环境已准备就绪,可以帮助您获得更好的日志和伪造的数据库,如果您花费很多,可以随时删除并重新创建它们;
  • 生产版:这是您将发布到线上的版本

那么如何为不同的环境存储(和使用)不同的变量呢?

显然,我尝试向Google寻求答案,但是我发现的解决方案似乎太困难或不够灵活。

使用.env

image.png
就是这个文件,在文件中可以定义我们需要的配置,然后在项目中使用process.env全局变量获取,声明的属性在 vue以及react中都有特殊的命名要求,比如vue中属性名必须以VUE\_APP\_开头,如VUE_APP_XXX,react则需要以REACT_APP开头。
不幸的是,似乎最多只能处理两种环境(一种开发和一种发行/生产),并且还具有一些可怕的变量缓存。

更简单的解决方案

参照后端配置打包profile的方式。
这是我目前正在使用的方法;准备手指,因为您将需要创建一些新文件。

首先,我们将所有环境存储在envs文件夹中的JSON文件中。
我将为本文创建3个环境(开发,暂存和生产),每个环境将具有不同的API_URL。显然,您可以根据需要添加任意多个变量!

envs/development.json

{   
    "API\_URL": "https://development.api.com",
}

envs/staging.json

{   
    "API\_URL": "https://staging.api.com",  
}

envs/production.json

{   
    "API\_URL": "https://production.api.com", 
}

还在我这儿?现在,我们将创建一个节点脚本,该脚本将在每次我们想要切换环境时更改环境文件。

我将其放在脚本文件夹中(在该文件夹中,我还有其他脚本可以自动执行构建过程的其他部分)

脚本/set-environment.js
#!/ bin/node
const fs = require("fs");//获取传递给节点脚本的环境字符串  

const environment = process.argv[2] //读取json文件的内容  
const envFileContent = require(`../envs/$ {environment} .json`); //将env.json文件内的json复制到  
fs.writeFileSync("env.json", JSON.stringify(envFileContent, undefined, 2));

设置enviroment.js首先,它在一个变量中存储的第一个参数,当你调用脚本,那么它将require里面的文件ENVS具有相同的名称,最后将创建一个env.json文件包含envFileContent内容的根文件夹。

现在我们可以尝试并调用

节点脚本/set-environment.js开发

✨MAGIC✨…一个新的env.json文件在正确的位置,可以为您的所有变量提供服务。

另外,您可以在package.json文件中设置一些脚本,以切换环境而无需在终端中键入所有单词:只需键入yarn env:dev即可。

{   
    "name": "您的应用程序名称",
    "scripts": {   
    "start": "本机开始",
    "env: staging":"节点脚本/set-environment.js阶段",
    "env: dev”:"节点脚本/set-environment.js 开发",
    "env: prod":"节点脚本/set-environment.js,
    "oduction",...   
 },
 "依赖项":{...},
 ...   
}

如何在代码中使用新的.env文件

现在,您只需要从src/env.json文件导入变量,就可以开始了!🚀
1_gHUd_znZCC0p8A9fJtNEWw(1).png

如何自动执行环境切换

现在,我们需要一种自动切换环境的方法。

如果我们在pckage.json建一些新脚本,这几乎是免费的

{
  "name": "your-app-name",
  "scripts": {
    "start": "react-native start",
    "env:staging": "node scripts/set-environment.js staging",
    "env:dev": "node scripts/set-environment.js development",
    "env:prod": "node scripts/set-environment.js production",
    "_ios": "react-native run-ios",
    "ios": "yarn env:dev && yarn _ios",
    "ios:staging": "yarn env:staging && yarn _ios",
    "ios:prod": "yarn env:prod && yarn _ios",
    
    "_build:ios": "react-native bundle --platform ios ...",
    "build:ios": "yarn env:dev && yarn _build:ios",
    "build:ios:staging": "yarn env:staging && yarn _build:ios",
    "build:ios:prod": "yarn env:prod && yarn _build:ios",
  },
  "dependencies": {...},
  ...
}

后期我们也可以打包出来的文件(src/env.json)统一放置到一个文件下只需要修改/set-environment.js文件中fs的写入路径即可。

阅读 2.7k

前端手札
零零散散的前端知识点!聚拢成一片,坚持自己的分享之路,一起来监督吧!

JavaScript、 react、 echarts、 umi使用者

451 声望
28 粉丝
0 条评论

JavaScript、 react、 echarts、 umi使用者

451 声望
28 粉丝
文章目录
宣传栏