介绍
document-env-vars 是一个 npm 包，用于将环境变量注入到 HTML 文件中的 JavaScript 变量中。它可以让你在编译期间，自动将环境变量注入到 HTML 文件中，从而避免在运行时读取环境变量的麻烦。
安装
要安装 document-env-vars，可以使用 npm 命令：
npm install document-env-vars
使用教程
在项目根目录下创建 .env.local 文件，将你需要的环境变量定义在该文件中：
API_URL=http://test.com/api
在你的 HTML 文件中，使用如下方式定义一个 JavaScript 变量来注入环境变量：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ----------------------- ------- ------------------------------ ------- ------ -------- -------------------- -- ---------------------- --------- ------- -------注意： 在这个例子中，我们需要手动引入 env.js 文件。如果你的项目使用了打包工具，如 webpack 或者 rollup，你可以使用文件加载器来自动注入该文件。
在 webpack 配置文件中，引入 document-env-vars：
-- -------------------- ---- ------- ----- --------------- - ----------------------------- -------------- - - -- --- -------- - --- ----------------- ----- --------------- ------------- ----- -- - -- --- -在该配置文件中，我们向 DocumentEnvVars 构造函数传入了两个参数：
- path：表示的是 .env.local 文件的路径，你也可以指定其他的名称。
- variableName：表示希望我们创建的 JavaScript 全局变量的名称。在这里我们定义为 env。
运行 webpack 打包你的应用。现在你可以在 HTML 文件中访问定义的环境变量。
<script> console.log(env.API_URL); // 输出：http://test.com/api </script>
深度解析
在这个教程中，我们使用了 webpack 插件来自动注入环境变量到 HTML 文件中。作为一个前端开发者，webpack 的使用是必备的技能。
DocumentEnvVars 插件使用了 html-webpack-plugin 这个插件来获取 HTML 文件，在编译过程中自动插入注入环境变量的 JavaScript 文件。
结论
document-env-vars 可以让你在编译期间自动注入环境变量到 HTML 文件中，以避免在运行时读取环境变量。
这是一个非常有用的工具，特别是在打包应用程序，或者需要在多个环境下部署时。
希望这个教程对你有帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600554d481e8991b448d207e