在 yalc 之前我们比较常用的调试 node 依赖包的方式可能就是 npm | yarn link 了,但它往往并不是有效的,特别是在本地项目中调试 ui 组件库时,我们常会遇到以下问题:
- 构建问题:
常见于项目的编译规则与 node 依赖包的编译规则不一致时导致。拿 webpack 来讲,它默认是会去处理 symlink 的模块,但它在处理 symlink 的模块时,使用的 babel 配置是项目的而非包自身的配置。
- 依赖不一致问题:
使用 link 后,项目及要调试的 node 依赖包会分别去自己的 node modules 下查找引用相关的依赖,而如果他们有一些相同的依赖,且这些依赖本身可能不支持多实例或版本不兼容,这时就会导致应用无法正常运行或者出现其他异常。
- 验证不充分问题:
当你的 node 依赖包在构建时有一些额外配置时,link 的这种方式并不能帮你验证是否已构建正确。
- 版本冲突问题:
当你需要在两个本地项目调试同一个包的不同版本(不兼容升级)时,link 操作起来就比较繁琐了。
此时,如果有一种方式,既不用正式发包,又能像正式发包后本地直接安装调试,那便是极好的,这个时候,她来了..
Yalc
Yalc 她完美模拟了正式发包装包的流程。她可以将本地构建好的包发布到本地全局的 .yalc 文件夹下,她也可以将发布在本地的包安装到本地的任何一个项目里。因为走的是正常的发布构建流程,同时也有了本地包版本管理等功能,以上问题就都不存在了,简直完美!
安装
yarn:
yarn global add yalc
npm:
npm i yalc -g
发布本地包(在 node 依赖包的根目录下执行)
- 调整包版本号
- build(如果在 prepublish、prepare 等脚本中执行了 build 操作,那此步骤可省。这里及后续相关命令都以 yarn 示例,使用 npm、pnpm 的项目,可自行调整命令执行)
yarn build
- 将本地构建好的包内容发布到全局 .yalc 下
yalc publish
- 将最新版本的包推送给所有使用 yalc 安装了该依赖的项目(如果不想推送给所有,可以单独去某个项目内执行 yalc update myPackage)
yalc push
yalc publish 及 yalc push 两个命令可以简化为
yalc publish --push
添加本地包(项目根目录下执行)
- 将发布到本地全局(~/.yalc)的包安装到业务项目中
yalc add myPackage
也可执行以下命名进行添加(和 yalc add 类似,只是不会更改 package.json 中的包版本信息,一般可以不用)
yalc link myPackage
- 重新安装下项目依赖(最好再执行下以下命令,因为上述命令并不会自动安装本地包的自身依赖到项目中)
yarn
更新本地包(项目根目录下执行)
将 myPackage 的版本更新到最新版,如果发布时执行了 push 操作,该步骤可省
yalc update myPackage
将所有从本地安装的包都更新到最新版
yalc update
删除本地包(项目根目录下执行)
从项目内移除从本地安装的 myPackage
yalc remove myPackage
从项目内移除所有从本地安装的包
yalc remove --all
常见问题
包内容更新发布后,在项目里也更新了最新版本的包,刷新页面后为啥没生效?
有可能是因为 webpack 等打包工具对 node modules 做了缓存处理,不更新版本号即使包内容变化也依然会走之前的缓存。所以可以尝试调整版本号后再做本地发布调试。
使用上述方案依然不行,可尝试删除构建缓存或使用 yalc link 代替 yalc add 来安装调试包。安装或更新本地包后,项目编译出错,报 Module not found: Can't resolve xxx
这里得结合具体报错信息看看,可能是因为添加的本地包还有一些依赖未安装,执行 yarn 即可。