浅浅地聊一聊 dotenv 包和 .env 文件我正在参与掘金会员专属活动-源码共读第一期在公司做过项目的小伙伴应该会

我正在参与掘金会员专属活动-源码共读第一期，点击参与

前言

在公司做过项目的小伙伴应该会注意到，我们做的每个项目上都会有个 .env 文件。其实在各种前端项目中，.env 文件随处可见，里面其实都是一些关于项目中的配置项，虽然可能看起来不太起眼，但是 .env 文件在前端工程化中是有一定的用处和意义的。

今天我们就来学习一下 .env 文件，这个全局默认配置文件。

不过在学习 .env 之前，我们先来了解一下 dotenv。关于它的概念，大家可以看看 npm 官方文档。官方是这样说的：Dotenv 是一个零依赖的模块，它能将环境变量中的变量从 .env 文件加载到 process.env 中。

dotenv 的源码大约一百来行，我简单地阅读了一遍它的源码。总的来说就是，因为不同的项目需求，我们需要配置不同的环境变量，而 dotenv 可以按需加载不同的环境变量文件。我们可以这样使用它。

const dotenv = require('dotenv').config()

一百多行的源码就不附上了，这里附上源码地址，首先可以看看它的 Readme 文件，方便认识 dotenv 这个东西。

在源码部分里，它最后导出了两个函数，分别是 config 和 parse。

这两个函数分别什么作用呢？config 函数是为了读取 .env 文件并将其添加到 process.env 中。parse 函数可以解析一段包含环境变量的字符串，其中在 config 函数里面使用了 parse 函数来解析 .env 文件。

简单了解了 dotenv，我们现在来学习一下 .env。下面是一个 .env 文件的示例。

NAME_MY = 一条会coding的shark
AGE_MY = EIGHTEEN
ACTION_YOU = 点赞收藏转发

可以看出，.env 文件命名很有特点，大写，下划线分隔，和 redux 的 type.js 文件中的变量一样的命名方式。然后安装 dotenv 包后，通过 process.env 访问这些变量。

下面这是几种不同类型的 .env 文件：

.env：全局默认配置文件，无论什么环境都会加载合并。

.env.development：开发环境的配置文件。

.env.production：生产环境的配置文件。

根据英文名可以对应到相关的环境，比如 .env.development 在开发环境加载，.env.production 生成环境加载。

平时在做项目的时候经常能看见这个文件，一开始会觉得无关紧要，感觉不用花时间去了解它。但是时间久了之后我会从很多地方去看到关于它的影子，会慢慢地对它越来越了解（可能是看多了它吧）。然后通过这次单独地对它进行学习，也算是对它搞清楚了。

其实从某种意义上讲，项目做得多，哪怕不去单独看关于它的资料，我们也可以慢慢地知道 .env 文件的来龙去脉。但是如果抽出时间去学习它，只有好处，会让我们对它更加理解。