在前端开发中,需要访问服务器或调用 API 接口时,常常需要使用敏感数据,如密钥或密码。为了保证数据的安全性,开发者们通常会将这些敏感信息放在环境变量中,通过读取环境变量来在代码中使用。
然而,环境变量的读取和配置并不是一项容易的任务,尤其当需要在多个不同的环境中使用不同的参数时,配置起来就更加复杂。
这时,dotenv-to-webpack 这个 npm 包就为我们提供了一种简单可靠的解决方案。它能够帮助我们自动地将环境变量注入到 webpack 构建过程中。
安装
我们可以通过 npm 来安装 dotenv-to-webpack:
--- ------- ----------------- ----------
在 webpack 配置文件中引入该插件:
----- ------ - ----------------------------- -------------- - - -- --- -------- - --- -------- - --
这样,我们就可以在代码中通过 process.env
访问配置文件中的环境变量。
使用说明
使用 dotenv-to-webpack 很简单,我们只需要新建一个 .env
文件,将需要配置的环境变量写入其中,然后在 webpack 的配置文件中引入该插件即可。插件将自动读取这个 .env
文件,并将环境变量注入到 webpack 的 process.env 中。
下面是一个例子:
假设我们需要在 webpack 中引入 API_KEY
的环境变量,只需要在 .env
文件中写入:
------------------
然后在代码中可以这样使用:
--------------------------------- -- ------------
值得注意的是,dotenv-to-webpack 的默认行为是将所有以REACT_APP_
前缀开头的环境变量放入 process.env 中,如需使用其他前缀,可以在 webpack 配置文件中设置:
----- ------ - ----------------------------- -------------- - - -- --- -------- - --- -------- ------- --------- -- - --
以上代码将会将所有以 MY_APP_
开头的环境变量注入到 process.env 中。
示例代码
这是一个使用 dotenv-to-webpack 的示例代码:
.env
文件:
------------------ -----------------------------
webpack.config.js
文件:
----- ------ - ----------------------------- -------------- - - ------ ----------------- ------- - --------- ----------- -- -------- - --- -------- - --
index.js
文件:
--------------------------------- ---------------------------------
运行 webpack 构建,并启动生成的 bundle.js:
------------------ ----------------------------- ------------------
通过以上代码可以看出,在环境变量配置文件 .env
中我们定义了 API_KEY
和 API_URL
两个环境变量,其中 API_URL
的值为 http://localhost:3000
。
通过 webpack 打包后,我们在代码中直接调用 process.env.API_KEY
和 process.env.API_URL
即可获取以上两个环境变量。
结论
dotenv-to-webpack 是一个十分便利的 npm 包,可以帮助前端开发者们将环境变量配置的烦恼从身上解放出来。在大多数情况下,我们只需设置 .env
中的环境变量即可。值得一提的是,我们也可以通过设置前缀来方便的区分不同的环境变量。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60056cf681e8991b448e6b77