【前端】最好用的本地组件库调试工具 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
