当构建一个 web 应用或者服务时，我们通常会使用到各种环境变量来配置不同的版本或者参数。在前端开发中，我们经常会使用像 axios 或者 fetch 这样的工具来请求 API，而其中的一些参数（例如 API 地址或者授权码）是需要在不同的环境中进行配置的。为了使得这些应用更加轻便和易于管理，我们可以使用一个名为 env-to-script 的 npm 包来将这些环境变量注入到 JavaScript 文件中。
安装
你可以使用 npm 或者 yarn 来安装 env-to-script：
npm install env-to-script # 或者 yarn add env-to-script
使用方法
1. 引入 env-to-script
在你的 HTML 文件中，你需要先导入 env-to-script。
-- -------------------- ---- -------
--------- -----
------
------
--------- ---------------
------- ----------------------------------
---------
------
--------- -----------
------- -------------------------
-------
-------如果使用了类似 webpack 这样的构建工具，则需要使用 import 引入 env-to-script。
2. 配置环境变量
为了将环境变量注入 JavaScript 文件中，我们需要定义这些变量，并使用 window.env 来进行传递。在一个 .env 文件中，你可以定义你所需要的所有环境变量：
API_URL=https://api.example.com/v1 AUTH_TOKEN=123456 DEBUG=true
在你的 index.html 文件中，添加如下代码：
-- -------------------- ---- -------
---- -- ---------- -- ---
--------
---------- - -
-------- -------------
----------- ----------------
------ -----------
--
---------
---- -- ------------- ---- --- --- ------ ---
------- ----------------------------------
---- ---- ---------- ---- ---
------- -------------------------在这个例子中，我们使用了模板字符串来将 .env 文件中的变量注入到 window.env 对象中。你会注意到这里使用了 ${name} 这样的语法，这是一种使用了 envsubst 的内联环境变量替换形式（虽然你并不必须使用环境变量进行替换）。
3. 使用环境变量
一旦完成了环境变量的设置，你就可以在你的 JavaScript 文件中通过访问 window.env 来引用所需要的环境变量了。
const apiUrl = window.env.API_URL; const authToken = window.env.AUTH_TOKEN; const isDebug = window.env.DEBUG === "true";
4. 打包构建
如果你使用了 webpack 或者其他类型的 JavaScript 打包器，你可能需要进行其他配置，才能够将环境变量注入到你的应用程序中。将环境变量传递给 JavaScript 是一个很常见的需求，在文档中也能够找到更多的具体细节。
示例
你可以在项目的 GitHub 仓库中查看更加详细的示例。这个示例展示了如何通过环境变量来设置不同 API 端点进行请求。
-- -------------------- ---- -------
-- ---- --- --- ---------------------------
----- ------ - -------------------
-- -------------
----- ----- - ----- ---------- --------- -- -
----- -------- - ----- ----------------------------- -
------- -------
-------- -
--------------- -------------------
--
----- ---------------- --------- -------- ---
---
----- - ----- - - ----- ----------------
------ ------
--
-- ----------
----- --------- - ----- ----- -- -
----- --------- - ----------------------
----- -------- - ----- ------------------------ -
-------- -
-------------- ------- --------------
--
---
----- ---- - ----- ----------------
------ -----
--
-- -- ----- --------------
-- ----------------- --- ------- -
-- ------- --- ------- --------- --------
-结论
env-to-script 让我们能够在前端代码中轻松地使用环境变量，无需担心环境变量变化导致代码出错的问题。而且，它对于传递复杂的环境变量也是非常方便的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eae81e8991b448dc2ea