科技团队网站,北京今天新闻最新消息新闻,做网站后期维护,百度网盘登录1. 前言大家好#xff0c;我是若川。持续组织了5个月源码共读活动#xff0c;感兴趣的可以点此加我微信 ruochuan12 参与#xff0c;每周大家一起学习200行左右的源码#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。本文仓库 h… 1. 前言大家好我是若川。持续组织了5个月源码共读活动感兴趣的可以点此加我微信 ruochuan12 参与每周大家一起学习200行左右的源码共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。本文仓库 https://github.com/lxchuan12/dotenv-analysis.git求个star^_^[1]源码共读活动每周一期已进行到19期。于是搜寻各种值得我们学习且代码行数不多的源码。dotenv 主文件仅118行[2]非常值得我们学习。阅读本文你将学到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 .如果需要对源码进行调试可以看我的这篇文章新手向前端程序员必学基本技能——调试JS代码这里就不再赘述了。3. dotenv 的作用dotenv[3]Dotenv 是一个零依赖模块可将 .env 文件中的环境变量加载到 process.env 中。如果需要使用变量则配合如下扩展包使用。dotenv-expand[4]众所周知.env 文件在我们项目中非常常见在 vue-cli 和 create-react-app 中都有使用。vue-cli .env[5]create-react-app .env[6]4. .env 文件使用我们项目中经常会用到.env 文件写法NAME若川
AGE18
BLOGhttps://lxchuan12.gitee.io
MP_WEIXIN若川视野
ACTIVITY每周一起学200行左右的源码共读活动
WEIXIN加我微信 ruochuan12 参与单从这个文件来看我们可以知道有如下功能需要实现读取 .env 文件解析 .env 文件拆成键值对的对象形式赋值到 process.env 上最后返回解析后得到的对象5. 简单实现根据分析问题我们最终可以简单把代码实现如下const fs require(fs);
const path require(path);const parse function parse(src){const obj {};// 用换行符 分割// 比如/*** NAME若川* AGE18* MP_WEIXIN若川视野* BLOGhttps://lxchuan12.gitee.io* ACTIVITY每周一起学200行左右的源码共读活动* WEIXIN加我微信 ruochuan12 参与*/src.toString().split(\n).forEach(function(line, index){// 用等号分割const keyValueArr line.split();// NAMEkey 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. 继续完善 config 函数简版的 config 函数还缺失挺多功能比如可由用户自定义路径
可由用户自定义解析编码规则
添加 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);// utf8let encoding utf8;// debug 模式输出提示等信息let debug false;// 对象if (options) {if (options.path ! null) {// 解析路径dotenvPath resolveHome(options.path)}// 使用配置的编码方式if (options.encoding ! null) {encoding options.encoding}// 有配置就设置为 trueif (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 函数主要是一些正则和单双引号、跨平台等细致处理。这里就暂时不阐述读者朋友可以查看dotenv 源码[7]。7. 总结鉴于文章不宜过长文章只比较深入的分析了 config 函数。parse 函数目前没有深入分析。一句话总结 dotenv 库的原理。用 fs.readFileSync 读取 .env 文件并解析文件为键值对形式的对象将最终结果对象遍历赋值到 process.env 上。我们也可以不看 dotenv 源码根据 api 倒推自己来实现这样的功能。最终看看和 dotenv 源码本身有什么差别。这样也许更能锻炼自己。或者用 ts 重构它。本文同时也给我们启发围绕工作常用的技术包和库值得深入学习做到知其然知其所以然。值得一提的是dotenv 源码使用的是 flow 类型。vue2 源码也是用的 flow。vue3 源码改用 ts了。最后可以持续关注我若川。欢迎加我微信 ruochuan12 交流参与 源码共读 活动每周大家一起学习200行左右的源码共同进步。参考资料[1]本文仓库 https://github.com/lxchuan12/dotenv-analysis.git求个star^_^: https://github.com/lxchuan12/dotenv-analysis.git[2]dotenv 主文件仅118行: https://github.com/motdotla/dotenv/blob/master/lib/main.js[3]dotenv: https://github.com/motdotla/dotenv[4]dotenv-expand: https://github.com/motdotla/dotenv-expand[5]vue-cli .env: https://cli.vuejs.org/zh/guide/mode-and-env.html#%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F[6]create-react-app .env: https://create-react-app.dev/docs/adding-custom-environment-variables/#what-other-env-files-can-be-used[7]dotenv 源码: https://github.com/motdotla/dotenv/blob/master/lib/main.js················· 若川简介 ·················你好我是若川毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》20余篇在知乎、掘金收获超百万阅读。从2014年起每年都会写一篇年度总结已经写了7篇点击查看年度总结。同时最近组织了源码共读活动帮助3000前端人学会看源码。公众号愿景帮助5年内前端人走向前列。识别上方二维码加我微信、拉你进源码共读群今日话题略。分享、收藏、点赞、在看我的文章就是对我最大的支持
