昆仑山

首页 » 问答 » 常识 » 前端小白工作记录之yarnlink
TUhjnbcbe - 2023/1/30 18:28:00

工作之后,发现每天都能学到新的知识,对此感觉工作真的令人着迷,每天丰富一点自己的知识面,通过积少成多,某一日我一定也能成为大牛,如果你也和我一样是个新手小白,那么就和我一起成长吧~~

前言

工作中碰到了一个棘手的事情,我们公司有封装自己的组件库,在我修复bug的时候,发现某一个bug的根本原因在于引用的某个组件中的if语句的判断条件不太对。

第一想法是修改组件库,可是随之而来的就是一个新问题

我修改了组件库之后,要怎么才能在push代码之前看到效果呢?

好家伙,这我还真不知道?

先说一下问题的原因,组件库中判断条件是!isUndefined(value),即该值为不是undefined就执行if语句

而我的项目中该值为"",有基础的人就知道只有未定义才为undefined

但是本着方法总比困难多的原则,我试图绕过组件库,就在这个项目中修改,经过我的一番尝试之后,我还真发现了一个办法。

通过删除某个值的定义,让关联的该值为undefined

成功之后,我屁颠屁颠的跑去♀提了PR,然后当我再次checkPR的时候就看到了这样的场景

大致意思就是,代码没有通过项目中编写的测试用例,因为测试用例不让该值为undefined!好家伙,卡着了,矛盾了有没有?我总不能更改测试用例吧??

因此,绕了一圈,发现我还是得解决上面的问题,核心是在开发过程中,怎么把一个包链接到另一个项目(ps:其实我觉得开发中遇到问题其实不可怕,因为百度大多可以解决,虽然耗时耗力了一点,可怕的事,百度的时候不知道如何描述)

下面就来介绍一下通过问导师然后再百度丰富的结果

什么是yarnlink?

开发中,两个项目或多个项目之间相互依赖时,用yarnlink连接,例如:我们现在有项目B,B中利用npm/yarn包管理器引入了包A,A是我们自己开发封装的组件,我们修改了组件A的内容,在还没有重新发布组件A的时候,想要在项目B中检查组件A修改的是否正确,这个时候就需要用到yarnlink

如何使用yarnlink?

这里我想说一下,有些人通常用的是npm,npm和yarn的作用是一样的,只是具体的指令有些许区别而link的话,直接讲yarn换成npm即可

在包A(即封装好的组件库)中执行yarnlink对包A进行想要的修改执行yarnbuid(打包代码:具体指令按照package.json中scrpit来执行)在项目B中执行yarnlink[包A的名称]并重新执行yarn并清除浏览器缓存这个时候就能在项目B中查看改动之后的效果结束之后,在项目B中执行yarnunlink[包A的名字]来取消连接

1
查看完整版本: 前端小白工作记录之yarnlink