在前端开发中，我们通常需要根据不同的环境对代码进行不同的处理，比如在开发环境下使用 mock 数据，在生产环境下使用真实数据；在某些浏览器中需要使用 polyfill 等等。手动处理这些环境变量比较繁琐，容易出错，因此我们可以使用 npm 包 babel-plugin-env-inject 来自动化处理这些事情。
一、安装和配置
首先，我们需要在项目中安装该 npm 包：
npm install babel-plugin-env-inject --save-dev
然后，在 .babelrc 文件中进行配置，添加如下代码：
-- -------------------- ---- -------
-
---------- -
-------------- -
------- -
------ -------------
---------- -------
--
---------- -
-------- ----
-
--
-
-上面的配置说明了两个参数，vars 和 globals，其中：
- vars：表示需要注入到代码中的变量及其对应的值，比如我们可以指定一个环境变量
ENV的值为production。 - globals：表示需要全局注入的变量及其对应的值，比如我们可以指定一个全局变量
DEBUG的值为true。
二、使用姿势
在配置好之后，我们就可以在代码中通过 process.env 来获取环境变量。比如有以下的代码：
import axios from 'axios'
const baseUrl = process.env.ENV === 'production' ? 'http://product-api.com' : 'http://test-api.com'
axios.get(baseUrl + '/api/data')
.then(res => {
console.log(res.data)
})在上述代码中，我们通过 process.env.ENV 来获取环境变量 ENV 的值，并根据其值来决定使用哪个接口地址。
此外，我们还可以在代码中使用全局变量 DEBUG 来判断是否是调试模式。比如：
if (DEBUG) {
console.log('this is debug mode')
}在这个例子中，DEBUG 的值是在 .babelrc 文件中指定的，如果其为 true，则会输出 this is debug mode。
三、总结
通过使用 npm 包 babel-plugin-env-inject，我们可以很方便地在代码中获取环境变量，全局变量等信息，并根据这些信息来决定代码的行为。这个工具在前端开发过程中非常实用，可以帮助我们自动化处理很多事情。同时，它的安装和配置也非常简单，只需要几步即可完成。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005579d81e8991b448d49e9