前言
在前端开发中，我们经常需要在不同环境下进行开发和构建，需要不同的配置，比如不同的 API 地址、不同的域名等。为了解决这个问题，我们可以使用 process.env 对象来获取环境变量，但是在浏览器中 process.env 没有定义，这就导致我们在前端代码中无法获取环境变量，从而无法进行不同环境的配置。
在这种情况下，我们可以使用 browser-env-vars 这个 npm 包来在前端代码中获取环境变量。
安装
使用 npm 安装：
npm install browser-env-vars
使用 yarn 安装：
yarn add browser-env-vars
使用
1. 设置环境变量
在使用 browser-env-vars 前，我们需要先在浏览器中设置环境变量。我们可以使用 <script> 标签在 html 文件中设置环境变量，如下：
<script>
window.__env__ = {
API_URL: 'http://localhost:3000/api',
DEBUG: true
};
</script>2. 引入并使用
在需要使用环境变量的地方，我们可以使用 import 或 require 来引入 browser-env-vars，然后使用 window.__env__ 来获取环境变量。
import env from 'browser-env-vars'; console.log(env.API_URL); // 输出：http://localhost:3000/api console.log(env.DEBUG); // 输出：true
3. 构建
在构建项目时，我们可以使用 webpack 的 DefinePlugin 将环境变量注入到前端代码中。
-- -------------------- ---- -------
----- ------- - -------------------
-------------- - -
-- ---
-------- -
--- ----------------------
-------------- -
-------- ------------------------------------
------ ---------------------------------
-
--
-
--然后我们可以在前端代码中使用 process.env 对象来获取环境变量。
console.log(process.env.API_URL); // 输出：http://localhost:3000/api console.log(process.env.DEBUG); // 输出：true
示例代码
以下是一个使用 browser-env-vars 的示例代码，其中 env.js 是使用 browser-env-vars 获取环境变量的模块，webpack.config.js 是 webpack 的配置文件，其中使用了 DefinePlugin 来注入环境变量到前端代码中。
env.js
import env from 'browser-env-vars'; export default env;
webpack.config.js
-- -------------------- ---- -------
----- ------- - -------------------
-------------- - -
-- ---
-------- -
--- ----------------------
-------------- -
-------- ------------------------------------
------ ---------------------------------
-
--
-
--app.js
import env from './env'; console.log(env.API_URL); // 输出：http://localhost:3000/api console.log(env.DEBUG); // 输出：true console.log(process.env.API_URL); // 输出：http://localhost:3000/api console.log(process.env.DEBUG); // 输出：true
总结
browser-env-vars 是一个非常有用的 npm 包，在前端开发和构建中可以帮助我们轻松地获取环境变量。本文介绍了 browser-env-vars 的基本使用方法及其在 webpack 中配置的方法，并给出了示例代码来帮助读者更好地理解。希望本文对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005662b81e8991b448e2045