浅析.env文件的工作原理以及它是如何实现的

　　我们在项目中使用环境变量时，经常会使用到 .env 文件，那么关于 .env 文件中的内容是如何设置的？

　　VUE_APP_URL 是在 .env.* 文件中定义的，在项目启动时，vue-cli 会将以 VUE_APP_ 开头的变量读取至环境变量，这是 vue-cli 强制要求的“你想用我的工具，就得遵循我定的规则”，其实这背后是一系列工具链（webpack + dotenv + webpack DefinePlugin）相互作用的成果。

一、dotenv 的作用

　　dotenv 是一个零依赖模块，可将 .env 文件中的环境变量加载到 process.env 中。

　　众所周知，.env 文件在我们项目中非常常见，在 vue-cli 和 create-react-app 中都有使用。

二、.env 文件的使用与实现

　　我们项目中经常会用到 .env 文件写法

NODE_ENV = production
VUE_APP_DOMAIN = http://dev.modb.cc:9090
VUE_APP_BUCKET_PRIVATE = oss-estest-private
VUE_APP_BUCKET_PUBLIC = oss-estest-public
VUE_APP_MODB = https://dev.modb.cc

　　单从这个文件来看，我们可以知道有如下功能需要实现：

读取 .env 文件
解析 .env 文件拆成键值对的对象形式
赋值到 process.env 上
最后返回解析后得到的对象

　　根据分析问题，我们最终可以简单把代码实现如下

const fs = require('fs');
const path = require('path');

const parse = function parse(src){
    const obj = {};
    // 用换行符分割
    src.toString().split('\n').forEach(function(line, index){
        // 用等号分割
        const keyValueArr = line.split('=');
        key = keyValueArr[0];       // NAME
        val = keyValueArr[1] || '';  // VALUE
        obj[key] = val;
    });
    // { VUE_APP_DOMAIN: 'http://dev.modb.cc:9090', ... }
    return obj;
}

const config = function(){
    // 读取 node 执行的当前路径下的 .env 文件
    let dotenvPath = path.resolve(process.cwd(), '.env');
    // 按 utf-8 解析文件，得到对象 { VUE_APP_DOMAIN: 'http://dev.modb.cc:9090', ... }
    const parsed = parse(fs.readFileSync(dotenvPath, 'utf-8'));

    // 键值对形式赋值到 process.env 变量上，原先存在的不赋值
    Object.keys(parsed).forEach(function(key){
        if(!Object.prototype.hasOwnProperty.call(process.env, key)){
            process.env[key] = parsed[key];
        }
    });
    // 返回对象
    return parsed;
};

console.log(config());
console.log(process.env);

// 导出 config parse 函数
module.exports.config = config;
module.exports.parse = parse;

三、继续完善config函数

　　我们看下源码config函数，然后对比下我们简版的 config 函数还缺失挺多功能，比如：

可由用户自定义路径
可由用户自定义解析编码规则
添加 debug 模式
完善报错输出，用户写的env文件自由度比较大，故需添加容错机制

　　根据功能，我们很容易实现以下代码：

function resolveHome (envPath) {
    return envPath[0] === '~' ? path.join(os.homedir(), envPath.slice(1)) : envPath
}
const config = function(options){
    let dotenvPath = path.resolve(process.cwd(), '.env'); //读取node执行的当前路径下的.env文件
    let encoding = 'utf8';  // utf8
    let debug = false;   // debug 模式，输出提示等信息
    if (options) {  // 传入配置对象
        if (options.path != null) {
            dotenvPath = resolveHome(options.path)  // 解析路径
        }
        if (options.encoding != null) {// 使用配置的编码方式
            encoding = options.encoding
        }
        if (options.debug != null) {  // 有配置就设置为 true
            debug = true
        }
    }
    try {
        // 按 utf-8 解析文件，得到对象// debug 传递给 parse 函数 便于
        const parsed = parse(fs.readFileSync(dotenvPath, { encoding }), { debug });

        // 键值对形式赋值到 process.env 变量上，原先存在的不赋值
        Object.keys(parsed).forEach(function(key){
            if(!Object.prototype.hasOwnProperty.call(process.env, key)){
                process.env[key] = parsed[key];
            } else if (debug) {
                console.log(`"${key}" is already defined in \`process.env\` and will not be overwritten`);
            }
        });
        // 返回对象
        return parsed;
    }
    catch (e) {
        return { error: e };
    }
};