使用 yalc 调试 node 依赖包

在 yalc 之前我们比较常用的调试 node 依赖包的方式可能就是 npm | yarn link 了,但它往往并不是有效的,特别是在本地项目中调试 ui 组件库时,我们常会遇到以下问题:

  1. 构建问题:

常见于项目的编译规则与 node 依赖包的编译规则不一致时导致。拿 webpack 来讲,它默认是会去处理 symlink 的模块,但它在处理 symlink 的模块时,使用的 babel 配置是项目的而非包自身的配置。

  1. 依赖不一致问题:

使用 link 后,项目及要调试的 node 依赖包会分别去自己的 node modules 下查找引用相关的依赖,而如果他们有一些相同的依赖,且这些依赖本身可能不支持多实例或版本不兼容,这时就会导致应用无法正常运行或者出现其他异常。

  1. 验证不充分问题:

当你的 node 依赖包在构建时有一些额外配置时,link 的这种方式并不能帮你验证是否已构建正确。

  1. 版本冲突问题:

当你需要在两个本地项目调试同一个包的不同版本(不兼容升级)时,link 操作起来就比较繁琐了。

此时,如果有一种方式,既不用正式发包,又能像正式发包后本地直接安装调试,那便是极好的,这个时候,她来了..

Yalc

Yalc 她完美模拟了正式发包装包的流程。她可以将本地构建好的包发布到本地全局的 .yalc 文件夹下,她也可以将发布在本地的包安装到本地的任何一个项目里。因为走的是正常的发布构建流程,同时也有了本地包版本管理等功能,以上问题就都不存在了,简直完美!

安装

yarn:
yarn global add yalc
npm:
npm i yalc -g

发布本地包(在 node 依赖包的根目录下执行)

  1. 调整包版本号
  2. build(如果在 prepublish、prepare 等脚本中执行了 build 操作,那此步骤可省。这里及后续相关命令都以 yarn 示例,使用 npm、pnpm 的项目,可自行调整命令执行)
yarn build
  1. 将本地构建好的包内容发布到全局 .yalc 下
yalc publish
  1. 将最新版本的包推送给所有使用 yalc 安装了该依赖的项目(如果不想推送给所有,可以单独去某个项目内执行 yalc update myPackage)
yalc push

yalc publish 及 yalc push 两个命令可以简化为

yalc publish --push

添加本地包(项目根目录下执行)

  1. 将发布到本地全局(~/.yalc)的包安装到业务项目中
yalc add myPackage

也可执行以下命名进行添加(和 yalc add 类似,只是不会更改 package.json 中的包版本信息,一般可以不用)

yalc link myPackage
  1. 重新安装下项目依赖(最好再执行下以下命令,因为上述命令并不会自动安装本地包的自身依赖到项目中)
yarn

更新本地包(项目根目录下执行)

将 myPackage 的版本更新到最新版,如果发布时执行了 push 操作,该步骤可省

yalc update myPackage

将所有从本地安装的包都更新到最新版

yalc update

删除本地包(项目根目录下执行)

从项目内移除从本地安装的 myPackage

yalc remove myPackage

从项目内移除所有从本地安装的包

yalc remove --all

常见问题

  1. 包内容更新发布后,在项目里也更新了最新版本的包,刷新页面后为啥没生效?
    有可能是因为 webpack 等打包工具对 node modules 做了缓存处理,不更新版本号即使包内容变化也依然会走之前的缓存。所以可以尝试调整版本号后再做本地发布调试。
    使用上述方案依然不行,可尝试删除构建缓存或使用 yalc link 代替 yalc add 来安装调试包。

  2. 安装或更新本地包后,项目编译出错,报 Module not found: Can't resolve xxx
    这里得结合具体报错信息看看,可能是因为添加的本地包还有一些依赖未安装,执行 yarn 即可。

参考资料

  1. Yalc
  2. Three ways to test your npm packages
  3. Testing npm packages before publishing
  4. 居然有比 npm link 更好的调试?
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,816评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,729评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,300评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,780评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,890评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,084评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,151评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,912评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,355评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,666评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,809评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,504评论 4 334
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,150评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,882评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,121评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,628评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,724评论 2 351

推荐阅读更多精彩内容

  • 1.npm是Node官方提供的包管理工具,他已经成了Node包的标准发布平台,用于Node包的发布、传播、依赖控制...
    shuo_fd6c阅读 2,569评论 0 0
  • 前言 实际开发中,可能我们的工程结构并不仅仅只有一个,很可能我们会专门抽出一个专用的UI库,而实际开发的工程将引用...
    七玄之主阅读 3,272评论 0 2
  • 目录 前言 认识 workspaces 如何给模块安装依赖 移除依赖 执行模块里面的 scripts monore...
    CondorHero阅读 5,005评论 0 5
  • 管理器 npm,太慢了,总会有莫名的bug,需要删除 node_modules,在次安装以后才能解决。 cnpm,...
    littleyu阅读 1,288评论 0 0
  • 如果你是一个JavaScript系的开发者,一定不会陌生NPM,它既是一个平台,也是一个工具。在这个平台上,我们能...
    wfsovereign阅读 1,111评论 0 0