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

【前端】最好用的本地组件库调试工具 yalc

在开发和编写多个软件包(私有或公共)时,您经常需要在本地环境中的其他项目中使用最新/正在开发的版本,而无需将这些软件包发布到远程注册表。NPM和 Yarn 通过类似的符号链接包方法来解决这个问题。虽然这种方法在很多情况下都有效,但它通常会带来一些棘手的限制和问题,例如依赖关系解析、不同文件系统之间的符号链接互操作性等等npm/yarn link

yarn

  • yalc它可以作为非常简单的本地存储库,用于存放您本地开发的、希望在本地环境中共享的软件包。
  • 当你yalc publish在包目录中运行时,它只会抓取应该发布到 NPM 的文件,并将它们放入一个特殊的全局存储中(例如,位于~/.yalc)。
  • 当你yalc add my-package在当前文件夹中运行它时project,它会将包内容.yalc取到当前文件夹,并向其中注入一个依赖项。或者,你可以使用file:` npm install`,它会在当前文件夹中创建一个指向包内容的符号链接,而不会触及`/` 目录(就像`npm install` 那样),你甚至可以将其与Pnmp/Yarn/Npm 工作区一起使用。link:package.jsonyalc link my-packagenode_modulespackage.jsonnpm/yarn link
  • yalc在您的项目中创建一个特殊yalc.lock文件(类似于yarn.lockpackage-lock.json),用于确保在执行yalc的例程期间保持一致性。
  • yalc可用于使用yarnnpm管理器管理package.json依赖项的项目。

下载

yarn global add yalc

输入

yalc --version

查看是否下载成功。

如果是 windows,你需要给 yarn 的全局 bin 目录添加环境变量。你可以用命令

yalc global bin

查看 yarn 的全局 bin 类型命令的文件路径,也就是它放 yalc 命令的地方。

Publish

我们来一个例子,比如你的目录结构如下:

我想把 component 这个 npm 包发布出去,直接在 component 的目录里

yalc publish

即可。

这一步完成以后,yalc 会在你的本地机器管理着一个 npm 源。相当于你的任何其他项目都可以从你这个本地的源下载 npm 包。

component 代码:

export const add = (a, b) => a + b;

add

进入 business 文件夹,输入:

yalc add ethan-component-test

执行完后,你的 package.json 里面的 dependencies 会增加一条记录,你可以观察它和普通 npm 包的区别:

{ "name": "ethan-business-test", "version": "1.0.0", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "description": "", "dependencies": { "ethan-component-test": "file:.yalc/ethan-component-test" }, "type": "module" }

同时,yalc 会在 business 目录里面增加一个 .yalc 的文件夹,取代了 node_modules 作为 business 的项目依赖。

business 代码为:

import {add} from 'ethan-component-test' console.log(add(1,2))

可以正常输出 3

remove

当你用 yalc 测试完毕以后,你需要移出 yalc 的依赖,此时使用命令:

  • 运行后yalc remove my-package,它将从package.json和中删除软件包信息。yalc.lock
  • 运行此命令yalc remove --all以从项目中移除所有软件包。
yalc remove ethan-component-test

总结

两个小问题

yalc add操作会移除 node_modules 目录

https://github.com/wclr/yalc/issues/243
https://github.com/wclr/yalc/issues/181
需要手动清理全局按照的yalc包,可以 yalc dir 查看全局安装目录
/Users/a0000/.yalc

http://www.jsqmd.com/news/489665/

相关文章:

  • 2026最新版 Android Studio 安装与配置全教程(保姆级)
  • 篇关于电脑cmd命令符开发代码的技术文章大纲
  • 人工智能代理AI Agent如何自动化CRM、Jira、计费和Slack之间的工作流程
  • 深刻理解HTTP
  • MinorGC的完整流程与复制算法深度解析
  • 企业用智能体要投入多少成本?2026避坑指南与主流产品横评
  • 2026年沈阳路灯厂TOP10榜单揭晓,哪家实力最强?
  • API 安全: 保护 AI 应用的交互接口
  • 分治算法应用:逆序计数(Counting Inversions)
  • 跨平台方案:Java如何支持多终端文件夹的目录结构分片上传与信创国产化适配?
  • Java 中 Date 与 LocalDate 的区别
  • cmu15445 25fall lec3个人笔记
  • 基于springboot的社交媒体平台的设计与实现
  • 揭秘:用分期乐2000元支付宝立减金回收的最佳方法 - 团团收购物卡回收
  • 海参最吸收的营养做法
  • 全域GEO源码系统开源,三大核心模块:语义显式化、结构化数据生成
  • 从零开始搭建 Logto 详细教程!
  • C语言:通用高级编程语言,现代编程语言母语及应用领域介绍
  • AI原生软件时代,中小软件公司的生存破局之路
  • ABB RobotStudio 工件坐标创建、程序加载与仿真运行:全面解析与实践指南
  • C语言介绍:起源、特性、应用领域及如何为学其他语言打基础
  • 拒绝做 AI 的 “饲养员”:前端程序员在 AI 时代的生存与进化指南
  • Node安装及卸载
  • LP3783A芯茂微5V2.1A低功耗原边反馈充电器芯片替代PL3378/C
  • S4-Info-Yi系统的数学接口缺失、补全及在薛定谔猫佯谬中的应用
  • 大模型命名规则全解析
  • 实测5款AI PPT工具|职场人/程序员必看,告别熬夜排版(2026最新版
  • C++ 06:构造函数——对象初始化的核心指南
  • CZ预判AI Agent支付迎爆发 MoltsPay上线测试网降低开发门槛
  • 3.16学习总结