在前端开发中，常常需要读取环境变量，例如在开发环境和生产环境下使用不同的 API 地址。而 envprops 就是一款能够在前端中读取环境变量的 npm 包，使用非常方便，本文将介绍其使用教程。
安装
通过 npm 安装 envprops，使用以下命令：
--- ------- --------
安装成功后，在项目中引入 envprops：
------ -------- ---- -----------
使用
设置环境变量
首先需在项目中设置环境变量。以 React 项目为例，在根目录下新建 .env 文件，设置环境变量，例如：
---------------------------------------
读取环境变量
在需要读取环境变量的模块中，导入 envprops 并通过它读取环境变量，例如：
------ -------- ---- ----------- ----- ------ - --------------------------
读取到的 apiUrl 就是环境变量中的值 http://localhost:3000/api。
高级使用
在开发中，有时需要对环境变量的值进行类型转换，例如将字符串转换为数字等。envprops 支持在读取环境变量时设置默认值和转换函数，以实现更加复杂的逻辑。
设置默认值
如果读取的环境变量不存在，可以通过设置默认值避免出错，例如：
----- ------- - ------------------- ------
上述代码中，如果环境变量 TIMEOUT 不存在，timeout 将被赋值为 5000。
类型转换
如果需要将环境变量的值进行类型转换，可以在读取环境变量时传入转换函数，例如将字符串转换为数字：
----- ---- - ---------------- ------- --------
示例代码
下面是完整的示例代码：
------ -------- ---- ----------- -- ------ ----- ------ - -------------------------- -------------------- -- -- ------------------------- -- ----- ----- ------- - ------------------- ------ --------------------- -- -- ---- -- ---- ----- ---- - ---------------- ------- -------- ------------------ -- -- -------- ------
总结
使用 envprops 去读取前端项目中的环境变量非常简单，甚至能够在项目中实现更加复杂的逻辑。希望这篇教程能够帮助你更好地使用 envprops。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066e26a563576b7b1ecf82