总所周知我的项目实现当前代码都会对立打包上线，有些时候咱们须要同时上线不同环境，对于不同的环境咱们所展现页面、性能有时会有很大变动，那么咱们如何应答这样的变动呢？

问题

我发现有些琐碎的事件有些琐碎并且很难做，而在 Web 应用程序外部却是如此。这些事件之一是解决不同的环境变量。

当您仍在开发应用程序时，通常只有一个环境是失常的，然而当其余一些用户开始对其进行测试或要公布它时，您可能心愿对 API 应用不同的 URL，例如该 API 的开发版本。能够拜访新端点或更全面的记录器以及生产就绪版本的 API，这些 API 通过了良好的测试，并具备发行版本的生产数据库。
有时您须要两个以上的环境，例如：

• 开发：这是您开发应用程序所有新性能的中央；该环境已准备就绪，能够帮忙您取得更好的日志和伪造的数据库，如果您破费很多，能够随时删除并从新创立它们；
• 生产版：这是您将公布到线上的版本

那么如何为不同的环境存储（和应用）不同的变量呢？

显然，我尝试向 Google 寻求答案，然而我发现的解决方案仿佛太艰难或不够灵便。

应用.env

就是这个文件, 在文件中能够定义咱们须要的配置，而后在我的项目中应用 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 文件 导入 变量，就能够开始了！????

如何主动执行环境切换

当初，咱们须要一种主动切换环境的办法。

如果咱们在 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 的写入门路即可。