前言
yalc 时常在周报中看到。今日前端早读课文章由 @孟玄分享，公号：伏羲 Web 授权。
伏羲 Web 开发团队，负责网易伏羲全业务产品的工程开发，包括不限于元宇宙、人机协作 PaaS 平台、低代码、Web 3D 可视化等，致力于服务产研团队，提升产品品质、开发效率，创新以及前沿技术方向的探索与落地应用。
正文从这开始～～
在 yalc 之前，较常用的本地调试 npm 包的方式是 npm/yarn link，但使用上常常会遇到 “麻烦”。特别是在本地项目中调试 ui 组件库时，我们会遇到以下问题：
1. 构建问题：常发生于项目的编译规则与 npm 包的编译规则不一致。例如 webpack 默认会去处理 symlink 的模块，但它在处理 symlink 的模块时，使用的 babel 配置是当前项目的而非包本身的配置。
2. 依赖不一致问题：使用 link 后，项目及要调试的 npm 包会分别去自己的 node modules 下查找引用相关的依赖，而如果两个项目有相同的依赖，且这些依赖本身可能不支持多实例或版本不兼容，这时就会导致应用无法正常运行或者出现其他异常。
3. 验证不充分问题：当包在构建时有一些额外配置时，link 的这种方式并不能验证是否已构建正确。
4. 版本冲突问题：当需要在两个本地项目调试同一个包的不同版本（不兼容升级）时，link 操作起来就比较繁琐了。
此时，如果有一种方式，既不用正式发包，又能像正式发包后本地直接安装调试，那便是极好的，这个时候，Yalc 来了！
Yalc
Yalc 完美模拟了正式发包装包的流程。可以将本地构建好的包发布到本地全局的 .yalc 文件夹下，也可以将发布在本地的包安装到本地的任何一个项目里。
因为走的是正常的发布构建流程，同时也有了本地包版本管理等功能，以上问题都不存在了，简直完美！
使用
1. 安装
Yarn:
yarn global add yalcNPM:
npm i yalc -g2. 发布本地包（npm 包根目录下执行）
# 如果在 prepublish、prepare 等脚本中执行了 build 操作，那此步骤可省
yarn build
# 此后相关命令都以 yarn 示例，使用 npm、pnpm 的项目，可自行调整命令执行
# 将本地构建好的包内容发布到全局 .yalc 下
yalc publish
# 该命令会将最新版本的包推送给所有使用 yalc 安装了该依赖的项目，如果不想推送给所有，可以单独去某个项目内执行 yalc update myPackage
yalc push
# 以上两个命令可以简化为下面命令，图省事的话直接执行这一行命令就行
yalc publish --push3. 添加本地包（项目根目录下执行）
# 将发布到 ~/.yalc 全局的包安装到本地项目下
yalc add myPackage
# 或执行以下命名（和 yalc add 类似，只是不会更改 package.json 中的包版本信息，一般可以不用）
yalc link myPackage
# 添加本地包到项目后，再执行下以下命令，因为上述命令并不会自动安装本地包的自身依赖
yarn4. 更新本地包（项目根目录下执行）
# 将 myPackage 的版本更新到最新版，如果发布时执行了 push 操作，该步骤可省
yalc update myPackage
# 将所有从本地安装的包都更新到最新版
yalc update5. 删除本地包（项目根目录下执行）
# 从项目内移除从本地安装的 myPackage
yalc remove myPackage
# 从项目内移除从本地安装的所有包
yalc remove --all常见问题
1. 包内容更新发布后，在项目里也更新了最新版本的包，刷新页面后为什么没生效？
可能是因为 webpack 等打包工具对 node modules 做了缓存处理，不更新版本号时，即使包内容变化也依然会沿用之前的缓存。可以尝试调整版本号后再做本地发布。
使用上述方案依然不行，可尝试使用 yalc link 代替 yalc add 来安装调试包。
2. 安装或更新本地包后，项目编译出错 Module not found: Can't resolve xxx
这里需要结合具体报错信息察看。可能是因为添加的本地包还有一些依赖未安装，这种情况执行 yarn 即可。
引用
Yalc 官方文档:https://github.com/wclr/yalc
Three ways to test your npm packages:https://maecapozzi.com/newsletter/31
Testing npm packages before publishing:https://blog.vcarl.com/testing-packages-before-publishing/
居然有比 npm link 更好的调试？:https://cloud.tencent.com/developer/article/1843716
关于本文
作者：@孟玄
原文：https://mp.weixin.qq.com/s/b2ESuBYiAbzuGizlLoBZ9A
这期前端早读课
对你有帮助，帮” 赞 “一下，
期待下一期，帮” 在看” 一下 。