什么是 envarify？
envarify 是一个 npm 包，它可以在 JavaScript 或 TypeScript 项目中，将环境变量从 process.env 注入到代码中，以便在代码中读取和使用这些环境变量。它通过在编译期间在代码中插入环境变量，而不是在运行时解析它们来工作。
安装 envarify
使用 envarify 很简单，首先需要在项目中安装它：
--- ------- -------- ----------
这里使用的是 --save-dev 标记，因为 envarify 是一个开发依赖。它只需要在开发期间使用。
配置 envarify
使用 envarify 很容易，只需在你的项目中创建一个 .env 文件，其中包含你的环境变量，如下所示：
------------ ---------------------
在你的 JavaScript 或 TypeScript 代码中，可以使用 process.env 来访问这些环境变量。例如，要访问 MY_VAR 变量，可以这样做：
--------------------------------
但是，当你使用 envarify 时，你需要将它添加到你的项目的构建过程中。在大多数情况下，你可以使用你的项目的打包器或构建工具来完成这项工作。在下面的示例中，我们使用 webpack 来演示如何配置 envarify。
在 webpack 配置文件中，做出如下更改：
----- -------- - ----------------------------
-------------- - -
-- ---
-------- -
-----------
--
--这将在编译过程中将你的环境变量注入到你的代码中。
示例代码
在下面的示例中，我们将演示如何使用 envarify 来注入环境变量并将其读入 JavaScript 或 TypeScript 代码中。
- 创建一个名为
index.ts的 TypeScript 文件，该文件包含以下内容：
--------------- --- --- ------------------------
- 创建一个名为
.env的文件，该文件包含以下内容：
--------- -----
- 在项目中安装 envarify：
--- ------- -------- ----------
- 在 webpack 配置文件中添加 envarify：
----- -------- - ----------------------------
-------------- - -
-- ---
-------- -
-----------
--
--- 使用 webpack 来构建你的项目：
--- -------
- 运行你的应用程序：
---- -------------
输出将如下所示：
-- --- --- -- -----
指导意义
使用 envarify 可以帮助你更轻松地在 JavaScript 或 TypeScript 项目中管理环境变量。它简化了访问变量的过程，并且可以在代码构建过程中处理它们，避免了在运行时解析变量的成本。这一点对于大型应用程序尤其重要，因为在运行时处理大量环境变量可能导致性能瓶颈。
下一步是在你的项目中尝试使用 envarify，看看它如何帮助你更轻松地管理环境变量和代码。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005694681e8991b448e4c6d