前言
本文参加了由公众号@若川视野 发起的每周源码共读活动，点击了解详情一起参与。
距离第一篇文章的发送，已经过了一月有余，阅读量从0慢慢递增的感觉，让我喜悦的同时更坚定了我要将优质文章输出的初衷，技术可能真的不如各位读者，但是我会竭尽所能，克服困难，让文章越来越优秀易懂。
铁子们，我是跑不快的猪，之前总翻阅掘金的铁子，可能对“若川”这位大神有所了解。今天有幸加入了由“若川”发起的源码共读活动，再次开始阅读源码的旅程。在短短接触的过程中，能感受到“若川”的平易近人，有大神的样子却没有大神的架子，这里附上活动文，希望有兴趣的小伙伴能加入。《从 vue3 和 vite 源码中，我学到了一行代码统一规范团队包管理器的神器》
我和源码
在正文开始前，也想和大家聊聊关于源码阅读的感觉，可能是因为带着不纯的目的（赚钱）接触的前端，所以导致很长一段时间缺少很多热爱IT的铁子们的那种钻研精神。不关注框架的底层，别人的思路，或者就是简单的一扫而过，然后嗤笑一下“这代码，连个注释都没有”。随着年龄的增长，以及对这个行业的接触，慢慢会有一些思考，我们用着其他人的框架，实现了自己公司的业务，那他们是怎么做到的。于是产生了对源码的好奇。
于是一股脑的开始看各类源码，没有目标，没有想法，就像用铁锹装麻袋的感觉，时间耗费了不少，精力也花费了不少，但是最终都以负成就感告终。所以这里给各位准备尝试，或者对读源码有兴趣的铁子几个我走过的弯路。
- 不要上来就开始阅读如
vuereact这种比较大型框架的源码，除了挫败感，真的没留下什么。所以从简单项目入手。 - 读源码的时候要时刻牢记自己的目的，要时刻知道自己要读写什么，是设计模式，还是代码的写法，还是功能的实现。亦或者是核心逻辑，之前的我往往读着读着就被带跑了，然后跑到很遥远。
- 建立一套比较简单且完善的读源码逻辑，刚开始要干什么，然后干什么，如何调试等。
only-allow
这个包模块，是今天的主角，所以我们要先了解一下这个包模块做了什么。npmjs:only-allow。看完介绍我们知道了，在多人开发维护项目的时候，大家用的包管理工具可能不相同，有可能是yarn 、npm、或者 pnpm .如此一来有可能会造成项目依赖的版本不同，导致不可控后果。也就是说only-allow能帮助我们优化项目包管理工具的规范，以达到统一。
第一步---了解它
将需要阅读的包模块安装，然后从node-modules 找到我们需要阅读的源码模块。查看它的package.json 文件，这个文件不用多介绍了，它给我的感觉好比一个包模块的名片，我们从中可以看到，我们目标模块的依赖模块、入口文件、版本、以及仓库的信息。如果我们还不了解这个模块的使用，也可以顺便看一下README.md文件更详细的去了解一下。
然后最好的，就是下载之后我们按照它的文档进行一下使用，来看看具体实现的功能。我们在自己创建的项目的package.json中，写入它要求写入的语句。
这里声明一下，当前项目的包管理工具是
cnpm ，之后，我们用 yarn 来随便安装一个包模块，看一下效果。这里用 yarn 安装了一下 vue 模块。
在终端中出现了如下图的内容。
可以看到在执行
yarn add vue 之后，紧接着执行了 npx only-allow cnpm 然后弹出了一个红色警告框，里面的内容大致是“请使用cnpm install 来为项目进行安装”
而之前说过的它执行的 npx only-allow cnpm 这个命令，其实就是我们在 package.json 中添加的内容，这里还涉及一个知识点，就是 preinstall ，它是一个钩子，从名字不难理解，会执行在 install 命令之前。那发散一下，其实它能做更多的事情，而不只是管理包模块工具，比如在安装前，进行node 版本校验等实用功能。
第二步---思考
第二步，其实我们要先停下手指头，然后思考一下， 我即将要阅读的这部分源码，我想知道什么，我想要得到什么。那其实，我在这部分想了两个问题：
- 这个包模块按照它的
README.md中介绍，我们通过一行简单的代码实现了包模块管理工具的统一，那这个包模块如何获取了我所使用的包模块管理工具。 - 在我使用了一下这个模块后，我发现当我不按照约定的包模块管理工具使用后，它的提示会有个漂亮的红色样式，这个样式怎么实现的。
第三步---准备
在有了明确的目标后，第三步要做的就是准备工具，开始‘解剖’。打开“vscode”，我们要做的是可以像在google浏览器中一样，增加断点，查看调用栈，逐步解析。那“vscode”提供了很友好的读源码的功能。ctrl+shif+p打开配置栏。并输入 auto attach 我们会看到如下图的界面。
这里进行一下选择以便符合我们读源码的场景。我在这里选择的是“智能”
在 only-allow 包中通过 package.json 我们了解到了入口文件是 bin.js 。
然后我们需要打开调试的终端。可以在我们目录下的
package.json 中找到。
点击后上方就出现了我们可以调试的命令，选择
perinstall 就调出了调试的终端。
这个时候，我们可以在其中打断点了，如果还能记得读源码的目的的话，我们这个时候就比较有方向感。在其中某一句打断点之后（点击行号前面的红点，来进行断点的加入）。
接着我们在调试终端输入
yarn add vue -D 就会在我们断点处来进行暂停，方便我们的源码阅读了。
第四步---结果
这个包模块的代码行数比较少，逻辑也并不复杂。而我想要知道的问题也有了答案。
- 如何知道安装的包模块管理工具：是通过
process.argv.slice(2)[0]来获取 - 当使用了错误的包管理工具后有样式的提示框：是通过模块包
boxen来实现的，那在我以后需要如此样式的时候起码不会没有方向
最后，希望各位在疫情肆虐的一年，平平安安，健健康康。
