介绍
在前端项目中，我们经常需要使用一些环境变量来配置不同的开发、测试和生产环境。而 env-cmd 就是一个可以帮助我们管理这些环境变量的 npm 包。它提供了一种简单而有效的方式，在各个环境之间进行配置切换并且能够轻松地完成一些针对环境变量的操作。
安装
使用 npm 可以很容易地安装 env-cmd：
npm install env-cmd --save-dev
使用
配置文件
首先，我们需要创建一个包含所有环境变量的配置文件。以 .env 文件为例，其中包含以下内容：
API_URL=https://api.example.com APP_NAME=MyApp
在脚本中使用
假设你有一个使用 webpack 进行打包的前端项目，并且你希望在不同的环境中使用不同的环境变量作为配置参数。那么，在打包命令中使用 env-cmd 就可以轻松实现这个需求。例如：
"scripts": {
"start": "env-cmd -f .env.development webpack-dev-server",
"build:prod": "env-cmd -f .env.production webpack --mode=production"
}通过运行上述命令，env-cmd 会读取相应的配置文件，并将其中的环境变量设置为当前环境的全局变量。这样，在 webpack.config.js 中就可以直接使用这些环境变量了。例如：
-- -------------------- ---- -------
----- ------- - -------------------
-------------- - -
-------- -
--- ----------------------
-------------- ---------------------------
--
--
-- ---
-在上述代码中，我们使用 DefinePlugin 将当前环境中的所有环境变量作为全局变量注入到代码中。这样，在运行时就可以直接使用这些变量了。
操作
除了简单地读取和设置环境变量之外，env-cmd 还提供了一些方便的操作，包括：
设置默认值
我们可以通过在 .env 文件中添加默认值来确保在没有设置环境变量时也有一个默认值。例如：
API_URL=https://api.example.com APP_NAME=MyApp PORT=8080
在上述例子中，如果 PORT 环境变量不存在，则会默认设置为 8080。
导出环境变量
env-cmd 还支持将当前环境变量导出为一个 .env 文件：
env-cmd -v > .env
此命令会将当前环境中的所有环境变量输出为一个 .env 文件。
总结
使用 env-cmd 可以更加方便地管理前端项目中的环境变量。通过简单的配置文件和命令，我们可以轻松地切换不同的环境，并完成一些方便的操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/47248