Интервьюер: Каков принцип файлов .env, обычно используемых в проектах? Как добиться?

внешний интерфейс JavaScript Vue.js
Интервьюер: Каков принцип файлов .env, обычно используемых в проектах? Как добиться?

1. Введение

Привет всем, яВакагава.Я участвую в ежегодном мероприятии популярных авторов Nuggets, вы можете нажать здесь, чтобы проголосовать за меня..Чтобы помочь большему количеству студентов, которые интересуются исходным кодом, хотят научиться читать исходный код и улучшить свои технические возможности интерфейса.. Я изо всех сил старался организоватьЧтение исходного кода, если вам интересно, вы можете добавить меня в WeChatruochuan12принимать участие. Каждый узнает около 200 строк исходного кода каждую неделю, что продолжается уже 5 месяцев.

Если вы хотите изучить исходный код, настоятельно рекомендую обратить внимание на написанную мной колонку (на данный момент подписано 2К человек)"Изучение серии "Общая архитектура исходного кода""ВключаютjQuery,underscore,lodash,vuex,sentry,axios,redux,koa,vue-devtools,vuex4,koa-compose,vue 3.2 发布,vue-this,create-vue,玩具viteБолее 20 статей исходного кода.

Этот склад статей https://github.com/lxchuan12/dotenv-analysis.git, попросите звезду ^_^

Чтение исходного кодаКаждую неделю проводился 18-й период. Поэтому ищите разнообразный исходный код, который стоит изучить и содержит небольшое количество строк кода.В основном файле dotenv всего 118 строк., это стоит нашего изучения.

Прочитав эту статью, вы узнаете:

1. 学会 dotenv 原理和实现
2. 学会使用 fs模块 获取文件并解析
3. 等等

2. Подготовка окружающей среды

# 推荐克隆我的项目，保证与文章同步
git clone https://github.com/lxchuan12/dotenv-analysis.git
# npm i -g yarn
cd dotenv-analysis/dotenv && yarn i
# VSCode 直接打开当前项目
# code .
# 我写的例子都在 examples 这个文件夹中，可以启动服务本地查看调试
# 在 dotenv-analysis 目录下
node examples/index.js

# 或者克隆官方项目
git clone https://github.com/motdotla/dotenv.git
# npm i -g yarn
cd dotenv && yarn i
# VSCode 直接打开当前项目
# code .

Если вам нужно отладить исходный код, вы можете прочитать эту мою статью:Начинающие: Front-end программисты должны освоить базовые навыки — отладка кода JS., и здесь повторяться не будем.

3. Роль дотенва

dotenv

Dotenvмодуль с нулевой зависимостью, который преобразует.envПеременные среды в файле загружаются вprocess.envсередина.

Если вам нужно использовать переменные, используйте следующие пакеты расширения.

dotenv-expand

Как мы все знаем,.envфайлы очень распространены в нашем проекте, вvue-cliиcreate-react-appиспользуется во всех.

vue-cli .env

create-react-app .env

4. Использование файла .env

Часто используется в наших проектах.env 文件Письмо:

NAME=若川
AGE=18
BLOG=https://lxchuan12.gitee.io
MP_WEIXIN='若川视野'
ACTIVITY=每周一起学200行左右的源码共读活动
WEIXIN=加我微信 ruochuan12 参与

Только из этого файла мы можем узнать, что необходимо реализовать следующие функции:

  1. Чтение файла .env
  2. Разобрать файл .env в объектную форму пар ключ-значение.
  3. Назначить процессу.env
  4. Наконец, вернуть объект, полученный после разбора

5. Простая реализация

Согласно задаче анализа, мы можем, наконец, реализовать код просто следующим образом:

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

const parse = function parse(src){
    const obj = {};
    // 用换行符 分割
    // 比如
    /**
     * NAME=若川
     * AGE=18
     * MP_WEIXIN=若川视野
     * BLOG=https://lxchuan12.gitee.io
     * ACTIVITY=每周一起学200行左右的源码共读活动
     * WEIXIN=加我微信 ruochuan12 参与
    */
    src.toString().split('\n').forEach(function(line, index){
        // 用等号分割
        const keyValueArr = line.split('=');
        // NAME
        key = keyValueArr[0];
        // 若川
        val = keyValueArr[1] || '';
        obj[key] = val;
    });
    // { NAME: '若川', ... }
    return obj;
}

const config = function(){
    // 读取 node 执行的当前路径下的 .env 文件
    let dotenvPath = path.resolve(process.cwd(), '.env');
    // 按 utf-8 解析文件，得到对象
    // { NAME: '若川', ... }
    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;

6. Продолжайте улучшать функцию конфигурации

В короткой версии функции конфигурации по-прежнему не хватает многих функций, таких как:

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

В соответствии с функцией мы можем легко реализовать следующий код:

function resolveHome (envPath) {
    return envPath[0] === '~' ? path.join(os.homedir(), envPath.slice(1)) : envPath
}

const config = function(options){
    // 读取 node 执行的当前路径下的 .env 文件
    let dotenvPath = path.resolve(process.cwd(), '.env');
    // utf8
    let encoding = 'utf8';
    // debug 模式，输出提示等信息
    let debug = false;
    // 对象
    if (options) {
        if (options.path != null) {
            // 解析路径
            dotenvPath = resolveHome(options.path)
        }
        // 使用配置的编码方式
        if (options.encoding != null) {
            encoding = options.encoding
        }
        // 有配置就设置为 true
        if (options.debug != null) {
            debug = true
        }
    }

    try {
        // 按 utf-8 解析文件，得到对象
        // { NAME: '若川', ... }
        // 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 };
    }
};

dotenvВ исходном кодеparseФункции в основном некоторые обычные и одинарные и двойные кавычки, кроссплатформенность и другая тщательная обработка. Здесь он пока не будет подробно описан, читатели и друзья могут ознакомиться с ним.исходный код дотенв.

7. Резюме

В виду статья не должна быть слишком длинной, статья представляет собой лишь более глубокий анализconfigфункция.parseФункция в настоящее время не анализируется глубоко.

резюме в одном предложенииdotenvПринципы библиотеки.использоватьfs.readFileSyncчитать.envфайл и разобрать файл в объект в виде пары ключ-значение, пройти и присвоить окончательный объект результатаprocess.envначальство.

Мы тоже можем не видетьdotenvисходный код, согласноapiОтодвиньтесь и реализуйте такую ​​функцию самостоятельно. наконец посмотреть иdotenvВ чем разница между самим исходным кодом. Это может быть дополнительная тренировка себя. или использоватьtsРефакторинг.

Эта статья также вдохновляет нас: технические пакеты и библиотеки, которые обычно используются в работе, заслуживают углубленного изучения, чтобы достичьзнай это, знай это.

Стоит отметить, что:dotenvИсходный код используетflowтип. также используется исходный код vue2flow. исходный код vue3 для использованияts.

Наконец, вы можете продолжать следовать за мной @ Ruo Chuan. добро пожаловать, чтобы добавить меня wechatruochuan12общаться, участвоватьЧитайте исходный код вместеДеятельность, каждый изучает около 200 строк исходного кода каждую неделю и вместе добивается прогресса.

Категории