【一库】yalc: 可能是最好的前端link调试方案（已经非常谦虚了）

「这是我参与11月更文挑战的第9天，活动详情查看：2021最后一次更文挑战」

先假设一个业务场景。 我所在的公司正在开发一个后台管理项目，暂且叫它admin-management项目吧。 而我受命开发一个组件库，发布成npm包供admin-management和其他项目引用，我开发的这个组件暂且叫good-ui吧。

admin-management 一个后台管理项目

good-ui一个组件库

ok，假设完毕，后续我们所有的例子都将围绕着上面的假设来展开。

一、npm link/yarn link/yalc 都是做什么的？

当你正在开发一个组件库/sdk/插件或其他npm库的时候，如果你想知道它们在一个前端项目上被依赖/被使用的真正效果时，你应该怎么做？

例如：

admin-management依赖了good-ui，经过了一上午的摸鱼开发，我在good-ui实现了一个功能，但我想知道它在admin-management中的实际表现如何，我应该怎么做呢？

一般来说，我有以下几种选择：

1. 通过相对或绝对路径引用

将业务代码中的import和require所用到的地址，从在node_modules里检索改为真实的物理地址。例如如：

// import { Button } from 'good-ui'
// 为了调试，强行改成了绝对或者相对路径
import { Button } from 'C:/codes/good-ui/dist'

此方案缺点：需要频繁改业务代码，这既麻烦又危险，毕竟谁能保证人类不犯错呢？。

2. 发布到npm源后再调试

将你构建后的产物发布到npm或私有npm上，然后在本地重新install后直接使用。你需要：

# 去good-ui里升级版本&发布
npm version prerelease # 升级版本
npm publish # 发布
# 在admin-management中
npm install goood-ui@latest

此方案缺点：污染了npm版本线，且需要频繁npm install，效率也不高

3. 使用npm link或yarn link调试

使用npm link/yarn link/yalc 等工具，通过软链接的方式进行调试 原理：

• 在全局包路径（Global Path）下创建一个软连接(Symlinked)指向good-ui的dist包;
• 在admin-management里通过软连接，将全局的软链接指向其node_modules/good-ui 通常也需要两步：

# 第一步 在good-ui中执行：
npm link
# or
yarn link
# 第二步 在admin-management中执行：
npm link good-ui
# or
yarn link good-ui

缺点：a. 影响node_modules中原本的good-ui包; b.软链接和文件系统引发的其他各种奇怪的问题；3.全局中good-ui版本

4. 更好的方案yalc！

没错！ 最后出场的就是本篇文章的主角！ yalc!

二、什么是yalc

官方简介：

对包开发者而言，一种比yarn/npm link更好的开发流程。

它的主要对标者就是yarn/npm link，它主要解决了一些yarn/npm link本身存在的缺陷，满足了包开发者的实际需求。

三、安装yalc

npm i yalc -g
# or
yarn global add yalc

四、使用yalc

1. yalc publish (发布依赖)

在good-ui包中执行：

yalc publish

在yalc publish后，它会逐一执行npm 生命周期脚本，如：prepublish、prepare、prepublishOnly、prepack...等。 同时，你也可以通过--no-script禁用钩子钩动各种脚本。

2. yalc add (添加依赖)

在admin-management项目中执行：

yalc add good-ui

现在，你可以在项目中通过

import { Button } from 'good-ui';

用到你本地good-ui中的最新代码了！ 而且！ admin-management/node_modules中原本依赖的good-ui文件也并没有丢，它们被放到了一个缓存文件中，你可以轻松还原，如下：

3. yalc remove (移除依赖)

在admin-management项目中执行：

yalc remove good-ui

嘿！我又重新用上了node_modules中原本依赖的good-ui，而且快如闪电！太完美了！

4. yalc push (更新和推送)

没有人能做到一次成功！ 如果在你修改了good-ui里的一些代码，你只需要执行：

yalc publish --push
# 简化为：
yalc push

你的最新的包，直接在admin-management中生效了！ 甚至能触发了HRM！ A~~M~~A~~Z~~I~~N~~G~~~~!

5. 更多的其他用法

yalc update good-ui # 更新依赖
yalc remove --all # 移除当前包里的全部yalc依赖
# and so many...

现在，我的博客只觉得自己太胖了，而我，一个刚经历完搬砖的程序员，鼻塞喷嚏，准备睡觉....

更多高阶用法，你可以访问github/yalc;

最后

真的不是为了水文章而推荐，这个神器是亲身经历，确确实实的好用,用完之后直接感叹回不去了，那闪电般的速度，那顺畅的热更新，那remove之后node_modules立刻恢复的快乐~~~ 兄弟们，一个字：爽就完了！

【一库】系列的其他文章也很精彩哦~↓↓↓ # 【一库】专栏 # 【一库】vueuse:我不许身为vuer,你的工具集只有lodash! # 【一库】vue-demi: 一拳打穿vue2和3的版本次元壁 # 【一库】yalc: 可能是最好的前端link调试方案（已经非常谦虚了）