济南网站建设的方案,必要网站用什么做的,做网站实际尺寸是多少,集团网站推广大家好#xff0c;我是若川。最近组织了源码共读活动#xff0c;感兴趣的可以加我微信 ruochuan12本文来自V同学投稿的源码共读第六期笔记#xff0c;写得很有趣。现在已经进行到第十期了。你或许经常看见 npm 更新的提示。npm 更新提示面试官可能也会问你#xff0c;组件库… 大家好我是若川。最近组织了源码共读活动感兴趣的可以加我微信 ruochuan12本文来自V同学投稿的源码共读第六期笔记写得很有趣。现在已经进行到第十期了。你或许经常看见 npm 更新的提示。npm 更新提示面试官可能也会问你组件库更新了怎么让使用组件的人都知道。本文分析这个提示的原理实现很有趣。1前言Hello大家好这里是V同学今天我们又来看源码了今天若川大大没有写源码阅读的掘金文章正好可以让我们一试身手考验一下我们之前跟随着川大的源码所锻炼的源码阅读能力今天我们要看的是 update-notifier 的源码老样子在我们阅读源码之前先分析一手看看这个到底是干嘛用的吧2分析这个是我们本期源码阅读的代码仓库大家可以先克隆下来我们且慢慢分析我们可以用5W1H分析法来试着去分析一下5w1h那么什么是5w1h呢简单来说就是从原因Why对象What地点Where时间When人员Who方法How这六个纬度去思考那我们就一个一个来What首先我们要来看看本期源码是什么通过度娘我们可以大致的了解到我们本期要看的源码似乎是一个和更新有关的工具可以更新你的npm包和cli应用程序我们在看一下仓库的readme现在就非常的清晰明了了这是一个以非入侵的方式通知你更新的这么一个工具Why那么我们为什么要读它的源码呢有一下几点1. 美化终端输出信息描绘边框。
2. 我们可以学会怎么去开启子进程
3. 给一个node方法作为传参的几种方式
4. 通过configstore这个库我们能够持久化存储一些信息
5. 通过latest-version获取对应pkg包的最新版本信息Who谁应该去读他的源码以下几类人适合去读他的源码当然也适合来看看我的源码阅读的文章1. 源码爱好者
2. 学习爱好者
3. 希望能学到东西的人
4. V同学的粉丝
……在我的源码阅读的文章里面我会一步一步的手摸手教你怎么去拆分阅读以及调试源码Where在哪里学的话这个大家可以视实际情况而定When什么时候学的也取决于你的最佳学习时间每个人的最佳的专注和学习时间不一样具体的话视个人情况而定How那么我们就到了最关键的一点怎么去读没有度过源码的同学请放心跟着V同学走手摸手包你药到命除额不不不是药到病除3依赖刚刚我们把仓库的地址克隆下来了那么接下来我们就安装一下依赖吧进入到对应的仓库地址输入一下命令npm i 或者yarn4测试测试非常的重要他可以让我们非常清晰的了解一个框架的功能以及作者写这个测试的意图所以我们看源码可以先看看测试我这边用的是 vscode找到 package.json 文件点击调试进入测试有人说了我用的不是vscode怎么办呢其实也简单的首先还是先问问百度你是用的编译器是否有对应的测试插件没有的话可以在编译器的控制台输入测试中的命令npm run test或者yarn test即可运行对应的测试这个是看全部代码的方式具体通过测试看源码的案例可以看我的这一篇笔记5准备今天我们只看核心代码所以我们进入example 这个 JS 文件里面去这个案例非常的简单一共就17行代码运行第四行作者给我们的命令node example我们发现没有反应那么这是怎么一回事呢我们来看一下注释You have to run this file two times the first time翻译过来就是第一次必须运行此文件两次嘿我运行过的别的程序都只需要运行一次就你要运行两次你搞特殊是吗那么我们仔细来想想要运行两次呢?我们在来看看注释This is because it never reports updates on the first run翻译过来就是这是因为它不会在第一次运行时报告更新我们带着第一次为什么不会更新的问题来看源码对于vscode进行node调试我把过程放在以下gif图里面大家可以进行参考6阅读首先我们在example里面打上断点然后进入调试我们这时候发现断点进来了我们点击调试的↓按钮我们发现我们进到了index.js文件里面所以这个就是他的核心文件我们进入到了183行第一部分实例化对象在往下走我们进入到了第一部分我们传入的参数会被option接到然后对拿到的对象进行数据清洗只保留需要的数据如果没有需要的数据就给他抛出个错误接下来把需要的数据挂载到实例对象身上检查更新时间是否符合规范知识点process.env 是 Node.js 中的一个环境对象。其中保存着系统的环境的变量信息。通过获取process检查是否禁用更新知识点isCi的作用是如果当前环境是持续集成服务器则返回true判断是否在Npm脚本中通知判断一下你是否禁用更新了知识点ConfigStore的作用是轻松加载和保留配置而无需考虑在哪里以及如何知识点Chalk的作用是让你的终端更美观好看具体在Vue-release这篇文章中有提到过如果你没禁用的话帮你把包名通过ConfigStore进行持久化存储顺便把最后一次检查的时间更新成现在第二部分检查更新接下来我们顺着代码的路径走到了中间这一行进去的第一目光我们的卡姿兰大眼睛就可以看到好几个判断第一个判断的大概意思是如果你没有本地存储或者禁用更新的情况下那么就不执行了我们就说拜拜了接下来他拿到我们的之前存进去的update对象来更新关键点这里有一个关键点就是我们之前埋下的坑他第一次为什么不执行因为这里第一次的时候我们没有执行过check.js这个文件所以我们这里的这个update是空的这里在埋下一个点为什么updata是空的导致他只执行一次呢这个后文会讲到我们接着往下看知识点spawn 详情请参考spawn这里通过spawn开启一个子进程运行check.js然后把options作为调用check.js的命令行参数check.js文件接下来我们就进入到了check.js文件里面const options JSON.parse(process.argv[2]);这一段代码意思是把我们刚才通过控制台传的option参数拿过来知识点latestVersion 获取最新版本的 npm 包拿过来之后新建一个实例 然后去拿到对应的包名、最新版本、当前版本、版本差别的信息拿到信息之后更新一下最后一次检查更新对应的时间在顺便把信息塞到持久化存储当中的update里面、然后关闭spawn打开的子进程返回原来的函数里面第三部分当拿到最新版本的信息之后他会把对应的实例对象返回出去返回到了example.js文件里面返回到了example之后去执行notify虽然说之前的update被存进去了但是在notify的时候没有被读出来所以就导致之前的update因为是空的在最开始的时候进不去notify的函数就被return掉了这就是为什么第一次执行的时候什么都不返回的原因了知识点is-installed-globally检查您的软件包是否已全局安装知识点is-yarn-global检查您的yarn包是否已全局安装接下来他会检查你是不是全局安装了全局是不是用的yarn安装的接下来就是控制你的控制台在你的控制台上输入一些安装命令知识点boxen在终端中创建框完成之后通过boxen构建一个框框然后用template去显示更新信息7总结我们用了5w1h分析法在看源码之前进行了分析思考我们学会了怎么去通过编译器去调试测试用例我们知道了看源码前应该做哪些准备我们知道了可以带着问题去看源码可以提高你的阅读效率我们知道了检查更新npm文件的全部流程我们知道了process.env 是 Node.js 中的一个环境对象里面保存着系统的环境的变量信息ConfigStore可以进行持久化存储Chalk可以让你的终端更好看spawn可以生成一个子进程去执行命令is-installed-globally可以检查你的软件包是否已全局安装is-yarn-global可以检查你全局安装的是否是通过yarn安装的在终端中画框框可以用 boxenisCi的作用可以判断当前环境是持续集成服务器latestVersion可以获取最新版本的 npm 包最主要的是我们学会了怎么样去从一个啥也不是的小白去学习去拆分源码解构源码理解作者的思路与想法我们可以把步子迈的小一点一小步一小步的去走步子太大了容易摔倒把它掰开了揉碎了慢慢消化吸收理解成为自己的东西加油奥利给最近组建了一个江西人的前端交流群如果你是江西人可以加我微信 ruochuan12 私信 江西 拉你进群。推荐阅读1个月200人一起读了4周源码我历时3年才写了10余篇源码文章但收获了100w阅读老姚浅谈怎么学JavaScript我在阿里招前端该怎么帮你可进面试群················· 若川简介 ·················你好我是若川毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列从2014年起每年都会写一篇年度总结已经写了7篇点击查看年度总结。同时最近组织了源码共读活动识别上方二维码加我微信、拉你进源码共读群今日话题略。欢迎分享、收藏、点赞、在看我的公众号文章~
