还在用npm link？yalc: 更丝滑的前端link调试方案

Yalc是什么？

Yalc（Yet Another Linker for Components）是一个开源的前端开发工具，旨在解决使用npm link时遇到的一些问题。它提供了一种更加灵活、可靠的方式来在不同的npm包之间共享代码和进行本地开发测试。

Yalc vs npm link：深入对比及优势

工作方式差异

• npm link是通过在本地创建一个全局链接,并让依赖这个包的项目链接到全局包来实现的。这意味着全局有一个这个包的单实例。

• yalc通过把本地暂存包的副本复制到依赖项目的node_modules来工作。

  yalc不会在全局创建符号链接,而是会直接把当前工作目录的包文件(比如my-package),复制一份到依赖这个包的项目(比如my-app)的node_modules目录下面。

  这样my-app项目就直接依赖于本地的my-package的副本,可以独立进行迭代开发和测试,而不会相互影响。 也就是说,通过yalc,不同的依赖项目会各自拥有本地包的一个副本,而不是通过全局符号链接的方式依赖同一个包实例。

  这样可以避免使用npm link时的一些问题,如全局唯一实例被多项目篡改,需要频繁建立和切断链接等。每个项目可以通过自己的本地包副本独立工作。

使用场景差异

• npm link更适合单项目开发和测试。如果有多个项目依赖同一个本地包，npm link就需要频繁链接和断开链接。
• yalc更适合多项目同时开发和测试。每个项目可以独立安装测试本地包，不会互相影响，当然也可以完全 yalc 一把梭。

yalc的优势

支持一次向多个项目推送本地包，不需要重复链接过程

yalc可以通过在包目录下执行yalc publish一次性将本地包推送到多个依赖项目，依赖项目只需要执行yalc add package-name即可。这避免了使用npm link时需要对每个项目重复建立全局链接的过程。

依赖项目可以独立迭代修改本地包，不会相互干扰

每个依赖项目都拥有本地包的独立副本,可以根据自己的需要自由修改和迭代,不会影响到其他项目,也不会被其他项目的修改所影响。

假设你正在开发两个项目，项目A和项目B，它们都依赖于你正在本地开发的一个名为 my-package 的包。你可以在每个项目中使用 yalc add my-package 来添加这个包。

在这种情况下，yalc 会在每个项目的 .yalc 文件夹中创建 my-package 的一个副本，在执行 npm install 或 yarn 时 会从该副本获取包安装到（复制到）node_modules 下（yalc add 命令会自动执行安装命令），所以你 node_modules 中的包实际上是依赖你本地的副本文件的。

假设你在项目A中对副本里的 my-package 进行了一些修改，例如添加了一个新的函数，然后执行 npm install 来更新 node_modules 中的包，那么这些更改只会影响项目A。即使你运行 yalc push 来更新所有使用 my-package 的项目，项目B也不会受到影响，因为它有自己的 my-package 副本。

同样，如果你在项目B中对 my-package 进行了一些修改，例如删除了一个函数，那么这些更改也只会影响项目B。即使你运行 yalc push，项目A也不会受到影响。

如果你使用 yalc link my-package 来添加包，那么直接修改你的项目内副本就会立即体现在 node_modules 的目标包中，无需执行安装。

更清晰的目录结构,可以直接在node_modules看到本地包

yalc的本地包直接放在项目的node_modules里,目录结构更清晰。

依赖项目不需要全局链接包,更干净的环境

yalc不需要全局链接,避免了全局环境被本地包占用的情况。使得项目环境更干净。

可以随时通过yalc remove清理项目的本地依赖

当本地测试结束时,可以很方便的使用yalc remove将引入的本地包从项目中删除,做到可控的清理。

精确的版本控制

• npm link： 当使用npm link时，你将一个本地包链接到另一个项目中。然而，这个过程不涉及包的版本信息，因此在不同项目中可能会出现版本不一致的情况。这可能会导致开发人员在测试或构建过程中遇到意外的错误。
• Yalc： Yalc为每个链接的包分配一个唯一的版本号。这确保了不同项目使用的是相同版本的链接包，消除了版本差异可能带来的问题。无论你在哪个项目中测试代码，都可以确保使用的是一致的包版本。

CI/CD集成

• npm link： 在持续集成环境中，使用npm link可能会导致一些问题，因为这需要手动操作来确保正确的依赖链接。
• Yalc： Yalc可以无缝集成到持续集成流程中。你可以在CI环境中使用yalc add来添加本地包作为依赖，从而确保在构建和测试过程中使用相同的本地包版本。

如何使用Yalc

常规用法

1. 安装Yalc：通过运行npm install -g yalc全局安装Yalc。

2. 发布包：在要共享的包目录中运行yalc publish，将包发布到本地Yalc存储库中。

3. 添加包：在另一个项目中，运行yalc add <package-name> 或 yalc link <package-name>添加到依赖中。

   • yalc add my-package：这个命令会将你的包（my-package）从全局 yalc 存储库复制到你的项目的 .yalc 文件夹中，并在 package.json 文件中添加一个 file: 依赖项，指向 .yalc/my-package。这意味着，当执行 npm install 或 yarn install 时（自动执行），npm 或 yarn 会从 .yalc/my-package 复制文件到 node_modules/my-package

   • yalc link my-package：这个命令与 yalc add 类似，但它在 node_modules/my-package 和 .yalc/my-package 之间创建了一个符号链接，而不是复制文件。这意味着任何对 .yalc/my-package 的更改都会立即反映在 node_modules/my-package 中。此外，这个命令不会修改 package.json 文件

4. 更新包：在进行了修改后，在包目录下运行yalc push来将更新后的代码推送到依赖依赖的项目中的 .yalc 目录下，同时项目下的 node_modules 也得到了更新。

5. 移除包：调试完成后，使用 yalc remove <package-name> 移除包，检验无误后发布你的包。

   注意，node_modules 下对应的包也会被移除，你需要重新安装发布后的新包

   或者，我们可以创建一个 NPM 脚本来简化 Yalc 包的移除过程，例如 "unlink:my-component-lib": "yalc remove my-component-lib && npm install" 然后直接运行 npm run unlink:my-component-lib

快速调试单个项目下的包

在 .yalc 目录下修改包代码，如果你使用 link 添加的包，会自动同步到 node_modules 下对应的包，如果你使用 add 添加的，需要 npm install 一下即可。

手动更新包

一般情况下运行 yalc push my-package。这个命令会自动更新所有已经添加了 my-package 的项目，所以不需要再手动运行 yalc update my-package。

然而，如果你只想更新特定的项目，或者你在运行 yalc publish 时没有使用 --push 选项或 yalc push，你可以在每个项目中手动运行 yalc update my-package 来更新。

总结

俩字，丝滑~

感谢你花费宝贵的时间阅读本文，如果本文给了你一点点帮助或者启发，还请三连支持一下，点赞、关注、收藏，作者会持续与大家分享更多干货。