使用 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 更好的调试?
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

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