yalc调试组件库
在公司写组件库的过程中(项目采用lerna的多包管理的方式),遇到本地测试组件的功能正确性的时候,一般会采用npm link 的方式进行本地调试,但是当本地某些库的版不一致的时候,就会发生冲突,如:采用npm link 出现react版本冲突
尝试一
删除组件库内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
以下简单介绍使用过程
- 安装
全局安装npm i -g yalc - 在你的组件库中,先npm run build打包,然后执行yalc publish, 或者在package.json的scripts中添加执行脚本"build:publish":"npm run build & yalc publish"
- 在你的测试项目中测试你的组件库的时候,yalc link 你的组件库包名,在你测试项目中测试完组件功能之后,删除yalc相关的文件即可。
notic: 每次重新更改你的组件库的时候,都要重新执行2,3步骤,才能看到组件库最新更改的内容。
yalc 将组件的包依赖提升至应用中,在全局添加组件依赖,在应用下新建文件拉取依赖,即使有共同的依赖也会从应用的 node_modules 去查找。「使用 yalc 可以避免上面 npm link 的依赖问题」
如果项目采用的是多包管理的仓库形式,请往下看~
lerna多包管理的子包link
- 在根目录先打包你的项目(全量大包或者单独子库打包)根据你的package.json的script脚本执行命令即可,如我在/Users/xx/Desktop/xx/h5-library-xxction目录下之下npm run build
- cd 进入你的子包,执行yalc publish ,可能会报错403,但是本地发包正常
- 在你的项目中,执行yalc link packageName,如yalc link @ais/mobileuicomponent,之后项目中可以联调组件库