当前位置: 首页 > news >正文

本地如何使用 yarn link 调试本地 npm 包

如何使用 yarn link 调试本地 npm 包:

在前端开发中,通常我们会开发并使用许多 npm 包来实现项目的功能。随着开发的深入,我们经常需要调试或修改某些 npm 包的源码。如果你正在开发一个 npm 包,并且希望在本地项目中进行调试,yarn link 是一个非常强大的工具,它可以帮助你在本地链接并调试 npm 包,而无需每次都发布到 npm 仓库。

1. 为什么要使用 yarn link

在传统的开发流程中,当你在开发一个 npm 包时,如果想在另一个项目中使用这个包,通常需要做以下几件事:

  1. 发布包到 npm:每次你修改了本地包的代码,都需要发布到 npm,然后在项目中更新包的版本。
  2. 使用 npm installyarn add:每次修改后,都要在项目中重新执行 npm installyarn add 来获取最新的包版本。

但是,如果你正在开发一个 npm 包并且需要频繁测试,发布到 npm 变得非常繁琐。此时,yarn link 提供了一种便捷的解决方案,它允许你在本地项目中链接并调试 npm 包,而无需发布到 npm 仓库。

2. 什么是 yarn link

yarn link 是一个本地开发工具,它允许你将本地开发的 npm 包链接到其他项目中进行调试和测试,而不需要每次都发布和安装。具体来说:

  • yarn link:在你本地的 npm 包目录中运行,注册你的包作为全局链接。
  • yarn link <package-name>:在目标项目中运行,将本地包链接到目标项目的 node_modules 中。

通过 yarn link,你可以在本地开发和调试 npm 包时,实时更新和测试修改的包,而无需发布包或手动重新安装。

3. yarn link 使用流程

步骤 1:在本地包中使用 yarn link
  1. 首先,进入你的本地包目录。假设你的包名是 open-app,并且它的代码存放在本地路径 /path/to/your/local/open-app

    cd /path/to/your/local/open-app
    
  2. 在本地包的根目录中运行以下命令,将包注册为全局链接:

    yarn link
    

    执行完后,终端会输出类似如下的信息:

    success Registered "open-app"
    

    这表明你的包已经成功注册为全局链接,可以在其他项目中进行引用。

步骤 2:在目标项目中使用 yarn link
  1. 接下来,进入你要调试的目标项目目录。假设你的项目是一个 Vue 项目,位于 /path/to/your/vue-project

    cd /path/to/your/vue-project
    
  2. 在目标项目中运行以下命令,将本地开发包链接到 node_modules 中:

    yarn link "open-app"
    
  3. 现在,目标项目就会使用你本地的 open-app 包,而不是从 npm 上下载的版本。你可以像平常一样导入并使用这个包:

    import { openApp } from 'open-app';
    

⚠️ 你的目标项目package.json中不能再有open-app的依赖了,不然还是指向线上npm,删掉后重新yanr install

步骤 3:调试与修改本地包
  • 一旦你成功链接了本地包,你就可以在 open-app 包的代码中进行修改并立即查看效果。你不需要重新发布或重新安装包,只要修改本地包的代码,Vue 项目会自动使用最新版本的本地包。
  • 如果你修改了本地包的代码,Vue 项目中使用到该包的地方会立刻反映出修改的结果。如果没有看到变化,可能需要构建本地的npm项目。 例如: yarn build
步骤 4:取消链接(如果需要)

如果你不再需要本地链接,可以使用以下命令取消链接:

  1. 在目标项目中运行:

    yarn unlink "@meitu/open-app"
    
  2. 然后在本地包目录中解除全局链接:

    yarn unlink
    

4. 注意事项

虽然 yarn link 是一个非常方便的工具,但在使用时也有一些注意事项需要了解:

1. 包名必须匹配

确保你在 yarn link 时使用的包名与目标项目中引用的包名一致。例如,你在本地包中使用的是 open-app,那么在目标项目中也需要使用相同的包名来导入它:

import { openApp } from 'open-app';

