在前端开发中，我们常常需要使用环境变量来实现一些不同环境下的配置。而在使用环境变量时，我们通常会使用 .env 文件或者直接在终端中设置环境变量。但是在实际开发中，我们经常会遇到需要在多个环境中使用相同的环境变量的情况，这时就需要一种更方便的方式来处理环境变量。
lazy-universal-dotenv 就是这样一种 npm 包，它可以在任何环境中读取 .env 文件中的环境变量，并且可以将这些变量注入到客户端和服务器端的代码中。本文将详细介绍如何使用这个 npm 包。
安装
使用 npm 安装 lazy-universal-dotenv：
npm install lazy-universal-dotenv
使用
在使用 lazy-universal-dotenv 时，我们需要做三件事情：
- 准备
.env文件 - 注入环境变量
- 使用环境变量
接下来我们将按照这个顺序详细介绍这三个步骤。
准备 .env 文件
首先我们需要创建一个名为 .env 的文件，用于存放环境变量。这个文件应该包含以下格式：
KEY=value
其中，KEY 为环境变量名，value 为环境变量的值。例如：
SERVER_URL=https://api.example.com API_KEY=abcdefg
注入环境变量
接下来就是将这些环境变量注入到前端代码中。在执行这个步骤之前，我们先来了解一下 lazy-universal-dotenv 是如何工作的。
在普通的情况下，我们会在服务器端读取 .env 文件，将环境变量存储到内存中。而在 lazy-universal-dotenv 中，则是通过运行时代码生成器来动态地生成含有环境变量的客户端和服务器端代码。这个代码生成器会在第一次加载网页时才会运行，所以它是“懒”的。
在 Node.js 中，我们可以通过如下代码将环境变量注入到全局变量中：
const universalDotenv = require('lazy-universal-dotenv'); universalDotenv.config();
我们还需要将这些环境变量传递给客户端代码。此处我们使用 webpack.DefinePlugin 来实现：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- --------------- - --------------------------------- ----- ------- - ------------------- -------------- - - ------ ------------- ------- - ----- ----------------------- -------- --------- ----------- -- ------- - ------ - - ----- -------- ---- --------------- -------- -------------- - - -- -------- - --- ---------------------- -------------- ----------------------------------------------- -- - --展开代码
使用环境变量
现在我们已经将环境变量注入到了前端代码中，可以在 JavaScript 代码中通过 process.env 访问这些环境变量了。
fetch(`${process.env.SERVER_URL}/users?api_key=${process.env.API_KEY}`).then(response => { console.log(response); });
总结
lazy-universal-dotenv 是一个用于处理环境变量的 npm 包，它可以方便地从 .env 文件中读取环境变量，并且可以将这些环境变量注入到客户端和服务器端的代码中。
使用 lazy-universal-dotenv 时，我们需要做三件事情：准备 .env 文件、将环境变量注入到全局变量中、在代码中使用环境变量。
希望这篇教程对大家有帮助，Happy Coding！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/lazy-universal-dotenv
