还在为调试组件库发愁吗？yalc 帮你一把

前言

哈喽大家好！我是 嘟老板。最近在开发组件库的过程中，发现了一个比较好用的工具，让我可以用 npm 的操作轻松完成本地调试，分享给大家。

什么是 yalc

定位 : 本地"迷你私有 npm 仓库"。将包发布到本机的 yalc 仓库，再让其他项目从这个"仓库"安装，避免 npm link 带来的软链与重复依赖问题。
优势
- 可复现: 以打包产物为准，接近真实发包。
- 稳定 : 解决 npm link 多 React/多实例等问题。
- 简单: 一条命令推送更新，消费者一条命令升级。

安装

bash 复制代码

npm i -g yalc
# 或
pnpm add -g yalc
# 或
yarn global add yalc

核心命令

yalc publish: 在包项目中发布到本机 yalc 仓库（不推送给消费者）
yalc push: 在包项目中将最新产物推送给所有已 yalc add 的消费者项目
yalc add <package>: 在消费者项目中从 yalc 仓库安装此包
yalc update: 在消费者项目中更新已安装的 yalc 包
yalc remove <package>: 在消费者项目中移除 yalc 包
其他：yalc installations show（查看安装情况）、yalc check（检查状态）

提示：默认是"拷贝产物"模式，避免软链带来的解析/构建问题。若确需软链可用 yalc add <pkg> --link，但不推荐。

示例场景

1.本地组件库与业务项目并行开发

以组件库（如包名 @your/awesome-lib）为例：

在库项目中：
bash 复制代码
```
npm run build
yalc publish
```

在业务项目中：

bash 复制代码

yalc add @your/awesome-lib
npm i
npm run dev

库更新迭代：

bash 复制代码

npm run build && yalc push
# 业务项目中（如需）
yalc update

踩坑提示：
- 将 react、react-dom、antd 等放入库的 peerDependencies，避免消费者安装时出现重复实例。
- 确保库的 package.json 中 files 或打包产物（如 dist/）包含所有必需文件（样式、图片、类型声明等）。

2.Monorepo 多包联调（pnpm/yarn workspace）

对"被消费的库包"使用 yalc publish / push 与"应用包" yalc add / update 的模式，而不是直接 workspace 软链，减少构建器/解析器差异带来的问题。

库包脚本示例：

json 复制代码

{
  "scripts": {
    "build": "tsc -b",
    "dev:push": "npm run build && yalc push",
    "dev:pub": "npm run build && yalc publish"
  }
}

应用包脚本示例：

json 复制代码

{
  "scripts": {
    "yalc:add": "yalc add @your/awesome-lib",
    "yalc:update": "yalc update"
  }
}

与 npm link 的对比

yalc: 拷贝打包产物，接近真实发包，减少"多实例 React/依赖解析异常"。
npm link: 软链源码，调试直观，但在复杂依赖/多构建器下容易出现不可预期的行为。

最佳实践与注意事项

打包产物为准 ：始终 npm run build 后再 yalc publish/push。
peerDependencies ：库将运行时单例依赖（如 React）放入 peerDependencies；消费者负责安装。
忽略文件 ：在库中检查 .npmignore 或 files，避免发布缺文件（样式、图片、声明）。
.yalc 与 yalc.lock ：
- .yalc/ 通常不提交；yalc.lock 可在短期联调分支提交以确保一致，避免污染长期分支。
CI/CD ：不建议在 CI 中依赖 yalc。CI 用正式发包（私服/beta tag）或 npm pack 产物。
回滚：完成联调后尽快 yalc remove，切回正式 npm 版本。
常见问题
- 依赖冲突/重复 React：检查库的 peerDependencies 与消费者实际安装版本是否一致。
- 更新不生效：确认库已 yalc push，应用执行 yalc update；必要时删 node_modules 重装。
- TS 类型缺失：确保库产物包含 .d.ts，types/typings 指向正确。

常用命令速查

bash 复制代码

# 库项目
npm run build && yalc publish     # 首次发布到本机仓库
npm run build && yalc push        # 推送更新给所有消费者
yalc check                        # 检查状态
yalc installations show           # 查看哪些项目安装了本包

# 消费者项目
yalc add <package>
yalc update
yalc remove <package>

最小可用脚本示例

库 package.json：

json 复制代码

{
  "scripts": {
    "build": "tsc -p tsconfig.build.json",
    "yalc:publish": "npm run build && yalc publish",
    "yalc:push": "npm run build && yalc push"
  },
  "peerDependencies": {
    "react": "^18",
    "react-dom": "^18"
  },
  "files": ["dist", "package.json", "README.md"]
}

应用 package.json：

json 复制代码

{
  "scripts": {
    "yalc:add:lib": "yalc add @your/lib",
    "yalc:update": "yalc update"
  }
}

结语

技术简而不凡，创新生生不息。我是 嘟老板，咱们下期再会。

还在为调试组件库发愁吗？yalc 帮你一把

前言

什么是 yalc

安装

核心命令

推荐工作流（单包）

示例场景

1.本地组件库与业务项目并行开发

2.Monorepo 多包联调（pnpm/yarn workspace）

与 npm link 的对比

最佳实践与注意事项

常用命令速查

最小可用脚本示例

结语