如果包名不一致,即使成功链接了本地包,目标项目也会找不到该包。yarn link成功的话,在目标项目的node_modules可以找到你 link的 open-app

2. 缓存问题

有时,Yarn 或 npm 会缓存包的内容,导致本地包的修改没有生效。如果你发现修改没有立即反映到目标项目中,可以尝试清除缓存:

yarn cache clean

然后重新安装依赖:

yarn install
3. 版本冲突

yarn link 可能会导致不同版本的包之间出现冲突。如果你的项目或本地包依赖于某个版本的第三方库,确保本地包和目标项目的依赖版本一致。如果依赖冲突,可能会导致运行时错误或不可预期的行为。

4. 不要把本地链接的包提交到代码库

本地链接的包只是开发环境中的临时链接,通常不应该被提交到代码库。如果使用了 yarn link,确保在 .gitignore 中忽略 node_modules 目录,避免将链接的包提交到版本控制系统中。

5. 使用 yarn link 的常见问题及解决方法

问题 1:目标项目中的包版本不更新

原因:可能是目标项目中仍然引用的是缓存的旧版本包。

解决方案

  • 清除 Yarn 缓存:yarn cache clean
  • 删除并重新安装依赖:rm -rf node_modules && yarn install
  • 确保在本地包的修改后重新构建(如果有构建步骤),例如,如果使用 TypeScript 或 Babel 编译本地包,记得重新编译。
问题 2:链接的包无法正确找到

原因:可能是包名不一致,或者没有正确链接。

解决方案

  • 确保在本地包和目标项目中使用相同的包名。
  • 确认 yarn link 是否在正确的包目录中执行,并且 node_modules 目录中确实包含了正确的符号链接。

6. 其他 yarn link 的使用场景

除了调试本地 npm 包外,yarn link 还可以用于以下场景:

  • 开发私有 npm 包:如果你开发的是私有 npm 包,使用 yarn link 可以在多个项目之间共享和调试该包,而无需发布到 npm。
  • 本地组件库开发:如果你在开发组件库,并且希望实时调试组件库的修改,yarn link 可以帮助你在不同的项目中链接并使用该组件库。

相关文章:

本地如何使用 yarn link 调试本地 npm 包

如何使用 yarn link 调试本地 npm 包&#xff1a; 在前端开发中&#xff0c;通常我们会开发并使用许多 npm 包来实现项目的功能。随着开发的深入&#xff0c;我们经常需要调试或修改某些 npm 包的源码。如果你正在开发一个 npm 包&#xff0c;并且希望在本地项目中进行调试&am…...

江恩45年一书的自己一点读书见解

读了下江恩的华尔街45年&#xff0c;有些浅薄的体会&#xff0c;记录下 江恩的华尔街45年里面&#xff0c;感触比较深刻的有以下几点&#xff1a; 1.为什么会亏钱 1.利用大仓位来过度交易&#xff0c;违背了资本安全的原则。买卖过于频繁 2.没有用止损单来保护你的交易。 3.缺…...

影响 Linux、Unix 系统的 CUPS 漏洞可导致 RCE

在经过大量炒作和第三方过早泄露信息之后&#xff0c;安全研究员 Simone Margaritelli 公布了有关通用 UNIX 打印系统 (CUPS) 中的四个零日漏洞的详细信息。 这些漏洞可被远程、未经身份验证的攻击者滥用&#xff0c;在易受攻击的 Linux 和类 Unix 系统上实现代码执行。 CUPS…...

【汇编】思考汇编中的两个基本问题

1. 若干年前的疑问 几年前还在大学学习汇编时&#xff0c;不管是考试还是课程设计&#xff0c;其实都很顺利。但是心里一直对什么时候使用哪个寄存器存在疑惑&#xff0c;编写汇编时&#xff0c;没有十足的把握&#xff0c;都是抱着试一试的心态去完成了课程任务。 工作八年有…...

Nest Dynamic modules 笔记

