Skip to content

本地测试组件库

开发组件库时,可在业务项目中通过 pnpm linkfile: 依赖进行本地调试,无需发布到 npm。


bash
# 1. 在组件库目录
cd /path/to/vue-component-scaffold
pnpm build:lib
cd dist
pnpm link --global

# 2. 在业务项目目录
cd /path/to/your-business-app
pnpm link @ivui/vue-component-scaffold

若步骤 1 报错,可在业务项目中直接 link 到 dist:

bash
pnpm link /path/to/vue-component-scaffold/dist

二、file 依赖

在业务项目 package.json 中:

json
{
  "dependencies": {
    "@ivui/vue-component-scaffold": "file:../vue-component-scaffold"
  }
}

然后执行 pnpm install。路径可改为你的实际相对路径,或 file:D:/myWork/组件库/vue/nova-ui


三、取消链接

不再本地调试时,在业务项目中执行:

bash
pnpm remove @ivui/vue-component-scaffold

然后重新安装正式版本(若已发布):

bash
pnpm add @ivui/vue-component-scaffold

四、常见问题

TypeScript 报「找不到模块 @ivui/vue-component-scaffold」?

  1. 确认包已安装:检查 node_modules/@ivui/vue-component-scaffold 是否存在,pnpm link 失败时可改用 file: 依赖
  2. 重启 TS 服务:VS Code 中 Ctrl+Shift+P → 「TypeScript: Restart TS Server」
  3. file 依赖路径:若指向仓库根,需已执行 pnpm build:libdist/ 存在;或直接指向 .../nova-ui/dist

五、注意事项

  1. 构建产物:修改组件库后需重新执行 pnpm build:lib,业务项目才会使用最新代码
  2. 包名:若已改包名,link 或 file 依赖时使用对应名称
  3. 包根为 dist:发布与 link 均以 dist/ 为包根,file: 指向仓库根时需保证 dist/ 存在