头图

前端小白工作记录之 yarn link

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

前言

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

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

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

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

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

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

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

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

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

yarnlink1.png

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

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

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

什么是 yarn link?

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

如何使用 yarn link?

这里我想说一下,有些人通常用的是npm ,npm和yarn的作用是一样的,只是具体的指令有些许区别 而link的话,直接讲 yarn 换成 npm即可
  1. 在包A (即封装好的组件库)中执行 yarn link
  2. 对包A进行 想要的修改 💻
  3. 执行 yarn buid (打包代码:具体指令按照package.json中scrpit来执行)
  4. 在项目B 中执行yarn link [包A的名称] 并重新执行 yarn 并清除浏览器缓存
  5. 这个时候就能在项目B 中查看改动之后的效果
  6. 结束之后,在项目B 中 执行 yarn unlink [包A的名字]来取消连接
5 声望
0 粉丝
0 条评论
推荐阅读
Linux 常用命令
当下的问题是解决了,我知道了如何将前端代码打包后部署 docker 镜像,但是我就在反思,难道关于docker我真的只需要知道这一点知识吗?对比导师会的,认真思考了一下,好像并不是,知道这点内容也许现在够,但以...

fuchl阅读 1.1k

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木60阅读 6k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.2k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木39阅读 7.1k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(>^ω^&lt...

XboxYan42阅读 2.8k评论 14

封面图
还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库

XboxYan34阅读 2.2k评论 2

封面图
从零搭建 Node.js 企业级 Web 服务器(二):校验
校验就是对输入条件的约束,避免无效的输入引起异常。Web 系统的用户输入主要为编辑与提交各类表单,一方面校验要做在编辑表单字段与提交的时候,另一方面接收表单的接口也要做足校验行为,通过前后端共同控制输...

乌柏木32阅读 6.1k评论 9

5 声望
0 粉丝
宣传栏