Nest Dynamic modules 文档地址&#x1f448; 记录Dynamic modules是因为确实抽象&#xff0c;文档并没有很详细的指出不同方式创建动态模块的区别 两种不同的动态模块创建方式 静态模块传统动态模块方式实现三种不同的方法命名使用ConfigurableModuleBuilder异步动态模块如果…...

生成式AI、大模型、多模态技术开发与应用学习清单

学习目的&#xff1a; 了解AIGC发展现状与核心技术。 掌握Transformer核心开发技术。掌握向量数据库的工作原理、检索算法、主要开源数据库。掌握大模型调用、微调方法。掌握以GPT大语言模型为基础的工作原理。 掌握AIGC技术在跨模态领域的应用技术。了解GPT提示工程和AIGC的安…...

STM32 CubeMx HAL库 独立看门狗IWDG配置使用

看门狗这里我就不多介绍了&#xff0c;能搜到这篇文章说明你了解 总之就是一个单片机重启程序&#xff0c;设定好超时时间&#xff0c;在超时时间内没有喂狗&#xff0c;单片机就会复位 主要应用在单片机异常重启方面&#xff0c;比如程序跑飞&#xff08;注意程序跑飞时你就…...

网络安全渗透测试概论

渗透测试&#xff0c;也称为渗透攻击测试是一种通过模拟恶意攻击者的手段来评估计算机系统、网络或应用程序安全性的方法。 目的 旨在主动发现系统中可能存在的安全漏洞、脆弱点以及潜在风险&#xff0c;以便在被真正的恶意攻击者利用之前&#xff0c;及时进行修复和加固&…...

【大数据技术基础】【记录Ubuntu 16.04升级到18.04】Ubuntu的一个版本升级到另一个版本

在 Ubuntu 操作系统中进行软件更新和系统升级 Ubuntu Kylin 16.04 LTS 系统进行系统升级到 Ubuntu 18.04.6 LTS 版本 升级提示&#xff1a;系统弹出提示框&#xff0c;告知用户有新版本的 Ubuntu 可用&#xff0c;询问用户是否想要升级。 认证窗口&#xff1a;显示了一个认证…...

知识库系统,集成neo4j,集成activiti工作流,集成es全文检索,知识图谱血缘关系,nlp知识库

一、项目介绍 一款全源码&#xff0c;可二开&#xff0c;可基于云部署、私有部署的企业级知识库云平台&#xff0c;一款让企业知识变为实打实的数字财富的系统&#xff0c;应用在需要进行文档整理、分类、归集、检索、分析的场景。 为什么建立知识库平台&#xff1f; 助力企业…...

批量合并多个Excel到一个文件

工作中&#xff0c;我们经常需要将多个Excel的数据进行合并&#xff0c;很多插件都可以做这个功能。但是今天我们将介绍一个完全免费的独立软件【非插件】&#xff0c;来更加方便的实现这个功能。 准备Excel 这里我们准备了两张待合并的Excel文件 的卢易表 打开的卢易表软件…...

CNCF云原生生态版图-项目和产品综合分析

CNCF云原生生态版图-项目和产品综合分析 CNCF云原生生态版图-项目和产品综合分析整体统计分析中国研发人员贡献项目和产品其中&#xff0c;纳入 CNCF 管理的开源项目 链接 CNCF云原生生态版图-项目和产品综合分析 整体统计分析 在对云原生技术选型时&#xff0c;优先选择经过 …...

MySQL生产环境备份脚本

全量备份脚本&#xff0c;其中BakDir&#xff0c;ZlbakDir&#xff0c;LogFile需要自己创建 #!/bin/bash export LANGen_US.UTF-8# 指定备份目录 BakDir/root/beifen/data/mysqlbak/data/allbak # 指定增量备份目录 ZlbakDir/root/beifen/data/mysqlbak/data/zlbak # 备份日志…...

leetcode 3224. 使差值相等的最少数组改动次数

题目链接&#xff1a;3224. 使差值相等的最少数组改动次数 题目&#xff1a; 给你一个长度为 n 的整数数组 nums &#xff0c;n 是偶数 &#xff0c;同时给你一个整数 k 。 你可以对数组进行一些操作。每次操作中&#xff0c;你可以将数组中任一元素替换为 0 到 k 之间的任一…...

