【前端】最好用的本地组件库调试工具 yalc

在开发和编写多个软件包私有或公共时您经常需要在本地环境中的其他项目中使用最新/正在开发的版本而无需将这些软件包发布到远程注册表。NPM和 Yarn 通过类似的符号链接包方法来解决这个问题。虽然这种方法在很多情况下都有效但它通常会带来一些棘手的限制和问题例如依赖关系解析、不同文件系统之间的符号链接互操作性等等npm/yarn link。yarnyalc它可以作为非常简单的本地存储库用于存放您本地开发的、希望在本地环境中共享的软件包。当你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 linkyalc在您的项目中创建一个特殊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))可以正常输出 3remove当你用 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/243https://github.com/wclr/yalc/issues/181需要手动清理全局按照的yalc包可以 yalc dir 查看全局安装目录/Users/a0000/.yalc