在前端项目中，我们通常需要使用环境变量来管理一些配置信息，例如 API 地址、数据库连接等。而传统的方法是在代码中直接使用硬编码，但是这种方式存在很多缺点，如难以进行统一管理、难以切换不同环境等。因此，本文介绍一种 npm 包 envsub，用于方便地替换环境变量。
1. 安装
使用 envsub 首先需要安装它，可以使用 npm 命令进行安装：
npm install envsub --save-dev
2. 配置
安装好后，需要在项目配置文件中进行配置，例如在 webpack.config.js 中：
-- -------------------- ---- -------
----- - ----------------- - - -------------------
----- ------ - ------------------
----- ------ - -
---
-------- -
--- -------------------
--------- --------------
-------- --------------------------
---
--
--
-------------- - ---------------在这个例子中，我们使用了 webpack 的 EnvironmentPlugin 来传递环境变量，并将整个配置文件传给 envsub 函数进行处理。envsub 函数会将配置文件中的 ${process.env.KEY} 字符串替换为对应的环境变量值。
3. 使用
配置完成后，就可以在代码中使用环境变量了。例如，在 React 中：
-- -------------------- ---- -------
------ ----- ---- --------
-------- ----- -
----- -------- ---------- - ------------------------------
------------ -- -
--------------------- --- ----
-- ----------
------ -
-----
-------------------------------
---------------
------
--
-
------ ------- ----在这个例子中，我们使用 useState 和 useEffect 钩子来保存和使用环境变量。在 h1 和 p 标签中使用 process.env 可以直接访问环境变量。
4. 示例代码
可以查看 envsub 的 GitHub 页面中的 examples 目录，其中包含了各种使用场景的示例代码。
5. 结语
通过使用 npm 包 envsub，我们可以方便地替换环境变量，使得项目的开发和部署更加便捷。同时，envsub 还提供了很多自定义选项，可以根据实际情况进行配置，更好地满足开发需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/envsub