yalc解决本地组件库调试问题~超好用(monorepo 管理模式也可)

1,462 阅读2分钟

yalc调试组件库

在公司写组件库的过程中(项目采用lerna的多包管理的方式),遇到本地测试组件的功能正确性的时候,一般会采用npm link 的方式进行本地调试,但是当本地某些库的版不一致的时候,就会发生冲突,如:采用npm link 出现react版本冲突

image.png

尝试一
删除组件库内node_modules中所有可能用到的react, react-dom
因为 Npm 和 项目属于不同的项目,它们有自己的 node_modules, 如果组件和应用都使用同一个依赖,它们各自的node_modules去查,如果这个依赖
NPM 组件 和你的项目使用了 React Hooks 的情况,React 会报致命异常。(原因是 React Hooks 依赖上下文,所以全局只能使用一个,即使是版本完全一样的,官方推荐的解决方法 React 错误提示[2])
但是有些情况下,并不能生效,同样会报以上的错误。
尝试N种方法之后,仍然不如意,偶然间,了解到有yalc这个更好的调试工具
yalc 官方文档: github.com/wclr/yalc
以下简单介绍使用过程

  1. 安装
    全局安装npm i -g yalc
  2. 在你的组件库中,先npm run build打包,然后执行yalc publish, 或者在package.json的scripts中添加执行脚本"build:publish":"npm run build & yalc publish"
  3. 在你的测试项目中测试你的组件库的时候,yalc link 你的组件库包名,在你测试项目中测试完组件功能之后,删除yalc相关的文件即可。
    notic: 每次重新更改你的组件库的时候,都要重新执行2,3步骤,才能看到组件库最新更改的内容。
    yalc 将组件的包依赖提升至应用中,在全局添加组件依赖,在应用下新建文件拉取依赖,即使有共同的依赖也会从应用的 node_modules 去查找。「使用 yalc 可以避免上面 npm link 的依赖问题」

如果项目采用的是多包管理的仓库形式,请往下看~

lerna多包管理的子包link

image.png

image.png

image.png

image.png

  1. 在根目录先打包你的项目(全量大包或者单独子库打包)根据你的package.json的script脚本执行命令即可,如我在/Users/xx/Desktop/xx/h5-library-xxction目录下之下npm run build
  2. cd 进入你的子包,执行yalc publish ,可能会报错403,但是本地发包正常
  3. 在你的项目中,执行yalc link packageName,如yalc link @ais/mobileuicomponent,之后项目中可以联调组件库