【前端】最好用的本地组件库调试工具 yalc-拓冰建站

在开发和编写多个软件包（私有或公共）时，您经常需要在本地环境中的其他项目中使用最新/正在开发的版本，而无需将这些软件包发布到远程注册表。NPM和 Yarn 通过类似的符号链接包方法来解决这个问题。虽然这种方法在很多情况下都有效，但它通常会带来一些棘手的限制和问题，例如依赖关系解析、不同文件系统之间的符号链接互操作性等等npm/yarn link。

`yarn`

yalc它可以作为非常简单的本地存储库，用于存放您本地开发的、希望在本地环境中共享的软件包。
当你yalc publish在包目录中运行时，它只会抓取应该发布到 NPM 的文件，并将它们放入一个特殊的全局存储中（例如，位于~/.yalc）。
当你yalc add my-package在当前文件夹中运行它时project，它会将包内容拉.yalc取到当前文件夹，并向其中注入一个依赖项。或者，你可以使用file:` npm install`，它会在当前文件夹中创建一个指向包内容的符号链接，而不会触及`/` 目录（就像`npm install` 那样），你甚至可以将其与Pnmp/Yarn/Npm 工作区一起使用。link:package.jsonyalc link my-packagenode_modulespackage.jsonnpm/yarn link
yalc在您的项目中创建一个特殊yalc.lock文件（类似于yarn.lock和package-lock.json），用于确保在执行yalc的例程期间保持一致性。
yalc可用于使用yarn包npm管理器管理package.json依赖项的项目。

下载

yarn global add yalc

输入

yalc --version

查看是否下载成功。

如果是 windows，你需要给 yarn 的全局 bin 目录添加环境变量。你可以用命令

yalc global bin

查看 yarn 的全局 bin 类型命令的文件路径，也就是它放 yalc 命令的地方。

Publish

我们来一个例子，比如你的目录结构如下：

我想把 component 这个 npm 包发布出去，直接在 component 的目录里

yalc publish

即可。

这一步完成以后，yalc 会在你的本地机器管理着一个 npm 源。相当于你的任何其他项目都可以从你这个本地的源下载 npm 包。

component 代码：

export const add = (a, b) => a + b;

add

进入 business 文件夹，输入：

yalc add ethan-component-test

执行完后，你的 package.json 里面的 dependencies 会增加一条记录，你可以观察它和普通 npm 包的区别：

{ "name": "ethan-business-test", "version": "1.0.0", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "description": "", "dependencies": { "ethan-component-test": "file:.yalc/ethan-component-test" }, "type": "module" }

同时，yalc 会在 business 目录里面增加一个 .yalc 的文件夹，取代了 node_modules 作为 business 的项目依赖。

business 代码为：

import {add} from 'ethan-component-test' console.log(add(1,2))

可以正常输出 3

`remove`

当你用 yalc 测试完毕以后，你需要移出 yalc 的依赖，此时使用命令：

运行后yalc remove my-package，它将从package.json和中删除软件包信息。yalc.lock
运行此命令yalc remove --all以从项目中移除所有软件包。

yalc remove ethan-component-test

总结

两个小问题

yalc add操作会移除 node_modules 目录
https://github.com/wclr/yalc/issues/243
https://github.com/wclr/yalc/issues/181
需要手动清理全局按照的yalc包，可以 yalc dir 查看全局安装目录
/Users/a0000/.yalc