怎么在本地应用中调试包?以包fe-npm为例

158 阅读1分钟

背景知识:团队内建议统一使用pnpm 进行包管理。

pnpm install 与npm install对于node_modules的包安装影响不同。

包管理工具 —— 更推荐的 pnpm - 掘金

由于安装的时候,使用的是pnpm install。所以调试第三方包的时候,不能使用npm link。

而是使用pnpm link pnpm link | pnpm

整体流程如下图所示:

image.png

一、设置包@iscas/ui为全局link

(1)cd ~/projects/fe-npm

(2)pnpm install

安装@iscas/ui的相关依赖

(3)pnpm run build:watch

使用dumi的能力(fe-npm使用的是dumi框架),实时监听文件的变化。

(4)pnpm link --global

将fe-npm 放在pnpm global的存储位置

二、项目中使用link

(1)cd ~/projects/my-project

(2)pnpm install (3)pnpm link --global fe-npm

将本地的fe-npm link到my-project这个项目中,代替原本的从仓库registry获取的fe-npm。

(4)pnpm start

启动项目就可以了!

总结:这样在fe-npm上直接编辑源文件后,my-project就能使用最新自动编译的新内容。

三、项目中取消 本地link

(1)cd ~/projects/my-project

(2) pnpm uninstall --global fe-npm

pnpm.io/cli/unlink

If you want to remove a link made with pnpm link --global <package>, you should use pnpm uninstall --global <package>. pnpm unlink only removes the links in your current directory.

这样就完成了本地的调试开发流程,在fe-npm本地仓库修改代码,保存,刷新业务项目页面就可以实时更新。

四、发布

在修改完成需要部署的时候,在fe-npm中publish新版本,然后将业务代码仓库package.json版本号更新并提交提交。