随着前端开发的不断发展，我们越来越多的使用npm包来完成完成我们的项目。而 multi-dotenv 是一款非常实用的npm包，它能够帮助我们在项目中使用多个环境变量，同时也可以自定义环境变量的名称，让我们的前端开发更加高效和便利。本文将详细地介绍 multi-dotenv 的使用方法。
什么是 multi-dotenv
multi-dotenv 是一个能够帮助我们在项目中使用多个环境变量，同时也可以自定义环境变量的名称的 npm 包工具。使用 multi-dotenv 可以非常方便地在项目中使用多个环境变量，从而提高前端开发的效率，避免因为环境变量使用不当带来的不良影响。
如何使用 multi-dotenv
安装 multi-dotenv
要使用 multi-dotenv，我们首先需要在项目中安装该工具。使用 npm 可以轻松地安装 multi-dotenv，可以通过以下命令行代码实现：
npm install --save-dev multi-dotenv
创建环境变量文件
安装完成之后，我们需要在项目中创建 .env 和 .env.{environment} 文件作为环境变量文件。其中，.env 文件代表默认的环境配置，而 .env.{environment} 文件则代表不同环境（如开发环境，生产环境等）下的配置。在这些文件中，我们可以配置不同的环境变量，如数据库连接地址、服务器地址等。
配置项目
创建好环境变量文件之后，我们需要在项目根目录下创建一个名为 multi-dotenv.js 的文件，并在该文件中导入 multi-dotenv 包并配置环境变量文件路径和环境变量名称。例如：
-- -------------------- ---- -------
----- ----------- - ------------------------
--------------------
------ -
---- -------
------------ -------------------
----------- -----------------
--
---------- ------------
---在上述代码中，我们首先使用 require 导入 multi-dotenv 包，然后调用 config 方法，通过 paths 属性配置环境变量文件的路径和名称，在 dotenvKey 属性中配置环境变量的名称。
使用环境变量
完成配置之后，我们就可以在项目中使用环境变量了。在代码中使用的方式与我们平常使用 process.env 的方式一样，只不过在前面加上了我们定义的环境变量名称，例如：
console.log(process.env.REACT_APP_API_URL);
以上代码就是输出名为 REACT_APP_API_URL 的环境变量的值。
multi-dotenv 使用示例
下面是一个完整的 multi-dotenv 使用示例，展示了如何使用该工具来读取不同环境下的数据库连接地址：
安装 multi-dotenv
首先，我们需要使用 npm 安装 multi-dotenv，在命令行中执行以下命令：
npm install --save-dev multi-dotenv
创建环境变量文件
在项目根目录下，创建 .env 和 .env.development 文件，然后在这两个文件中，分别配置 MONGODB_URI 环境变量的值。例如，在 .env 文件中，配置 MONGODB_URI 的值为：
MONGODB_URI=mongodb://localhost:27017/myapp
在 .env.development 文件中，配置 MONGODB_URI 的值为：
MONGODB_URI=mongodb://localhost:27017/myappdev
配置 multi-dotenv
在项目根目录下，创建 multi-dotenv.js 文件，并配置 multi-dotenv，例如：
-- -------------------- ---- -------
----- ----------- - ------------------------
--------------------
------ -
---- -------
------------ ------------------
--
---------- --
---在上述代码中，我们指定了 env 和 development 两个环境变量路径，同时 dotenvKey 为空。
使用 multi-dotenv
最后，在代码中，我们可以直接使用 process.env.MONGODB_URI 获取对应环境变量的值，例如：
-- -------------------- ---- ------- ----- -------- - -------------------- ----------------------------------------- - ---------------- ---- --- ----- -- - -------------------- -------------- -- -- - -------------------- ---------- -------- --- --------------- -- -- - -------------------- ---------- ---------- ---
以上代码即是使用 multi-dotenv 读取不同环境下的数据库连接地址的示例。
小结
多环境配置是前端开发中不可避免的问题。使用 multi-dotenv 可以非常方便地解决多环境配置问题，从而提高前端开发的效率和可靠性。本文介绍了 multi-dotenv 的详细使用方法，希望能够帮助到前端开发者。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005609d81e8991b448dedb2