dotenv-cli 前端多环境变量配置工具

2021-07-26 0 By admin

为前端工程配置多环境变量,用于解决开发环境、测试环境和生产环境中不同的环境配置不同的需求。

一、概述

dotenv-cli 工具提供了多环境配置的能力;其使用过程为:对不同环境设置不同的环境变量文件,通过设置前端工程执行命令(npm|yarn command)加载对应的环境变量文件,即可实现多环境的配置。

1.1、安装说明

dotenv-cli 是一个多环境变量辅助工具;生产环境运行和编写代码过程中,用不到这个工具;而是在启动、打包过程中需要使用。
所以这个工具的安装,如果使用NPM工具,则不需要-S(生产阶段依赖),也不需要-D(开发阶段依赖);需要-g(全局安装)
$npm install -g dotenv-cli

二、dotenv 使用方法介绍

dotenv-cli 安装完成后,其使用过程可以分为三个步骤:

2.1、配置环境变量文件

## test config file  .env.development
ENV_DOMAIN=http://development.com
## test config file  .env.testing
ENV_DOMAIN=http://test.com
## prod config file .env.production
EVN_DOMAIN=http://prod.com

2.2、修改packages.json 中脚本命令

设置不同的命令,加载响应的配置文件;

  "scripts": {
    "start": "dotenv -e .env.development  react-app-rewired start",
    "build": "react-scripts build",
    "test": "react-app-rewired test",
    "start:dev": "dotenv -e .env.development  react-app-rewired start",
    "eject": "react-scripts eject",
    "build:test": "dotenv -e .env.testing react-app-rewired build",
    "build:prod": "dotenv -e .env.production react-app-rewired build"
  },

2.3、代码中调用变量的方法

console.log("环境变量:",process.env.ENV_DOMAIN)

三、dotenv 命令介绍

3.1、自定义 .env 文件

1、默认加载
$ dotenv [带参数的命令]
这将从当前工作目录中的 .env 文件加载变量,然后运行命令(使用新的环境变量集)。

2、自定义 .env 文件
可以使用 -e 标志指定另一个 .env 文件:
$ dotenv -e .env2 [带参数的命令]

3、可以指定多个 .env 文件,并按顺序处理:
$ dotenv -e .env3 -e .env4 [参数的命令]

3.2、检查环境变量

如果要检查环境变量的值,请使用-p标志
$ dotenv -p NODE_ENV