在前端开发中，环境配置是一个十分重要的部分，不同的环境需要使用不同的配置，例如不同的数据库、不同的API地址等等。手动更改配置十分麻烦而且容易出错，因此出现了许多自动化的配置管理工具。其中，env-configuration是一款高度可定制化的npm包，该包可以通过提供多个配置文件，帮助开发者快速切换环境。本文将介绍如何使用env-configuration包。
安装
npm install env-configuration
or
yarn add env-configuration
使用
1.在项目根目录下，创建一个config文件夹。以development.js文件为例，文件内容如下：
module.exports = {
API_BASE_URL: 'http://localhost:8080/api',
ONE_SIGNAL_KEY: '0000-0000-0000-0000-0000',
LOG_LEVEL: 'debug'
};2.在同一文件夹下，创建一个production.js文件，文件内容如下：
module.exports = {
API_BASE_URL: 'http://api.example.com/v1',
ONE_SIGNAL_KEY: '1111-1111-1111-1111-1111',
LOG_LEVEL: 'error'
};3.在代码中，引用env-configuration包
const envConfig = require('env-configuration');
const config = envConfig({
env: process.env.NODE_ENV || 'development',
configPath: './config'
});
const apiBaseURL = config.API_BASE_URL;
console.log(apiBaseURL); // 对应环境下的API地址env-configuration函数接收两个参数：env和configPath。其中，env为环境变量，取值范围可以在配置文件中自定义。configPath为配置文件所在路径，默认为./config。
4.在项目中，通过process.env.NODE_ENV指定环境变量。
Windows Command Prompt set NODE_ENV=production Windows PowerShell $Env:NODE_ENV = 'production' UNIX export NODE_ENV=production
当命令执行完成后，即将当前环境切换成production环境。
实例代码
以react为例，该代码片段演示了如何动态切换环境。
-- -------------------- ---- -------
-- ----------
------ ----- ---- --------
------ ------------
----- --- ------- --------------- -
----- - -
----- --
--
------------------- -
----- --------- - -----------------------------
----- ------ - -----------
---- -------------------- -- --------------
----------- ----------
---
------------------------- - --------
-------------- -- ----------------
---------- -- --------------- ---- ----
-
-------- -
----- - ---- - - -----------
------ -
---- ----------------
------------ - -
----
---------------- ------ -- -
--- ----------------------------
---
-----
- - -
------------ -------------
--
------
--
-
-
------ ------- ----在development.js文件中，API_BASE_URL的地址为http://localhost:8080/api，在production.js文件中，API_BASE_URL的地址为http://api.example.com/v1。App组件会根据NODE_ENV环境变量的值来动态地获取对应环境下的数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600554cf81e8991b448d2018