使用 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 开发场景
  • 本地联调而不需要频繁发包
相关推荐
千寻girling4 分钟前
面试官: “ 说一下 JS 中什么是事件循环 ? ”
前端·javascript
程序员龙语7 分钟前
CSS 高级选择器应用
前端·css
Cassie燁8 分钟前
el-table源码解读2-2——createStore()初始化方法
前端·javascript·vue.js
程序员修心10 分钟前
CSS文本样式全解析:11个核心属性详解
前端·css
旧梦吟35 分钟前
脚本网站 开源项目
前端·web安全·网络安全·css3·html5
北极糊的狐44 分钟前
按钮绑定事件达成跳转效果并将树结构id带入子页面形成参数完成查询功能并将返回的数据渲染到页面上2022.5.29
前端·javascript·vue.js
幽络源小助理1 小时前
幽络源二次元分享地址发布页源码(HTML) – 源码网免费分享
前端·html
全栈前端老曹1 小时前
【ReactNative】页面跳转与参数传递 - navigate、push 方法详解
前端·javascript·react native·react.js·页面跳转·移动端开发·页面导航
用泥种荷花2 小时前
【前端学习AI】Python环境搭建
前端
老华带你飞2 小时前
考试管理系统|基于java+ vue考试管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·后端