在开发组件库时,我们经常需要在真实的项目中测试组件库的功能,所以需要进行本地调试,本文介绍两种组件库本地调试流程,
1.使用beta版本
2.使用npm link
两种都可以作为本地调试的方案,本文作为一个参考资料,减少后续的重复工作并降低错误风险
1.使用 beta 版本
(1)在开发完之后,需要进行本地测试时,将组件库package.json文件的version版本设置为xxx-beta.x,例如
(2)执行npm publish发布到npm源
(3)进入npm源服务网站确认是否发布成功
(4)设置项目中package.json文件dependencies的组件库版本为发布的beta版本,执行npm install安装
2.npm link
使用npm link,创建一个组件库库的链接,将当前的包注册到全局下,可以在项目中通过npm link xx来链接组件库
(1)在组件库项目中执行 npm link 命令,创建链接。这将在全局 node_modules 目录中注册你的组件库。
(2)因为node_modeules中的依赖采用本地的组件库,所以可以先删除掉package.json文件dependencies的组件库依赖和对应node_modeules中的文件
(3)本地项目中执行npm link @tencent/merchant-ui-components
(4)执行 ls -l node_modules/@tencent/merchant-ui-components,确认是否成功link,如果成功link,node_modeules中的组件库文件会更新成我们本地的版本
(5)如果需要结束调试,可以执行npm unlink @tencent/merchant-ui-components,取消链接