使用 yalc + nodemon 实现本地 NPM 包的高效开发联调

🚀 使用 yalc + nodemon 实现本地 NPM 包的高效开发联调

在开发本地 NPM 包(如组件库、工具库、CLI 等)时,频繁地发布 & 引入到其他项目测试是个麻烦事。

这时候我们可以通过 yalc + nodemon 实现一套 自动构建 + 自动推送 + 自动联调 的高效流程。


🧰 使用工具简介

工具 作用
yalc 本地 npm 包管理工具,用于将本地包发布并推送到目标项目进行测试
nodemon 监听源码变化,自动执行命令(如重启服务或重新构建)

🏗️ 项目结构假设

```bash my-lib/ # 本地开发的 npm 包 my-app/ # 使用 my-lib 的目标项目 ```


🛠️ my-lib 设置步骤

1. 安装依赖

```bash npm install --save-dev yalc nodemon ```

2. 配置 package.json

```json { "scripts": { "build": "tsc", // 或 vite、rollup 等构建命令 "yalc:push": "yalc publish --push", "dev": "nodemon --watch src --ext ts,js,json --exec "npm run build && npm run yalc:push"" } } ```

3. 可选 .nodemon.json 配置(简化脚本)

```json { "watch": ["src"], "ext": "ts,js,json", "exec": "npm run build && npm run yalc:push" } ```

此时 npm run dev 等效于 nodemon


📦 在 my-app 中使用 yalc 包

  1. 安装 yalc(只需一次):

    ```bash npm install -g yalc ```

  2. my-app/ 项目中引入包:

    ```bash yalc add my-lib ```

  3. 后续每次在 my-lib 中运行 yalc pushmy-app 会自动获取到最新依赖版本。


🚴‍♀️ 开发联调流程

  1. 启动开发命令:

    ```bash cd my-lib npm run dev ```

  2. 修改 my-lib/src/ 代码后,会自动:

    • 执行构建命令
    • 将包通过 yalc publish --push 更新到 my-app
  3. my-app 项目中可以立即看到最新效果。


✅ 优点总结

  • 不用每次改完代码都 npm publish
  • yalc 不污染 node_modules,卸载也方便
  • nodemon 自动构建 + 推送,节省大量手动操作时间

🧩 常见扩展用法

用途 工具
构建组件库 vite, rollup, tsup
CLI 工具联调 yalc + nodemon + commander
UI 组件开发 yalc + storybook + devApp
后端服务联调 yalc + nodemon + express

💬 补充建议

  • 可以把 yalc.lock 加入 .gitignore
  • 如果是 UI 组件库,也可以用 yalc 同时 push 给多个 demo 项目
  • 使用 yalc remove my-lib 来清除依赖

🎉 总结

使用 yalc + nodemon,可以极大提升本地 NPM 包开发效率,做到代码改动自动同步、实时调试,适合:

  • 多项目协作开发
  • 组件库、工具库、CLI 开发场景
  • 本地联调而不需要频繁发包
相关推荐
崔庆才丨静觅6 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60617 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了7 小时前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅7 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅7 小时前
5分钟快速搭建 AI 平台并用它赚钱!
前端
崔庆才丨静觅8 小时前
比官方便宜一半以上!Midjourney API 申请及使用
前端
Moment8 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅8 小时前
刷屏全网的“nano-banana”API接入指南!0.1元/张量产高清创意图,开发者必藏
前端
剪刀石头布啊8 小时前
jwt介绍
前端
爱敲代码的小鱼8 小时前
AJAX(异步交互的技术来实现从服务端中获取数据):
前端·javascript·ajax