多线程动态库里面调用静态库分配内存函数导致的崩溃cltp汇编指令导致

1、概述 有这样的一个场景,我有一个动态库myso.so里面有函数start_crash()&#xff0c;用到静态库的内存分配函数&#xff0c;其实静态库里面的static.a 里面就封装了一个函数叫system_malloc(),函数返回的是分配的内存地址&#xff0c;然后发现&#xff0c;我在测试demo里面创…...

力扣刷题TOP101: 31.BM38 在二叉树中找到两个节点的最近公共祖先

目录&#xff1a; 目的 思路 复杂度 记忆秘诀 python代码 目的&#xff1a; 给定一棵二叉树(保证非空)以及这棵树上的两个节点对应的val值 o1 和 o2&#xff0c;请找o1 和 o2 的最近公共祖先节点。 思路 这个任务目和上一题在二叉搜索树中找到两个节点的最近公共祖先有点类…...

前端项目打包部署

打包和部署前端项目是将开发环境中的代码转化为生产环境可直接运行的静态文件&#xff0c;并将其部署到服务器上的过程。 # 项目打包 pnpm run build# 上传文件至远程服务器 将本地打包生成的 dist 目录下的所有文件拷贝至服务器的 /usr/share/nginx/html 目录。# nginx.cofig…...

《CSS 知识点》大屏卡片布局思路:弹性布局 flex-grow

思路 大屏左右两侧高宽一致&#xff0c;内部卡片可按比例设置&#xff01; 使用弹性布局和属性 flex-grow 设置比例&#xff1b;间隔使用 margin-bottom 设置&#xff0c;最后一个卡片不设置&#xff1b; 效果如图 代码说明 CSS代码 26 - 30&#xff0c;左右两侧设置弹性布…...

nVisual 登录页页面配置说明

一、概述 nVisual登录页面可根据具体客户需要通过public\config\access.js文件进行自定义配置。页面可以大致分为4个部分&#xff0c;头部、底部、可移动区域以及页面中间的信息填写区域。其中头部和底部又包含头部左侧、头部中间、头部右侧、底部左侧、底部中间、底部右侧六个…...

后端接受前端传递数组进行批量删除

问题描述&#xff1a;当我们需要做批量删除功能的时候&#xff0c;我们循环单次删除的接口也能进行批量删除&#xff0c;但要删除100条数据就要调用100次接口&#xff0c;或者执行100次sql&#xff0c;这样系统开销是比较大的&#xff0c;那么我们直接采用接收的数组格式数据sq…...

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

golang循环变量捕获问题​​

在 Go 语言中&#xff0c;当在循环中启动协程&#xff08;goroutine&#xff09;时&#xff0c;如果在协程闭包中直接引用循环变量&#xff0c;可能会遇到一个常见的陷阱 - ​​循环变量捕获问题​​。让我详细解释一下&#xff1a; 问题背景 看这个代码片段&#xff1a; fo…...

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

新能源汽车智慧充电桩管理方案:新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

HDFS分布式存储 zookeeper

hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架&#xff0c;允许使用简单的变成模型跨计算机对大型集群进行分布式处理&#xff08;1.海量的数据存储 2.海量数据的计算&#xff09;Hadoop核心组件 hdfs&#xff08;分布式文件存储系统&#xff09;&a…...

技术栈RabbitMq的介绍和使用

目录 1. 什么是消息队列&#xff1f;2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...

vulnyx Blogger writeup

信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面&#xff0c;gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress&#xff0c;说明目标所使用的cms是wordpress&#xff0c;访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...

RabbitMQ入门4.1.0版本(基于java、SpringBoot操作)

RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发&#xff0c;后来由Pivotal Software Inc.&#xff08;现为VMware子公司&#xff09;接管。RabbitMQ 是一个开源的消息代理和队列服务器&#xff0c;用 Erlang 语言编写。广泛应用于各种分布…...